Collections list page settings

Breadcrumbs settings


Setting Description
Show breadcrumbs By enabling this option, breadcrumbs will be displayed above the page banner, providing navigation links to help visitors back to main page – homepage.
Breadcrumbs color scheme Choose an appropriate color scheme for the breadcrumbs from the schemes list. The color scheme includes different colors for the background and text.

Banner settings


Setting Description
Background image You can set a background image for the banner to enhance its visual appeal. The background image will be displayed behind the content, adding depth and style to your banner.
Banner height

Select the height of the banner:

  • Default: The height is determined by the content, taking into account the section paddings, which can be adjusted as needed.
  • Small
  • Medium
  • Large
Overlay Select the gradient color to be applied over the banner image.
Image overlay opacity The “Image overlay opacity” setting allows you to adjust the transparency of the overlay that is applied to images on your website. Use the slider to make changes in banner image.
Color scheme

Choose an appropriate color scheme for the banner from the schemes list. The color scheme includes different colors for the background, heading, breadcrumbs, and other elements in the banner.

*Applying a color scheme automatically updates all associated colors set in the theme settings according to the created color schemes. You can edit colors in this block, but it will impact the other sections and blocks in which the same color scheme is used.  Learn more about color schemes.

Heading Enter an inspiring heading for the collection list page template to encourage customers making purchases.
Heading size

The heading size setting offers three options to control the size of your site's headings:

  • Small
  • Medium
  • Large
Font weight

Font weight defines the thickness or boldness of text on your store. Available options for heading:

  • Normal (400): The default font weight for body text, which can also be applied to headings.
  • Medium (500): Slightly thicker, suitable for emphasized body text or light headings.
  • Semi-Bold (600): Heavier, ideal for subheadings or highlighted text.
  • Bold (700): Strongest weight for maximum emphasis.
Top padding The "Top padding" setting allows you to adjust the amount of space at the top of the banner using a slider. 
Bottom padding The "Bottom padding" setting functions similarly to the “Top padding” setting, but controls the space at the bottom of the banner using a slider.
Top padding mobile The "Top padding mobile" setting allows you to adjust the amount of space at the top of the banner for mobile devices using a slider. 
Bottom padding mobile The "Bottom padding mobile" setting functions similarly to the “Top padding mobile” setting, but controls the space at the bottom of the banner for mobile devices using a slider.

Collections settings


Setting Description
First card color scheme
Sort collections by:

Choose the sorting option for displaying collections on the collection list page template. This can include options like alphabetical order, price, or date.

*These settings are designed specifically for default collections added to the Collection section on the Dashboard, allowing you to sort them according to your preferences. However, when utilizing a custom collection block, use other settings for changing their appearance.

Number of columns on desktop The “Number of columns on desktop” setting allows you to select the number of columns in which your collections will be displayed on the desktop. You can select from 1 to 4.
Image style
  • Standard: Collections are displayed with the image first, followed by a card containing the heading, description, and link.
  • Cover: The content (heading, description, and link) is placed within a colored container on top of the image, creating a unique and visually appealing look.
  • Cover first card: Only the first card has an image that covers the content, while the others follow the standard collection card layout.
Image ratio

Image Ratio controls how your images look based on their shape. Here are the options:

  • Adapt to Image: Keeps the original shape of the image, no cropping.
  • Portrait: Makes the image taller.
  • Square: Makes the image a perfect square.
  • Custom: Allows to set image height in the next option.
Custom image height Set a custom image ratio and adjust its height using a convenient slider.
Show description

Path:

  1. Navigate to Shopify admin panel;
  2. Click on Collections section;
  3. Click “Create collection” button on the right corner or click on created collection before from the list;
  4. In Description field, type a brief description about your collection;
  5. Enable this option to show description.

Mobile layout


Setting Description
Number of columns on mobile   The setting allows you to choose the number of columns in which your collections will be displayed on mobile. You can select from the list: 1 column or 2 columns.

Content settings


Setting Description
Top padding The "Top padding" setting allows you to adjust the amount of space at the top of the collections list using a slider. 
Bottom padding The "Bottom padding" setting functions similarly to the “Section top padding” setting, but controls the space at the bottom of the collections list. 
Top padding mobile The "Top padding mobile" setting allows you to adjust the amount of space at the top of the collections list specifically for mobile devices, using a slider.
Bottom padding mobile The "Bottom padding mobile" setting works similarly to the "Top padding mobile" setting but controls the space at the bottom of the collections list for mobile devices.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us