Default collection page: Sections and Block

This page displays a group of related products or content.

With Concept, an OS 2.0 Shopify theme, you have the ability to add various sections on every page. This means that you can fully customize the look and feel of your collection page by adding any sections that you desire. Simply click on the Add section button and choose the sections that you want to appear on your page. With this, you can create a visually appealing collection page that will keep your visitors engaged and informed.

By default, collection pages have the following sections:

  1. Collection banner
  2. Product grid
  3. Images with text overlay
  4. Recently viewed

1. Collection banner

The settings for the Collection banner section
Section settings Settings Description
Collection banner

Add a description or image by editing your collection. Learn more.
Allow transparent header Enables to display transparent header.

This setting only applies when this section is the first one.
Show collection image Enables to show collection images.

For best results, use an image with a 16:9 aspect ratio. Learn more.
Image Chooses/Uploads the section image.

Default to collection image.
Desktop height Determines the height of the image when viewed on desktop:
  • Adapt to image - Keeps the image's original aspect ratio.
  • 400px - 400px.
  • 450px - 450px.
  • 500px - 500px.
  • 550px - 550px.
  • 600px - 600px.
  • 650px - 650px.
  • 700px - 700px.
  • 750px - 750px
  • Full screen - Extends the image to adapt the height of the window browser.
Desktop content position Sets the position of the content on desktop:
  • Top Left
  • Middle Left
  • Bottom Left
  • Top Center
  • Middle Center
  • Bottom Center
  • Top Right
  • Middle Right
  • Bottom Right
Desktop content alignment Sets the alignment of the content on desktop:
  • Left
  • Center
  • Right
Mobile layout
Mobile height Determines the height of the image when viewed on mobile:
  • Auto - The browser will decide based on the desktop value.
  • 200px - 200px.
  • 250px - 250px.
  • 300px - 300px.
  • 400px - 400px.
  • 500px - 500px.
  • 600px - 600px.
  • Adapt to image - Keeps the image's original aspect ratio.
  • Full screen - Extends the image to be the height of the browser window.
Mobile content position Sets the position of the content on mobile browser:
  • Top Left
  • Middle Left
  • Bottom Left
  • Top Center
  • Middle Center
  • Bottom Center
  • Top Right
  • Middle Right
  • Bottom Right
Mobile content alignment Sets the alignment of the content on mobile browser:
  • Left
  • Center
  • Right
Color You can optionally customize the colors of the section, including the following:
  • Text
  • Highlight
  • Highlight gradient
  • Button text
  • Button background
  • Button background gradient
  • Overlay, can be adjusted from 0 to 100%
Section
You can adjust the Top padding and Bottom padding from 0px to 120px in increments of 4px.
Show section divider Shows a line divider above this section..
Make section full width Makes the container full width.
Make section rounded Applies a rounded edge to the top two corners.
Enable parallax effect Enable the parallax effect, which creates the illusion of depth in a two-dimensional image or scene.

Parallax direction can be chosen one of 3 following options:

  • Vertical
  • Horizontal
  • Zoom
Custom CSS Adds custom CSS to this section.

Available blocks:

  • 1.1 Collection title
  • 1.2 Collection description
  • 1.3 Breadcrumb
  • 1.4 Empty space
1.1 The settings for the Collection title block.

The text size can be set to one of the following option:

  • Small
  • Medium
  • Large
  • Extra large
1.2 The settings for the Collection description block.
Block settings Settings Description
Collection description
Text size The text size can be set to one of the following option:
  • Small
  • Medium
  • Large
  • Extra large
  • Custom.

Custom option allows you to set the text size to any value you want, from 12px to 128px, increasing arithmetically of 2px.
Text font Choose between 2 options for the text formatting: Body or Heading.
Use secondary color Enables to display secondary color.
1.3 The settings for the Breadcrumb block.

Enables to show collections page in breadcrumb list.

1.4 The settings for the Empty space block.
Block settings Settings Description
Empty space
Desktop height Determines the height of the empty space when viewed on desktop. Can be from 0px to 120px, increasing arithmetically of 4px. Default is 40px.
Mobile height Determines the height of the empty space when viewed on mobile. Can be from 0px to 120px, increasing arithmetically of 4px. Default is 28px.

2. Product grid

The settings for the Product grid section
Section settings Settings Description
Product grid
Products per page The number of products shown on the page, adjusted from 6 to 50.
Number of columns on desktop The number of columns shown on the page, adjusted from 1 to 5.
Number of columns on mobile Customizes the number of columns displayed on mobile browser: 1 column or 2 columns.
Filtering and sorting
Enable filtering Lets customers filter the products in the collection based on the filters in your Navigation settings.

