Concept Documentation
Open a Store for FREEExclusive OffersServicesResources
  • Exclusive Offers 🔥
  • Greeting + Useful Resources
  • Changelog
  • Overview
    • Full Theme Features
    • Online Store 2.0
      • Color Gradient
      • Dynamic Source
  • Installation
    • Install Theme 🎯
    • Update Theme 🔔
      • Update Theme
      • Theme Update Service
    • Install App
      • Product Review
      • Shopify Search & Discovery
      • Shopify Forms
  • Basic Configuration
    • Customer registration
    • Shipping rates
    • Location
    • Language
    • Payment
    • Currency
    • Navigation
  • Theme Settings
    • General
    • Colors
      • Color schemes
    • Typography
    • Multiple layouts
    • Animations
    • Buttons
    • Variant pills
    • Inputs
    • Product cards
    • Media
    • Dropdowns and pop-ups
    • Drawers
    • Badges
    • Social Media
    • Search behavior
    • Favicon
    • Currency format
    • Cart drawer
    • Login
    • Multitasking bar
    • Preloading screen
    • Custom CSS
  • Header Group
    • Demo & Settings Data
    • Advanced settings
      • Dropdown menu
      • Mega menu
    • Header
    • Announcement bar
      • Announcement
    • Link list
      • Text
      • Menu
    • Countdown Showcase Hero
      • Heading
      • Countdown
      • Button
      • Logo
  • Footer Group
    • Demo & Settings Data
    • Footer
      • Menu
      • Text
      • Email signup
      • Social
    • Footer bottom
  • Section
    • Section on every page
    • Before/after image
    • Blog posts
      • [Block] Tags
      • [Block] Heading
      • [Block] Content
      • [Block] Author
      • [Block] Date
      • [Block] Button
    • Brand list
      • [Block] Brand
    • Carousel images
      • [Block] Slide
    • Category list
      • [Block] Category
    • Category slide
      • [Block] Slide
    • Collapsible collection
      • [Block] Collapsible row
    • Collection banner
      • [Block] Collection
    • Collection video
      • [Block] Video
    • Collection with bundle
      • [Block] Slide
    • Collection with product
      • [Block] Slide
    • Coutdown showcase hero
      • [Block] Heading
      • [Block] Countdown
      • [Block] Button
      • [Block] Logo
    • Collage
      • [Block] Image
      • [Block] Text
    • Collapsible content
      • [Block] Collapsible row
      • [Block] Caption
    • Collection list
      • [Block] Collection
    • Contact form
      • [Block] Heading
      • [Block] Caption
      • [Block] Text
      • [Block] Button
    • Custom tab
      • [Block] Custom tab
    • Custom liquid
    • Double banner
      • [Block] Heading
      • [Block] Button
    • Email signup
      • [Block] Heading
      • [Block] Email form
    • Featured blog post
    • Featured collection
      • [Block] Heading
      • [Block] Information
    • Featured collection tab
      • [Block] Tab
    • Featured images
      • [Block] Image
    • Featured product
      • [Block] Text
      • [Block] Title
      • [Block] Vendor
      • [Block] Price
      • [Block] Information
      • [Block] Inventory status
      • [Block] Countdown
      • [Block] Variant picker
      • [Block] Buy buttons
      • [Block] Description
      • [Block] Custom liquid
      • [Block] Product rating
      • [Block] Icon with text
    • Featured product tab
      • [Block] Tab
    • Icon with text
      • [Block] Icon with text item
    • Image banner
      • [Block] Heading
      • [Block] Text
      • [Block] Button
      • [Block] Link
      • [Block] Countdown
      • [Block] Thumbnail images
      • [Block] Image with text
    • Image gallery
      • [Block] Image
    • Image with collection
    • Image with text
      • [Block] Logo
      • [Block] Subheading
      • [Block] Heading
      • [Block] Text
      • [Block] Navigation
      • [Block] Link
    • Instagram
      • [Block] Image
    • Lookbook
      • [Block] Image
    • Map
    • Marquee
      • [Block] Marquee
    • Multicolumn
      • [Block] Column
      • [Block] Column: Text
    • Multiple options
      • [Block] Options
    • Outstanding reviews
      • [Block] Slide
    • Page
    • Product column
      • [Block] Collection
    • Quotes
      • [Block] Slide
      • [Block] Heading
    • Rich text
      • [Block] Heading
      • [Block] Caption
      • [Block] Text
      • [Block] Buttons
    • Slideshow
      • [Block] Slide
      • [Block] Lookbook
    • Slide banner
      • [Block] Slide
    • Spotlight products
    • Testimonial
      • [Block] Slide
    • Visual hightlight
      • [Block] Slide
    • Video
      • [Block] Heading
      • [Block] Text
      • [Block] Button
      • [Block] Countdown
    • Video with text
      • [Block] Caption
      • [Block] Heading
      • [Block] Text
      • [Block] Button
  • 🔥POPUP GROUP
    • Before you leave
    • Newsletter popup
      • Heading
      • Text
      • Newsletter
    • Recently purchased
    • Toolbar mobile
      • Search
      • Account
      • Cart
      • Wishlist
      • Link
  • Collection
    • Demo & Settings Data
    • Collection
      • Collection banner
      • Product grid
    • Storefront filtering
  • Collection List
    • Collection list page
  • Product
    • Demo & Settings Data
    • Product
    • Product information
      • Text
      • Title
      • Vendor
      • Price
      • Positive vibes bundle
      • Information
      • Inventory status
      • Countdown
      • Variant picker
      • Buy buttons
      • Description
      • Custom liquid
      • Collapsible row
      • Pop-up
      • Drawer
      • Product rating
      • Complementary products
      • Icon with text
      • Trust badge
      • Ask an expert
      • Size chart
    • Product recommendations
    • Pre-order product
    • Local pickup
  • Blogs
    • Demo & Settings Data
    • Blogs page
    • Blog posts
      • Side block: Products form collection
      • Side block: Collections list
      • Side block: Brands list
      • Side block: Posts list
      • Side block: Tags list
      • Side block: Image
      • Side block: Text
  • Article
    • Demo & Settings Data
    • Article page
    • Blog post
      • Featured image
      • Title
      • Rich text
      • Textarea
      • Image with text
      • Content
      • Lookbook
      • Quote
      • Tag
      • Side block: Products form collection
      • Side block: Collections list
      • Side block: Brands list
      • Side block: Posts list
      • Side block: Tags list
      • Side block: Image
      • Side block: Text
    • Comment
  • Cart
    • How to set up sections for Cart Page?
    • Items
  • Pages
    • How to create a page?
    • Default page
  • Other pages
    • Search page
    • Password page
      • Heading
      • Paragraph
      • Email form
    • 404 page
    • Knowledge base
      • Getting started in Shopify
      • Shopify help center
      • Shopify developers platform
    • FAQs
  • Theme Support
