You’ll notice that this collection page also has a configured background image. You can configure the title, description and background image from within each product collection.
To configure product collections, head to the Products > Collections page in your Shopify admin. For more information about product collections see Shopify’s Building product collections documentation.
If your products have product tags, you can allow customers to filter products in a collection by tags. See Shopify’s Tags article for more information about adding tags to your products.
You can allow your customers to sort through products in a collection with a variety of filters. See Shopify’s Viewing and sorting article for more information about sorting your products.
The filters include these options:
There are two ways to display product names and prices on the storefront and collections pages: Always display title/price and Display title/price on hover.
By default, Ira uses the Always display title/price configuration. That means that the product names and prices are always visible and displayed underneath the product image. You can see how this looks in the image below.
When you use the Display title/price on hover configuration, prices are only visible when the customer hovers over them.
On mobile, the product name and price still display in a block below the product image. This is because hovering isn’t possible with a touchscreen.
You can set the text and background colors with the Image overlay background and Image overlay text settings. See Colors for more information.
You can put all of your collections in your navigation. Typically, this is done with a drop-down menu.
Drop-down menus are collapsible menus in the store navigation. You’ll often see them used to link to particular product categories (jackets, pants, shoes) or special collections.
See Shopify’s article, Create a drop-down menu, for more information.
You can change your navigation configuration from the header settings.
On collection pages, your images are not cropped, although they may be resized so that two or three products can fit in a row.
For a consistent layout we strongly recommend that you pick a single image size and use it for every product in your store.
If it is not possible to use a single image size, using the same aspect ratio (as long as the minimum image width is our recommended width of 1024 pixels) will provide a consistent experience, too.
Here’s a table of recommended image dimensions:
|1024 pixels*||1024 pixels*||1:1 (square)|
|1024 pixels*||683 pixels*||3:2 (landscape)|
|1024 pixels*||1536 pixels*||2:3 (portrait)|
* Recommended dimensions. Notice that the minimum recommended width is always 1024 pixels.