Lorenza 3.0

Collection pages

The Collection pages section includes settings to change the look and feel of product collection pages.

This article is just about the collection pages settings. For more information about the other sections you can add to collection pages, see the article about the Collection pages template.

Change the collection pages settings

From the Collection pages settings, you can change the look and feel of the collections being displayed:

STEPS

  1. From your Customize theme editor, choose Collections from the pages drop-down menu at the top of the screen.

  2. Click on the Collection pages section.

  3. Choose whether to Show collection image, above the list of products in the collection. See an example:

    Adding an image for a collection is a Shopify feature. See their article Add or change a featured image for a collection for more information.

  4. If you chose to turn on the Show collection image setting, you can configure the image overlay using the next settings: Overlay opacity, Overlay, and Text colors.

    For more information about these settings, see Settings below.

  5. Choose whether to show a border line (Show border), the collection name (Heading), and a small heading that indicates that you're on a collection page (Show small heading).

  6. Choose whether to Show collection description. See an example:

    Adding a description to a collection is a Shopify feature. See their article Change the name or description for a collection.

  7. Choose a Heading alignment, either Left or Center

  8. Choose a Max width of text, between 16 and 50.

    The text max width lets you control the shape of the text, and make it look good no matter how long your collection descriptions are.

  9. Choose whether to Show sort options.

Allow your users to sort the collection based on options like Price, Date, Best Selling, Featured, or Alphabetically.

  1. Choose whether to Show filters.

    Product filtering uses the tags that are set on your products. For more information see Shopify's Creating and using tags article.

Your browser does not support the video tag.Collection filters on the collection page

  1. Choose Filter type.

Choose By group to categorize your tags into groups using a special tag syntax. Learn how to set this up from the How to set up product filtering article.

Choose By tag to show all your collections' tags in a list.

  1. Choose your Filter style.

    Choose Sidebar to show your tags in a list along the left side of the collection:

    Choose Buttons to show buttons that open a drawer with a list of tags:

  2. Choose whether to Show swatches.

    If you have product swatches set up, they appear when you hover over an item in the collection.

  3. Pick how many Products per row should be displayed.

    Choose between 2 and 4 products per row.

  4. Choose the Image aspect ratio to be used for all collection images.

    Use Natural to use the original images. Or, use Square (1:1), Landscape (3:2), or Portrait (2:3) to have the images cropped to match one another.

  5. Choose how the collection should be Paginated.

    Choose Infinite to have your collection page automatically load the next products as the customer scrolls.

    Choose Click to load to let customers click a Load more button to see the next group of products but stay on the same page.

    Choose Paginated to let customers navigate between numbered pages of products in the collection.

  6. Click Save.

Settings reference

Show collection image

Check this checkbox to show the collection image.

Adding an image for a collection is a Shopify feature. See their article Add or change a featured image for a collection for more information.

If you use the Show collection image setting, the following settings apply to the image:

Overlay opacity

Use the slider to choose how opaque the overlay color should be. Where 0% is invisible and 100% is completely opaque.

Overlay color

Pick the color of the overlay.

Text color

Pick the color of all text in the heading area that is overlaid over the image. Choose a color opposite to the overlay color for legibility.

The following settings apply whether or not the collection image is hidden or shown:

Show border

Choose whether to show a border between the collection heading section and the list of products.

Show heading

Choose whether to show the collection name as a heading.

Show small heading

Choose whether to display a small heading that indicates that you're viewing a collection page. The small heading text says "Collection".

Show description

Choose whether to display the collection description.

Heading alignment

Choose a heading text alignment. Either Left or Center.

Max width of text

Using the slider, choose how wide the heading text should appear, at a maximum.

Show sort options

Allow your users to sort the collection based on options like Price, Date, Best Selling, Featured, or Alphabetically.

Show collection filters

Choose whether the product filters should be displayed.

Filter type

Choose either By group or By tag.

By group Uses a special tag syntax to categorize your product filters into groups. Learn more on how to set that up here.

By tag shows every product tag in the collection in a list.

Filter style

Choose either Sidebar or Buttons.

Sidebar shows your tag and sort options in a sidebar menu on the left side of the page.

Buttons Shows your tag and sort options as a button, and opens a drawer with options when clicked.

Show swatches

Show color swatches on your product when a user hovers over them.

In order to show swatches, you need to set up the product swatches feature. See the Swatches article for more information.

Products per row

Choose how many products should be displayed per row. Either 2, 3, or 4.

Products per page

Choose how many products should be displayed per page. Choose anywhere between 2 and 24.

Image aspect ratio

Choose the aspect ratio for all collection images displayed.

Use Square (1:1), Landscape (3:2), or Portrait (2:3) to have the images cropped to match one another

Use Natural if you do not want your images cropped at all.

Pagination

Choose how each page of the collection should be paginated.

Choose Infinite to have your collection page automatically load the next products as the customer loads.

Choose Click to load to let customers click a Load more button to see the next group of products.

Choose Paginated to let customers navigate between numbered pages of products in the collection.

How to set up group product filtering

In the Collection page settings, you can choose to Show collection filters. This article explains how you can configure different filters for your products.

Note that to use this filter style, you need to add special tags to your products. You may want to read Shopify's Creating and using tags article.

How the groups filter works

The filter looks for tags in the format Group_Filter, where Group is the filter group (like Color, Size, Material, and so on) and Filter is the name of the filter. It is important that you use an _ underscore as a separator.

As an example, see the following products and their tags:

Product

Tags

Large Bag

Size_Large, Type_Bag

Small Bag

Size_Small, Type_Bag

If these products were part of the same collection, there would be three filterable tags (Large, Small, Bag) in two groups (Size, Type).

They would be displayed like this:

Type
  Bag

Size
  Large
  Small

  • Collection pages template

  • Swatches