Powered by GitBook
On this page
  • Collection banner
  • Filtering
  • Toolbar
  • Product card
  • Section padding
  • Block Banner
  • Content
  • General
  1. Collection
  2. Collection

Product grid

Setting
Description

Products per row

Determines the maximum of products can be shown per row. Can be from 2 to 5, increasing arithmetically of 1.

Number of products per page

Determines the maximum of products can be shown per page. Can be from 8 to 24, increasing arithmetically of 1.

Number of columns on mobile

Select the number of columns to display on mobile devices from the dropdown menu:

  • 1 Column

  • 2 Column

Collection banner

Setting
Description

Show collection description

Show collection image

Breadcrumb size

Font size of text:

  • Default

  • XX-Small

  • X-Small

  • Small

  • Medium

  • Large

  • X-Large

  • XX-Large

  • XXX-Large

Breadcrumb bottom margin

Determines the margin area on the bottom of the breadcrumb. Can be from 0px to 100px, increasing arithmetically of 1px (pixel)

Heading size

Font size of text:

  • Default

  • XX-Small

  • X-Small

  • Small

  • Medium

  • Large

  • X-Large

  • XX-Large

  • XXX-Large

Heading bottom margin

Determines the margin area on the bottom of the heading. Can be from 0px to 100px, increasing arithmetically of 1px (pixel)

Text size

