Current Release: 2.3.8

Articles in this section

Setting Up Your Collection Page

Stacie Alldritt
  • Updated

Setting Up Your Collection Page

On this page

  • Enable collection image: Toggle this on or off to show the collection image at the top of the page. 
  • Collection banner height: Use the slider to control the height of the collection image. The minimum value is 300px, and the maximum value is 550px.
  • Use image height: Toggle this on or off to use the default image height of the collection image. 

Note: Set the collection image and description in the Collections area of Shopify.

Header

  • Enable sorting: Toggle this on or off to show a dropdown for “sort by” options
  • Enable filtering: Toggle this on or off to show filtering options 
  • Product tags to hide: In this field enter the tags that you do not want to display in your filters.

Global product options

  • Product grid style: Use the dropdown to select between Card layout and Tile layout.
    • Card layout: Product information is displayed beneath the product image.
    • Tile layout: Product information is overlaid on the product image.
    • Tile layout on mobile: When viewing the tile layout on mobile, the product information is moved below the product image.
  • Desktop products per row: Use the slider to control how many desktop products are displayed in a row. The minimum value is 2, and the maximum value is 4.
  • Mobile products per row: Use the slider to control how many mobile products are displayed in a row. The minimum value is 1, and the maximum value is 2
  • Products per page: Use the slider to control how many products are displayed on a page. Pagination will be added to show additional products. The minimum value is 1, and the maximum value is 50.
  • Section background: Use the color picker to change the background color of the section.
  • Product border: Use the color picker to change the border color of the products.
  • Show reviews: Toggle this on or off to show Shopify Reviews on each product listing.

Note: Install the free Shopify Product Reviews app to add product views.

  • Show card shadow: Toggle this on or off to show a shadow behind each product listing.
    • Collection page with Section background, Product border and Card shadows enabled.

Note: By default, there is no shadow color defined in the theme. Edit the "card shadow" color found in Theme Settings under the Body section.

Card layout

Use these settings when you have chosen "Card layout" in the Product grid style dropdown under Global Product Options.

  • Force images to be equal height: Toggle this on or off to force all product images to be equal height.
  • Maximum image height: Use the slider to control the maximum image height.
    • Force images to be equal height, unchecked

    • Force images to be equal height, checked. All product images now scale proportionally to be equal height.

Tile layout

Use these settings when you have chosen "Tile layout" in the Product grid style dropdown under Global Product Options.

  • Overlay opacity on hover: Use the slider to control the percentage of color overlay opacity when hovering over a product in desktop. 
  • Hover overlay color: Use the color picker to change the color overlay when hovering over a product in desktop. 
  • Stretch image to fill grid: Toggle this on or off to force the product image to fill the entire grid box.
    • Stretch image to fill grid, unchecked

    • Stretch image to fill grid, checked

Promotion

Use these settings to control the Promotion card in the product slider.

  • Show promotion: Toggle this on or off to show the promotion tile in the collection grid.
  • Promotion location: Use the slider to control the position of the promotion tile within the product slider.
  • Promotion background: Use the color picker to change the background color of the promotion tile.
  • Content: Use the color picker to change the text, button, and border color in the promotion tile.
  • Overlay: Use the color picker to the promotion tile overlay color
  • Overlay Opacity: Use the opacity slider to the adjust the opacity of the overlay color.
  • Show border: Toggle this on or off to show an inset border on the promotion tile.
  • Promotional image: Select an image to display instead of a background color.
  • Small text: This field updates the top level text in your promotion.
  • Heading: This field updates the title of your promotion.
  • Subtitle: This field updates the subtitle of your promotion.
  • Button label: This field updates the button text in your promotion tile.
  • Button link: This field updates the button's URL in your promotion tile.

Promotional Tile in the 2nd position with a background color.

Promotional Tile in 2nd position with a background image.

Tip: The promotion that you set up will be present on all collections using that same collection template. Be sure the promotion content is relevant to all collections it shows up on. Some great ideas include promoting a sale or an ongoing offer such as “Free shipping on orders over $50.”

For additional support, please submit a request and our support team will be in touch to help!