Customize filters with the Search & Discovery app. Learn more.
Collapse filters Enables collapse filters.
Desktop filter layout Chooses the desktop filter layout that you like best: Sidebar or Drawer.
Enable color swatches Enables color swatches. View setup instruction.
Enable sorting Lets customers sort the products in the collection based on the following:
  • Featured - Best selling product, based on the all-time number of orders that include the product. If you haven't sold any products yet, then this option sorts your products from newest to oldest.
  • Best selling - Displays the products in descending order based on how many times each product has been ordered.
  • Alphabetically, A-Z - Displays the products in alphabetical order.
  • Alphabetically, Z-A - Displays the products in reverse alphabetical order.
  • Price, low to high - Displays the products from the lowest price to the highest price.
  • Price, high to low - Displays the products from the highest price to the lowest price.
  • Date, old to new - Displays the products from the oldest to the newest, based on when each product was added to your store.
  • Date, new to old - Displays the products from the newest to the oldest, based on when each product was added to your store.
Section
Can adjust padding in Top padding and Bottom padding from 0px to 120px, increasing arithmetically of 4px.
Show section divider Shows a line divider above this section..
Make section full width Makes the container full width.
Make section rounded Applies a rounded edge to the top two corners.
Custom CSS Adds custom CSS to this section.

Available blocks:

  • 2.1 Collection description
  • 2.2 Subcollections
  • 2.3 Promotion
2.1 The settings for the Collection description block.

No customizable settings available.

2.2 The settings for the Subcollection block.
Block settings Settings Description
Subcollections

Links to collections from your menu will appear here. Learn more.
Menu Chooses/Selects the menu you want to display.
Subcollections per row Chooses the number of subcollections to display per row, from 2 to 5.
Show collection count Displays the number of products in each collection.
2.3 The settings for the Promotion block.
Block settings Settings Description
Promotion

Blocks may be hidden if not enough products are visible.
Position in grid The block's coordinates in the grid, from left to right and top to bottom.
Image Chooses/Uploads the block image.
Icon Chooses/Uploads the icon image.
Heading The block title.
Description The description text for the heading is placed below the heading.
Button label The text that displays on the button.
Button link The URL of the button.
Desktop content position Sets the position of the content on desktop:
  • Top
  • Middle
  • Bottom
Desktop content alignment Sets the alignment of the content on desktop:
  • Left
  • Center
  • Right
Mobile layout
Mobile image Image of the section on mobile browser.
Mobile content position Sets the position of the content on mobile browser:
  • Top
  • Middle
  • Bottom
Mobile content alignment Sets the alignment of the content on mobile browser:
  • Left
  • Center
  • Right
Color You can optionally customize the colors of the section, including the following:
  • Text
  • Button text
  • Button background
  • Button background gradient
  • Overlay, can be adjusted from 0 to 100%

3. Images with text

This section allows you to display up to 5 images simultaneously providing greater design flexibility for your page.

The settings for the Images with text section
Section settings Settings Description
Images with text overlay
Allow transparent header This setting only applies when this section is the first one
Desktop height Determines the height of the image when viewed on desktop:
  • 400px - 400px.
  • 450px - 450px.
  • 500px - 500px
  • 550px - 550px.
  • 600px - 600px
  • 650px - 650px.
  • 700px - 700px
  • 750px - 750px
  • Full screen - Extends the image to adapt the height of the window browser.
Desktop content width Determines the width of the image when viewed on desktop:
  • Small
  • Medium
  • Large
Desktop content position Sets the position of the content on desktop:
  • Top Left
  • Middle Left
  • Bottom Left
  • Top Center
  • Middle Center
  • Bottom Center
  • Top Right
  • Middle Right
  • Bottom Right
Desktop content alignment Sets the alignment of the content on desktop:
  • Left
  • Center
  • Right
Image

#1 #2 #3 #4 #5

 The images for the section on desktop browser.
Mobile layout
Mobile height Determines the height of the image when viewed on mobile:
  • Auto - The browser will decide based on the desktop value.
  • 200px - 200px.
  • 250px - 250px.
  • 300px - 300px.
  • 400px - 400px.
  • 500px - 500px.
  • 600px - 600px
  • Full screen
    - Extends the image to be the height of the browser window.
Mobile content position Sets the position of the content on mobile browser:
  • Top Left
  • Middle Left
  • Bottom Left
  • Top Center
  • Middle Center
  • Bottom Center
  • Top Right
  • Middle Right
  • Bottom Right
Mobile content alignment Sets the alignment of the content on mobile browser:
  • Left
  • Center
  • Right
Color You can optionally customize the colors of the section, including the following:
  • Text
  • Background
  • Background gradient
  • Highlight
  • Highlight gradient
  • Button text
  • Button background
  • Button background gradient
Section
Can adjust padding in Top padding and Bottom padding from 0px to 120px, increasing arithmetically of 4px.
Show section divider Shows a line divider above this section..
Make section full width Makes the container full width.
Make section rounded Applies a rounded edge to the top two corners.
Enable parallax effect Enable to display the parallax effect, which creates the illusion of depth in a two-dimensional image or scene.
Custom CSS Adds custom CSS to this section.

Available blocks:

  • 3.1 Heading
  • 3.2 Subheading
  • 3.3 Text
  • 3.4 Button
  • 3.5 Link
  • 3.6 Image
  • 3.7 Custom liquid
  • 3.8 Empty space