Font size of text:

  • Default

  • XX-Small

  • X-Small

  • Small

  • Medium

  • Large

  • X-Large

  • XX-Large

  • XXX-Large

Text bottom margin

Determines the margin area on the bottom of the text. Can be from 0px to 100px, increasing arithmetically of 1px (pixel)

Color scheme

Set the text color and background color for the section

Use custom color

Enable/disable checkbox

Text

Set the color for the text

Background

Set the background color for this section. (If a background gradient is set, the section's background will be set according to the background gradient setting)

Background gradient

Set the background gradient for this section

Bottom margin

Determines the margin area on the bottom of the block. Can be from 0px to 100px, increasing arithmetically of 1px (pixel)

Filtering

Setting
Description

Enable filtering

Subheading size

Font size of text:

  • Default

  • XX-Small

  • X-Small

  • Small

  • Medium

  • Large

  • X-Large

  • XX-Large

  • XXX-Large

Desktop filter layout

Select the filter layout on the desktop from the dropdown menu:

  • Horizontal

  • Horizontal (Plus)

  • Vertical

  • Drawer

(Drawer is the default mobile layout)

Layout style

Select the layout style for the section:

  • Special

  • Classic

Pagination type

Select the pagination type from the dropdown menu:

  • None

  • Dots

  • Progressbar

  • Fraction

  • Dashed

Input option name to show swatch style

Fill in the field with the same name of filter to show swatch style

Input option name to show pill style

Fill in the field with the same name of filter to show pill style

Color scheme

Set the text color and background color for the section

Toolbar

Setting
Description

Enable sorting

Select this checkbox to show/hide product sorting on the collection page

Sorting style

Select the sorting style for the block:

  • Default

  • 'Sort by' text inside

  • 'Sort by' text outside

Enable layout switcher

Select this checkbox to show/hide layout switcher

Product card

Setting
Description

Color scheme

Set the text color and background color for the section

Section padding

Setting
Description

Top padding

Determines the height of the top inner space of the section. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).

Bottom padding

Determines the height of the bottom inner space of the section. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).

Top padding on mobile

Determines the height of the top inner space of the section on mobile. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).

Bottom padding on mobile

Determines the height of the top inner space of the section on mobile. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).


Block Banner

Setting
Description

Banner position

Determines the position of banner. Can be from 1 to 25, increasing arithmetically of 1. (Banner position must be less than Number of products per page)

Image

Set up an image

Image ratio

Determines the ratio between the image's width and height. Select image ratio from the dropdown menu:

  • Adapt to image

  • Portrait

  • Square

Content

Setting
Description

Subheading

Add text to display as a block subheading (Leave the field blank to hide the subheading)

Typography for subheading

Select the Font Style from Font Heading or Font body. These two font families are specified in the Theme settings > Typography

Subheading size

Font size of text:

  • Default

  • XX-Small

  • X-Small

  • Small

  • Medium

  • Large

  • X-Large

  • XX-Large

  • XXX-Large

Heading

Add text to display as a block heading (Leave the field blank to hide the heading)

Heading size

Font size of text:

  • Default

  • XX-Small

  • X-Small

  • Small

  • Medium

  • Large

  • X-Large

  • XX-Large

  • XXX-Large

Button type

Select type of the button:

  • None: hide the button.

  • Link: show as a link.

  • Button: show as a button.

Button label

Add text to display as a button on the block (Leave the field blank to hide the link)

URL

Set the link, for example the customer service page

General

Setting
Description

Content inside image

Enable/disable checkbox

Content alignment

Set horizontal alignment for content inside section containers.

  • Left

  • Center

  • Right

Color scheme

Set the text color and background color for the block

Image overlay opacity on hover

Determines the image overlay opacity of the block. Can be from 0% to 100%, in 10% arithmetic increments

Background

Set the background color for the overlay

PreviousCollection bannerNextStorefront filtering

Last updated 10 months ago

Select this checkbox to show/hide collection description (Add a description by editing your collection. )

Select this checkbox to show/hide collection image (Add a image by editing your collection. )

Select this checkbox to show/hide product filtering on the collection page. Customize .

Learn more
Learn more
filters