Collection Content Review Tool

This tutorial shows how to add a section to your Flex theme that you can use to review the content for your collections ( collection image and description ) in one place.  This section can be added to a page.

Steps to add this section

1.  Add the section page__collection-content.liquid to your theme files.
2. Add the section to a page in Theme Customization.

Watch video for complete guide.

Theme Code

page__collection-content.liquid Section

page.collection-content.json Template

Transcript

Hey, Scott Austin here from JadePuma.

In this video, I'm gonna show you how to add a section to your theme so that you can review all of your collection content easily in one page, one centralized location. So on this page here, I've added this section right in the section. It's just one section it's called page collection photos, I think in GitHub, we're actually calling it collection dash content. And you just add this section to your store and then in your theme customization, you just add that collection to a page and the theme settings are pretty simple. There's a couple settings for color. You know, this one here is the, the header background, which is kind of nice. So you can see which you know, content is for which collection. And if you click on that header, it'll take you to that collection in the store admin.

So you can quickly edit it and review it and, and all that good stuff. And then there's a setting to show collection descriptions or not. This store here has no collection descriptions, but it's a good way to check. And if you want descriptions for your collections to see if any are missing. So you add this section to a page set the settings, and then on this page, what you'll see is we've got two images showing or the possibility of two images showing and lemme explain the difference between them. So the collection image is the collection image that you set on the collection page. So if we go in the Shopify admin onto a collection page, it's this image over here. Now, if you don't set a collection image, Shopify is gonna calculate for you a featured image. If the featured image is the collection image, if you've set a collection image, but if you haven't set a collection image, then the featured image and that's what's over here.

The featured image becomes the first product in the default sort order for the collection. So the first product that shows up the first product photo for that image or for that product. So if there's no collection photo assigned, it'll pull a photo from a product in the first product in default sort order. And then what we're doing with this tool is we're looking at the aspect ratio of the images. And if the aspect ratio, I, I always put collection images as one to one or square photos. So we're checking to see if the aspect ratio is, is 1.0 or not. If it is, it shows up in green, if it isn't, it highlights it in red and tells you where you need to crop or, or pad the photo. And it also shows you the dimensions of the photo

Cuz you may want to, you know, make sure that all your photos exceed a certain minimum size. So now you can, in one page, scroll through all of your collection images, your collection featured images and your collection descriptions and review all that content. And if there's more than 48 collections on your, in your store, this is a passionated section. So if we get down to the bottom, you'll see that there's a page two for this store and you can see this store here has a collection image assigned for the dinosaurs collection. So you'll see that, you know, the both images will be the same once there's a collection image, cuz it is also the collection featured image. And if we get down to the bottom of the page, we'll see the pation. And you can, you know, pate through whatever number of pages you have in your store based on the number of collections that you have. All right, that's the, the collection review tool, hopefully that helps you in managing your store.

Thanks.