3.1 The settings for the Heading block.
Block settings Settings Description
Heading
Heading The block title.
Heading size The heading size can be set to one of the following option: Small, Medium, Large, or Extra large.
Heading tag Selects the heading tag to structure and organize your content for SEO.
Highlighted text
Highlighted text Chooses from one of the following 6 options to format your text:
  • Text color
  • Text background color
  • Fancy underline
  • Regular underline
  • Stencil text
  • Hand-drawn scribble
Highlighted scribble

Require highlighted text style to be set to Hand-drawn scribble.

 This setting offers 5 ways to highlight text:
  • Circle
  • Basic underline
  • Sketch underline
  • Squiggle underline
  • Squiggle underline 2
3.2 The settings for the Subheading block.
Block settings Settings Description
Subheading
Subheading The subheading for the heading.
Subheading size Size of subheading:
  • Small
  • Medium
  • Large
Use secondary color Applies a little bit lighter color based on the text color.
3.3 The settings for the Text block.
Block settings Settings Description
Text
Text Adding your text.
Text size The text size can be set to one of the following option:
  • Small
  • Medium
  • Large
  • Extra large
  • Custom.

Custom option allows you to set the text size to any value you want, from 12px to 128px, increasing arithmetically of 2px.
Text font Choose between 2 options for the text formatting: Body or Heading.
Use secondary color Enable seconday color.
Highlighted text
Highlighted text Chooses from one of the following 6 options to format your text:
  • Text color
  • Text background color
  • Fancy underline
  • Regular underline
  • Stencil text
  • Hand-drawn scribble
Highlighted scribble

Require highlighted text style to be set to Hand-drawn scribble.

 This setting offers 5 ways to highlight text:
  • Circle
  • Basic underline
  • Sketch underline
  • Squiggle underline
  • Squiggle underline 2
3.4 The settings for the Button block.
Block settings Settings Description
Button
Button label The text that displays on the button.
Button link The URL of the button.
Button size Adjusts size of the button in 3 options: Small, Medium or Large
Use outline button style Uses the outline style for the button.
3.5 The settings for the Link block.
Block settings Settings Description
Link
Text The text of the link, which is placed right beside the button.
Link Adds the URL you want to link.
3.6 The settings for the Image block.
Block settings Settings Description
Image
Image Selects an image for block.
Image width Chooses one of two image width options:
  • Full width: Image fills the entire browser window.
  • Custom: Sets the image width between 20px and 1000px in 10px increments.
3.7 The settings for the Custom liquid block.

You can add your own Liquid code to create a custom block.

3.8 The settings for the Empty space block.
Block settings Settings Description
Empty space
Desktop height Determines the height of the empty space when viewed on desktop. Can be from 0px to 120px, increasing arithmetically of 4px. Default is 40px.
Mobile height Determines the height of the empty space when viewed on mobile. Can be from 0px to 120px, increasing arithmetically of 4px. Default is 28px.

4. Recently viewed

Helps your customers to find the products they'd previously visited and prompt them to purchase. This is easier for your customers to find them again rather than find their way through the navigation menu.

The settings for the Recently viewed section
Section settings Settings Description
Recently viewed
Number of recent products The number of complementary products can range from 2 to 12.
Number of columns on desktop Customizes the number of columns displayed on desktop browser from 1 column to 5 columns
Enable carousel on desktop Displays a carousel of products from the collection on a desktop browser.
Mobile layout
Numer of columns on mobile Customizes the number of columns displayed on mobile browser: 1 column or 2 columns.
Enable swipe on mobile Sets mobile display to one row with horizontal swipe.
Heading
Heading The section title.
Heading size The heading size can be set to one of the following option: Small, Medium, Large, or Extra large.
Heading alignment The Heading can be aligned to the Left, Center, or Right.
Heading tag Selects the heading tag to structure and organize your content for SEO.
Subheading The subheading for the heading is placed above the heading.
Description The description text for the heading is placed below the heading.
Highlighted text
Highlighted text Chooses from one of the following 6 options to format your text:
  • Text color
  • Text background color
  • Fancy underline
  • Regular underline
  • Stencil text
  • Hand-drawn scribble
Highlighted scribble

Require highlighted text style to be set to Hand-drawn scribble.

 This setting offers 5 ways to highlight text:
  • Circle
  • Basic underline
  • Sketch underline
  • Squiggle underline
  • Squiggle underline 2
Color You can optionally customize the colors of the section, including the following:
  • Text
  • Background
  • Background gradient
  • Highlight
  • Highlight gradient
  • Button text
  • Button background
  • Button background gradient
Section
Can adjust padding in Top padding and Bottom padding from 0px to 120px, increasing arithmetically of 4px.
Show section divider Shows a line divider above this section..
Make section full width Makes the container full width.
Make section rounded Applies a rounded edge to the top two corners.
Custom CSS Adds custom CSS to this section.

This section does not support adding blocks.

Need Further Assistance

If you encounter any issues or need additional help with your Concept theme, don't hesitate to reach out to Roartheme's support team for expert guidance.

Scan the QR code to get support within 8 hours via RoarTheme ’s Whatsapp

Back to Concept Support