Navigation
Articles

Article •

Collection

Table of contents

Change the look of every collection on your online store.

Show the collection image

In the following example, the settings that affect the display on mobile are used, but the same steps apply to the settings that affect the display on desktop.

  1. From your Shopify admin, go to Online Store → Themes.
  2. Next to Emporium, click Customize.
  3. In the drop-down menu at the top of the page, select a Collection template.
  4. Click the Collection header section.
  5. Check Show image (mobile).

If you choose to show the collection image, then make sure you add a collection image for each collection on your online store. It’s recommended to upload landscape images.

Improve the art direction of the collection image

The collection image looks best on desktop when a landscape image is used. However, the collection image tries to adopt a square (1:1) aspect ratio on mobile. In some cases, the collection image may not look right when displayed at this aspect ratio. You can override the default collection image with a different image on mobile, to improve art direction.

In order to override the default collection image on mobile, you must:

  • add a Metafield definition,
  • populate the Metafield with an image,
  • use the image on the Collection template.

Add a Metafield definition

  1. From your Shopify admin, go to Settings → Custom data.
  2. Click Collections.
  3. Click Add definition.
  4. In the Name field, input a name (e.g. Mobile collection image).
  5. Optional: In the Namespace and key field, input a value.
  6. Optional: In the Description field, input a description.
  7. Click Select type.
  8. Select File.
  9. Select One file.
  10. Under Validation, check Accept specific file types → Images.
  11. Under Access, check Storefronts.
  12. Click Save.

Populate the Metafield with an image

  1. From your Shopify admin, go to Products → Collections.
  2. Select the collection you want to edit.
  3. Under Metafields, click the name of your Metafield (e.g. Mobile collection image).
  4. Click Select image.
  5. Select the image to display, or upload a new image, and click Done.
  6. Click Save.

Use the image on the Collection template

  1. From your Shopify admin, go to Online Store → Themes.
  2. Next to Emporium, click Customize.
  3. In the drop-down menu at the top of the page, select a Collection template.
  4. Click the Collection header section.
  5. Next to Image (mobile), click the Connect dynamic source icon-dynamic-source.svg icon.
  6. Select the Metafield to display (e.g. Mobile collection image) and click Connect.

Metafields enable you to customise the functionality and appearance of your Shopify store by letting you save specialised information that isn't usually captured in the Shopify admin. Learn more about Metafields.

Show the collection description

In the following example, the settings that affect the display on mobile are used, but the same steps apply to the settings that affect the display on desktop.

  1. From your Shopify admin, go to Online Store → Themes.
  2. Next to Emporium, click Customize.
  3. In the drop-down menu at the top of the page, select a Collection template.
  4. Click the Collection header section.
  5. Check Show description (mobile).

Change the position of storefront filters (desktop)

Storefront filters let customers filter your products by attributes like price, flavor or availability. You can choose whether to show storefront filters above products or to the side of products in a collection, depending on the needs of your online store.

When a customer selects a filter, it becomes an applied filter. Applied filters are always shown above products in a collection.

Learn more about storefront filtering.

  1. From your Shopify admin, go to Online Store → Themes.
  2. Next to Emporium, click Customize.
  3. In the drop-down menu at the top of the page, select a Collection template.
  4. Click the Collection body section.
  5. Under the FILTER AND SORT heading, check Enable filtering.
  6. Under the FILTER AND SORT heading, under Position (desktop), select an option.

If you can’t see your changes while using the theme editor on a desktop, then make sure you've set the theme editor’s preview mode to icon-fullscreen.svg Fullscreen.

Add a promotion

Show customers a promotion while they browse your collection. You can add up to 2 promotions.

Promotions are displayed in the product grid. The first promotion is displayed after the 12th product or at the end of the product grid, whichever occurs first. The second promotion is displayed after the 24th product or at the end of the product grid, whichever occurs first.

  1. From your Shopify admin, go to Online Store → Themes.
  2. Next to Emporium, click Customize.
  3. In the drop-down menu at the top of the page, select a Collection template.
  4. Under the Collection body section, click icon-add.svg Add Promotion.

Display a promotion image

In the following example, the settings that affect the display on mobile are used, but the same steps apply to the settings that affect the display on desktop.

  1. From your Shopify admin, go to Online Store → Themes.
  2. Next to Emporium, click Customize.
  3. In the drop-down menu at the top of the page, select a Collection template.
  4. Under the Collection body section, click a Promotion block.
  5. Under Image (mobile), click Select image.
  6. Select the image to display, or upload a new image, and click Select.

Promotions adopt the dimensions of the uploaded image so that all of the image is visible.