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
 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
    		 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
    		 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 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 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 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
    		 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
    		 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
    		 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
    		 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
    		 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
    		 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
    		 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
    		 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.

    We hope this article has been helpful. If you have any questions or concerns about this feature, please do not hesitate to contact our team for support.

    Back to Concept Support