Collection page configuration – Swissuplabs

The Divine theme collection page includes 5 sections by default. You can show/hide each one using a visibility badge. You can also add a new section.

Let's see how to customize each section on the collection page. Go to the Online Store - Collection page.

Image banner section

The section's configuration includes the following settings:

Change the first image and select the second image.
Stack images on mobile.
Preload images to improve page loading time.
Set the image position. The available values are Top, Center, and Bottom.
Set the text box position. Possible values are Left, Top, Center, Bottom, and Right.
Choose a color scheme from a dropdown list.
Set the banner height. Possible values are the Adapt to the first image, Small, Medium, and Large.
Make the section full-width.
Show underlayer.
Show highlight products, select these products, and choose the products' background color.
Enable on-scroll reveal animation.

Then you can create a description for the collection block, set the heading, and set the heading size. Read the article to learn about the correct heading usage for better SEO.

Collection section

The section consists of Filters, Products, and Description blocks. They will help your customers see only wanted products on the collection page and make a purchase faster. With the Divine theme settings, it is possible to:

Set the position for the filter display on the desktop. Available values are Aside from Left, Aside from Left (initially open), Products toolbar, Main content, Aside from Right, and Aside from Right (initially open).
Specify the options that will be initially opened.
Enable color swatches for the filters.
Enable on-scroll reveal animation.
Enable a collapsed description and set the number of visible lines.
Enables sorting for the products in the collection section.
Enable mode toggler.
Choose the listing mode between Grid and List.
Set the number of products per page up to 12.
Set the number of columns per page up to 3.
Preload product images for better page loading time.
Customize the product card.

Countdown timer section

Here it is possible to:

Create a heading for the countdown timer and set its size. See the recommendation article about choosing the correct Heading usage for better SEO.
Create a subtitle.
Choose styles for the background and foreground colors.
Set vertical padding using the range.
Initialize a countdown timer. You can set the day and time the timer starts from.

Multicolumn section

The general multicolumn settings allow you to:

Create a heading and set the Heading size. Choose the heading size value among H1, H2, and H3. See the recommendations about the correct usage of headings for better SEO.
Specify a subtitle.
Set the number of columns shown in the section.
Select the image width. Possible values are the Full width of the column, The half-width of the column, and One-third width of the column.
Select the image ratio. Possible values are Adapt to Image, Portrait, Circle, and Square.
Select the column text alignment. Possible values are Left, Center, and Right.
Select the column content arrangement. The available values are Inline, Inline Reverse, Stacked, Stacked Reverse, and Cover. By the way, you can arrange the content in the column on mobile screens only. To do that, choose the Stacked (reverse) mobile-only value.
Choose the button width between Extend and Shrink.
Add the button label and link a button to other pages of your Shopify store.
Enable swipe on mobile.
Enable content animation.
Enable on-scroll reveal animation.

The Multicolumn section allows you to add as many columns as you need according to your wishes. With each column, it is possible to:

Create the heading and subheading.
Add a description.
Set the content position. The available values are Split the button, Top, Center, and Bottom.
Add the link to forward users to the required page.
Choose the link appearance between Button, Button secondary, and Link.
Show media.
Add spacing.
Select the image for the column.
Set colors for the column background, heading, heading background, subheading, description, button background, and button foreground.

Border separator section

Set up a missing translation and choose its color.

Icons bar section

Use the general settings to edit the section:

Select the values for the color scheme.
Make the icons bar visible always or on desktop or mobile only.
Set the icons' width.
Set the text position. The available values are Theme appearance, Top, Bottom, Left, and Right.
Show the border on top.
Show the border underneath.
Show shadow.
Show items separator.
Enable on-scroll reveal animation.

You can also see 3 blocks. Every block allows you to:

Choose the icons from a vast dropdown list.
Create the description for the icon.
Create a text to be shown underneath the icon.