Home Envy Templates Collection pages

Collection pages

Gather your products together to form collections and display links on your storefront to view dedicated pages for these collections.

Overview

Once you have added some individual products to your store, it is likely you will want to categorise these in some way, organising them in to groups. If you are a clothing store, you may sell many different types of apparel, such as hoodies, socks, jeans, gloves, hats, tees and so on. You could create a collection for each of the above.

Note

The more items you offer, the more important it is that your products remain easy to find, both for your customers and yourself.

Collections can be linked to on your storefront so they display a certain number of products (with product images), from that collection, or you could add a simpler, text link, in your footer, for example.


What is a collection and how do I make one?

Here is a list of the most salient points about collections:

Tip

Here is Shopify’s guide on creating a collection:
help.shopify.com/manual/products/collections


How can I display or link to my collection page on my storefront?

Here are two examples of how you can display your collections on your storefront.

The first example is a text link in the footer:

If you need help with setting up footer links, there is a great resource available here:

docs.wetheme.com/envy/footer

Here is a more visual representation of your collection, using the “featured collection” section:

More info is available on specific sections and their options here:

docs.wetheme.com/envy/sections

Note

If a collection has no products added to it, the Shopify platform will display placeholder images instead, with a price of £19.99, like this:

Once your collection page link is clicked on, regardless of visual format, your customers will be taken through to your products contained within that collection, which you previously grouped together in the admin area.


What control do I have over my collection page layout?

To view your collection page, head here:

  1. Admin
  2. Online store > Themes > Customise
  3. Select 'Collection pages' from the page selector dropdown:
  1. Select 'Collection pages' from the left-hand settings panel:

You will see the following options:

Products per row

Choose how many products are displayed per row. Select 2, 3, or 4.

Rows per page

Choose how many products are displayed per page. Select from 3 to 8.

Show vendor

Toggle between hidden and visible.

Hover effect

None:

Zoom:

Show second product image:

Show collection image

You can add a collection image in your admin area:

  1. Admin
  2. Online store
  3. Products > Collections
  4. Choose a collection
  5. On the right-hand-side of the page you will see the option to add a collection image.

Use the toggle in your theme settings to switch between visible and hidden.

Enable sorting

Toggle whether your sort menu is visible or hidden.

Here is how the sort menu looks:

Visible:

Hidden:

Enable tag filtering

Use the toggle in your theme settings to switch between visible and hidden.

Here is how tag filtering looks.

Visible:

Hidden:

Tip

The tag filtering and sorting menus will always default to the left-hand-side when only one is visible.
Here is how your page will look if both tag filtering and sorting are set to hidden:

Auto-height images

Toggle whether the auto-height feature is enabled or disabled.

This setting uses advanced CSS to provide enhanced visual consistency and continuity across your site

​Here's how you can do this:

  1. Admin
  2. Online store > Themes > Customise
  3. Navigate to a collection page in the right-hand-side preview window.
  4. Using the left-hand settings panel, select 'Collection pages'
  5. Choose 'Enable auto-height':

Note

Whilst this setting can tidy up your images and attempt the unify the way they are displayed, the only true way of aligning your images is to keep them consistent in aspect ratio by cropping correctly either before uploading to the Shopify admin or in the Shopify image editor:
help.shopify.com/manual/productivity-tools/image-editor#crop-an-image

Sidebar

The sidebar menu option allows you to display an image, menu, vendors and text, using the 6 available “content” blocks.

Toggle your sidebar content to be either visible of hidden.

Note

If you have no “content” added, your sidebar will not display.

Content

Note

You can display up to a maximum of 6 content blocks.

Here is how each of the different types of content will look:

Text

Heading: Add your choice of heading here.

Text: Add more descriptive text here, including links, bold and italic styling.

Vendors

Heading: Add your choice of heading here.

Image

Click "Select image" to add your picture.

We recommend dimensions of 300 x 150px.

Link: Add your choice of link here. Choose from the list displayed when you click the entry field, or enter your own manual URL.

Menu

This allows you to add a vertical stack of links and 'heading' text of your choice to be displayed above the stack.

To create a stack of links called a 'Menu', head to:

  1. Admin > Online store > Navigation
  2. Select 'Add menu' shown at the top right of your screen
  3. Title the menu
  4. Select 'Add menu item'
  5. Name the menu items (links)
  6. Choose where the link takes the customer
  7. Select “add” and you’re done

Then head back to your theme's customisation area and select this newly created "block" of links for your collection page by clicking “change”, then choosing the “whatever you like” menu you just made.

You should see the change visible on your collection page right away:

Tip

To delete any of these content blocks, simply click to expand the block and select the trash icon.

Tip

You can re-order your adverts by clicking and dragging the content block’s position.


You now know all the secrets of setting up collections on your storefront and how to adjust everything to make your store shine! :-)