Zelora is a premium, mobile-first Shopify Online Store 2.0 theme for fashion, lifestyle and accessories brands. This documentation covers every setting, section and page.
Pick from six header styles and a different header for inner pages.
Build a mega menu with promo images.
Show products with hotspots, shoppable videos and shoppable stories.
Control fonts and the size of every heading level.
Change the product card design everywhere from one place.
Design collection pages with banner layouts and sub-collection circles.
Customise the 404 page with GIF or Lottie animations.
Use a coming-soon page, wishlist, quick view and search dialog.
Tip
Press Ctrl + K (or ⌘ + K) anywhere to search the whole documentation, including every theme setting.
Getting started1 min read
Install the theme
Zelora is a premium, mobile-first Shopify Online Store 2.0 theme for fashion, lifestyle and accessories brands.
Upload the theme
In your Shopify admin go to Online Store → Themes.
Click Add theme → Upload zip file and choose the Zelora zip file.
Click Customize to preview the theme and start editing.
When you are happy, click Publish.
Check your preview
Before publishing, open the preview on a phone and on a desktop. Replace the demo images and text as you go. The launch checklist lists everything worth checking.
Tip
Keep a copy of the theme. Click Duplicate on the theme card before you make big changes.
Getting started1 min read
Using the theme editor
Everything in Zelora is edited in the theme editor: Online Store → Themes → Customize.
The left panel
Sections of the page you are on. Click one to change its settings, add blocks, reorder it or hide it with the eye icon.
Header and footer groups appear on every page.
Theme settings (paintbrush icon) hold global settings: colors, typography, layout, buttons, shapes, product cards, cart, animation, social media, logo, search and custom code.
Switching pages
Use the page selector at the top of the editor to move between Home, Product, Collection, Cart, Search, 404, blog and page templates.
Sections and blocks
A section is a full-width band of a page. Blocks are the items inside a section, such as slides, columns or questions. Most sections also accept app blocks.
Shared section settings
Most sections have these settings, which are not repeated on every page.
Setting
What it does
Color scheme
Chooses one of the color schemes from Theme settings → Colors, so light and dark sections can be mixed freely.
Heading size
Scales the headings in that section on top of the global heading sizes. 100% follows Theme settings → Typography.
Top and bottom padding
The space above and below the section.
Getting started1 min read
Set up menus
Menus live in Content → Menus. Zelora is designed around these menus.
Menu handle
Where it is used
Suggested links
main-menu
Header navigation
New in, Men, Women, Accessories, Sale
footer-shop
Footer Shop column
New arrivals, Men, Women, Accessories, Best sellers, Sale
footer-help
Footer Help column
FAQ, Shipping & returns, Size guide, Track your order, Contact
In the theme editor open the footer group and click a Menu block.
Choose the menu in the Menu setting.
For the bottom bar links, choose the menu in the footer’s Legal menu setting.
The header mega menus are set up in the header section. See Header.
Getting started1 min read
Create pages and policies
Create pages in Content → Pages → Add page. Choose a template in the Theme template box.
Page
Template
About us
page.about
Contact
page.contact
FAQ
page.faq
Shipping & returns
page.shipping-returns
Size guide
page.size-guide
Track your order
page.order-tracking
Wishlist
page.wishlist
Policy pages
Default page template
Policy pages
Create pages with the handles privacy-policy, terms-and-conditions, refund-policy, shipping-policy and cookie-policy so the footer links work, and paste your policy text. For checkout, also fill Settings → Policies.
Important
Sample policy text is generic and is not legal advice. Review it, add your business details and check the governing law before publishing.
Getting started1 min read
Launch checklist
Work through this list before you publish.
Upload your logo and favicon in Theme settings → Logo and favicon.
Choose your color schemes and fonts.
Build the header and footer menus.
Replace the demo images, text and products on the home page.
Create the policy and information pages.
Fill in the store SEO title and description in Online Store → Preferences.
Check the home, collection, product, cart and checkout on a phone.
Publish the theme.
Theme settings1 min read
Theme settings overview
Theme settings control the whole store. Open them with the paintbrush icon in the theme editor.
Color schemes define the background, text, buttons and accents of a section. Every section has a Color scheme setting, so light and dark sections can be mixed freely.
One product card design is used everywhere: collections, carousels, search and recommendations. Change it here and every card updates. Sections can override the gap between cards.
Add custom CSS to tweak the design without editing theme files.
Theme settings1 min read
Colors
Color schemes define the background, text, buttons and accents of a section. Every section has a Color scheme setting, so light and dark sections can be mixed freely.
Setting
What it does
color_schemes
Define the color schemes available to every section.
Default product tint
Used behind product images when a product has no tint. Set a per-product tint with the metafield custom.tint (type: Color).
Default #F3F3F1
Sale badge
Pick a color.
Default #B3261E
Tip
Create a dark scheme for the footer and promo sections and a light scheme for content sections, then pick them in each section’s Color scheme setting.
Theme settings3 min read
Typography
Full control of fonts: choose fonts, then fine-tune sizes for every heading level on desktop and mobile.
Heading one
Heading two
Heading three
Paragraph text uses the paragraph font.
How typography works
The Heading font is used for H1 to H3 and big display text. Turn on a separate font for H4 to H6 if you want one.
Every heading level from H1 to H6 has its own size on desktop and on mobile.
Heading weight, letter spacing, line height and letter case are shared by all headings.
Overall heading size scales every heading together.
Fonts come from the Shopify font library, so Shopify hosts them and they load fast.
Heading size in a section
Each section has a Heading size slider that scales its headings on top of the global sizes. The Hero also has a heading size and a subheading size on every slide.
Tip
Pair a distinctive heading font with a simple paragraph font, and keep body text between 15px and 18px on mobile.
One product card design is used everywhere: collections, carousels, search and recommendations. Change it here and every card updates. Sections can override the gap between cards.
Setting
What it does
Shape and layout
Card design
Shape, radius, ratio and the options below apply to every design. Quick add style applies to designs 1, 2, 3 and 13.
Options 1. Classic: details below · 2. Centered details · 3. Editorial: title left, price right · 4. Round add button beside details · 5. Full-width button below · 6. Add-to-cart bar slides up on hover · 7. Icon actions on hover · 8. Details on a glass bar over the image · 9. Magazine: big title over the image · 10. Boxed card with outline button · 11. Outlined card with button · 12. Price first, add pill at the side · 13. Minimal: details appear on hover · 14. Horizontal: image left, details right
Default classic
Mobile card design
Used on phones (under 750px). Sections can override it with their own Mobile card design.
Options Same as desktop · 1. Classic: details below · 2. Centered details · 3. Editorial: title left, price right · 4. Round add button beside details · 5. Full-width button below · 6. Add-to-cart bar slides up on hover · 7. Icon actions on hover · 8. Details on a glass bar over the image · 9. Magazine: big title over the image · 10. Boxed card with outline button · 11. Outlined card with button · 12. Price first, add pill at the side · 13. Minimal: details appear on hover · 14. Horizontal: image left, details right
Default inherit
Gap between product cards
Space between product cards in grids and sliders. 0 joins the cards together. Sections can set their own gap.
Adds breathing room inside the image area. Works well with packshots.
Range 0px to 48px
Default 0
Image fit
Choose one option.
Options Fill the frame · Show whole image
Default cover
Text alignment
Choose one option.
Options Left · Center
Default left
Title size
Choose one option.
Options Small · Medium · Large
Default md
Limit titles to two lines
Turn on or off.
Default On
Title limit: words
Cut product titles after this many words and add "...". 0 = no limit.
Range 0 to 10
Default 0
Title limit: characters
Also cut titles longer than this many characters. 0 = no limit. Keeps product cards evenly aligned.
Range 0 to 80
Default 0
Colour and motion
Show tint behind products
Turn on or off.
Default On
Blend product photos into the tint
Works best with photos on white backgrounds.
Default On
Hover effect
Choose one option.
Options Zoom image · Lift card · None
Default zoom
Show second image on hover
Turn on or off.
Default On
Buttons and details
Show quick add button
Turn on or off.
Default On
Quick add style
Choose one option.
Options Round icon on image · Full-width button under details
Default icon
Show wishlist button
Turn on or off.
Default On
Card buttons on mobile
Phones only. Desktop uses the add to cart and wishlist switches. Sections can override this.
Options Same as desktop · Add to cart + favourite · Add to cart only · Favourite only · No buttons
Default inherit
Show vendor
Turn on or off.
Default Off
Show rating
Turn on or off.
Default On
Show color swatches
Turn on or off.
Default On
Swatch size
Choose one option.
Options Small · Medium · Large
Default sm
Show currency code in prices
Turn on or off.
Default Off
Theme settings1 min read
Cart
Cart type and cart features.
Setting
What it does
Cart type
Choose one option.
Options Drawer · Page
Default drawer
Free shipping threshold
In your store currency, e.g. 999. Set to 0 to hide the progress bar.
Default 0
Show order note
Turn on or off.
Default On
Require terms agreement before checkout
Turn on or off.
Default Off
Enable wishlist
Turn on or off.
Default On
Theme settings1 min read
Animation
Page and scroll animations. Turn them off to disable motion store-wide.
Setting
What it does
Enable scroll reveals and hover motion
Turn on or off.
Default On
Show back-to-top button
Turn on or off.
Default On
Theme settings1 min read
Social media
Links to your social profiles. They are shown in the footer and on the contact page.
Setting
What it does
Instagram URL
Type the text.
Facebook URL
Type the text.
YouTube URL
Type the text.
TikTok URL
Type the text.
X (Twitter) URL
Type the text.
Pinterest URL
Type the text.
LinkedIn URL
Type the text.
WhatsApp URL
Type the text.
Snapchat URL
Type the text.
Theme settings1 min read
Logo and favicon
Your logos for light and dark backgrounds and the browser tab icon.
Setting
What it does
Logo
Upload an image or choose one from your library.
Logo for dark backgrounds and transparent header
Optional. Falls back to the main logo.
Logo width
Move the slider.
Range 50px to 300px
Default 130
Favicon
Square, at least 32 x 32 px.
Theme settings1 min read
Search
The layout and behaviour of the search dialog.
Setting
What it does
Search layout
How the search box opens when someone taps the search icon in the header.
Options Drop-down bar from the top (default) · Popup in the center · Spotlight: compact floating search box · Sidebar from the right · Sidebar from the left · Full-screen overlay
Default top
Enable predictive search
Turn on or off.
Default On
Popular searches
Comma separated.
Default New arrivals, Gifts, Best sellers
Theme settings1 min read
Custom code
Add custom CSS to tweak the design without editing theme files.
Setting
What it does
Custom CSS
Type the text.
Global sections1 min read
Announcement bar
A thin bar above the header for shipping offers, sales or notices. Supports several rotating messages with optional links.
Settings
Setting
What it does
Color scheme
Choose a color scheme from Theme settings → Colors.
Default scheme-2
Style
Choose one option.
Options Full-width bar · Floating pill · Floating glass pill
Default bar
Pill width
Choose one option.
Options Page width (matches the header) · Compact · Narrow, message only
Default page
Rotate every
Set to 0 to stop rotating.
Range 0s to 12s
Default 5
Uppercase messages
Turn on or off.
Default Off
Countdown (desktop)
Count down to
Format YYYY-MM-DD HH:MM, e.g. 2026-12-31 23:59. Leave empty to hide.
Time zone
Choose one option.
Options India (UTC+05:30) · UTC · UTC+01:00 · UAE (UTC+04:00) · Singapore (UTC+08:00) · US Eastern (UTC-05:00) · US Pacific (UTC-08:00)
Default +05:30
Extras
Show social icons (desktop)
Turn on or off.
Default Off
Show country and language selector (desktop)
Turn on or off.
Default Off
Allow visitors to close the bar
Turn on or off.
Default Off
Blocks
Click Add block inside the section to add these. Drag blocks to reorder them.
Announcement
Setting
What it does
Text
Type the text.
Default Free shipping on orders over ₹999
Link
Link to a page, collection, product, or paste any web address.
Global sections6 min read
Header
The site header with logo, navigation, mega menus, search, wishlist, account and cart. Zelora has six header styles, and inner pages can have a completely different header from the home page.
The header on the home page
Logo
Navigation menu
Search
Account
Wishlist
Cart
Header styles
Choose Header style: classic bar, glass bar, floating card, glass pill, solid pill or minimal. The desktop layout controls where the logo, menu and icons sit. Turn on Transparent over the home page hero to let the hero image show behind the header.
A different header on inner pages
A pill header looks best floating over the home page hero but is not always right for inner pages. Turn on Use a different header on inner pages and every inner page gets its own style, layout, height, colors, glass effect and sticky behaviour, while the home page keeps its pill.
Mega menu
Add Navigation item blocks to the header. Each one has a Type: Mega menu, Simple dropdown or Plain link. A mega menu has up to four columns (a title plus one link per line in the form Label | /collections/handle) and a top “Shop all” link. Add Mega menu promo blocks (image, caption and link) and set Menu item title to the nav item they belong to.
A mega menu opened on hover
Mobile menu
On phones the logo, search and cart stay visible and the menu opens in a slide-out drawer.
The mobile menu drawer
Header settings
Setting
What it does
Layout
Desktop layout
Choose one option.
Options Logo left, menu beside it · Logo left, menu centered · Logo centered, menu left · Logo right, icons left · Two rows, logo centered · Two rows, logo left
Default logo-left
Mobile logo position
Choose one option.
Options Center · Left
Default center
Menu
Used when the header has no "Menu item" blocks. Add Menu item blocks below to build a mega menu without a navigation menu.
Default main-menu
Menu text case
Choose one option.
Options As typed · UPPERCASE
Default none
Menu text size
Choose one option.
Options Small · Normal · Large
Default normal
Show round menu button on desktop
Opens the full menu drawer. Useful with a centered logo.
Default Off
Design
Header style
Choose one option.
Options Classic bar · Glass bar · Floating card · Glass pill · Solid pill · Minimal
Default bar
Floating and pill width
Choose one option.
Options Page width · Compact
Default page
Float over page content
Floating and pill styles sit on top of the first section, so it shows behind the header instead of a plain strip.
Default On
Glass opacity
Move the slider.
Range 20% to 95%
Default 70
Glass blur
Move the slider.
Range 0px to 40px
Default 18
Menu link style
Choose one option.
Options Underline · Pill highlight · Plain
Default underline
Height
Choose one option.
Options Compact · Normal · Tall
Default normal
Color scheme
Choose a color scheme from Theme settings → Colors.
Default scheme-1
Show bottom border
Turn on or off.
Default On
Inner pages header
The pill header looks best on the home page. Turn this on to give every other page its own header while the home page keeps the pill.
Use a different header on inner pages
Turn on or off.
Default Off
Desktop layout
Choose one option.
Options Logo left, menu beside it · Logo left, menu centered · Logo centered, menu left · Logo right, icons left · Two rows, logo centered · Two rows, logo left
Default logo-left
Header style
Choose one option.
Options Classic bar · Glass bar · Floating card · Glass pill · Solid pill · Minimal
Default bar
Floating and pill width
Choose one option.
Options Page width · Compact
Default page
Float over page content
Floating and pill styles sit on top of the first section, so it shows behind the header instead of a plain strip.
Default On
Glass opacity
Move the slider.
Range 20% to 95%
Default 70
Glass blur
Move the slider.
Range 0px to 40px
Default 18
Menu link style
Choose one option.
Options Underline · Pill highlight · Plain
Default underline
Height
Choose one option.
Options Compact · Normal · Tall
Default normal
Color scheme
Choose a color scheme from Theme settings → Colors.
Default scheme-1
Show bottom border
Turn on or off.
Default On
Sticky header
Choose one option.
Options Always visible · Show when scrolling up · Not sticky
Default always
Menu text case
Choose one option.
Options As typed · UPPERCASE
Default none
Menu text size
Choose one option.
Options Small · Normal · Large
Default normal
Behavior
Sticky header
Choose one option.
Options Always visible · Show when scrolling up · Not sticky
Default always
Transparent over the home page hero
Works best when the first section is a full-bleed image or video.
Default Off
Text color when transparent
Choose one option.
Options Light · Dark
Default light
Icons
Show search
Turn on or off.
Default On
Show account
Turn on or off.
Default On
Show wishlist
Turn on or off.
Default On
Wishlist page
Optional. Adds a View full wishlist button to the wishlist drawer. The heart always opens the drawer.
Blocks
Click Add block inside the section to add these. Drag blocks to reorder them.
Menu item up to 10
Setting
What it does
Label
Type the text.
Default Men
Link
Link to a page, collection, product, or paste any web address.
Type
Choose one option.
Options Mega menu · Simple dropdown (uses column 1 only) · Plain link
Default mega
Top link text
The "Shop all" line at the top of the mega menu. Leave blank for "Shop all <label>".
Type one link per line in each column as: Label | /collections/handle
Column 1
Column title
Type the text.
Links
Label | /collections/handle (one per line)
Column 2
Column title
Type the text.
Links
Label | /collections/handle (one per line)
Column 3
Column title
Type the text.
Links
Label | /collections/handle (one per line)
Column 4
Column title
Type the text.
Links
Label | /collections/handle (one per line)
Promo image 1
Image
Upload an image or choose one from your library.
Title
Type the text.
Link
Link to a page, collection, product, or paste any web address.
Promo image 2
Image
Upload an image or choose one from your library.
Title
Type the text.
Link
Link to a page, collection, product, or paste any web address.
Mega menu promo up to 8
Setting
What it does
Menu item title
Shows in the mega menu of the top-level item with this exact title.
Image
Upload an image or choose one from your library.
Caption
Type the text.
Link
Link to a page, collection, product, or paste any web address.
Global sections2 min read
Footer
A block-based footer: brand story, link columns, newsletter, contact details, text and images, legal links, payment icons and a country/language selector.
The footer
Typical setup
Use a Brand block, three Menu blocks (Shop, Help, Company) and a Newsletter block. Add or remove blocks and drag them to reorder.
Legal links
The bottom bar shows the menu chosen in Legal menu. If it is empty, Shopify’s own store policies are listed instead.
Footer settings
Setting
What it does
Color scheme
Choose a color scheme from Theme settings → Colors.
Default scheme-2
Wordmark
Show giant wordmark
Turn on or off.
Default On
Wordmark text
Leave empty to use the store name.
Wordmark size
Move the slider.
Range 60% to 140%
Default 100
Bottom bar
Extra copyright text
Type the text.
Show policy links
Turn on or off.
Default On
Legal menu
Links shown in the bottom bar. If empty, the store policies are used.
Show payment icons
Turn on or off.
Default On
Show country and language selector
Turn on or off.
Default On
Spacing
Top padding
Move the slider.
Range 0px to 160px
Default 80
Bottom padding
Move the slider.
Range 0px to 160px
Default 28
Blocks
Click Add block inside the section to add these. Drag blocks to reorder them.
Brand up to 1
Setting
What it does
Logo
Upload an image or choose one from your library.
Logo width
Move the slider.
Range 50px to 300px
Default 140
Heading
Type the text.
Default Made to be lived in.
Text
Add formatted text (bold, links, lists).
Show social icons
Turn on or off.
Default On
Width
Choose one option.
Options Narrow · Medium · Wide
Default large
Menu
Setting
What it does
Heading
Type the text.
Default Shop
Menu
Choose a menu from Content → Menus.
Default footer
Width
Choose one option.
Options Narrow · Medium · Wide
Default small
Newsletter up to 1
Setting
What it does
Heading
Type the text.
Default First to know
Text
Add formatted text (bold, links, lists).
Width
Choose one option.
Options Medium · Wide · Half
Default large
Contact details
Setting
What it does
Heading
Type the text.
Default Visit or call
Address
Type the text.
Phone
Type the text.
Email
Type the text.
Opening hours
Type the text.
Width
Choose one option.
Options Narrow · Medium · Wide
Default medium
Text
Setting
What it does
Heading
Type the text.
Default About
Text
Add formatted text (bold, links, lists).
Width
Choose one option.
Options Narrow · Medium · Wide
Default medium
Image
Setting
What it does
Image
Upload an image or choose one from your library.
Shape
Choose one option.
Options Doorway · Pill · Rounded
Default arch
Caption
Type the text.
Width
Choose one option.
Options Narrow · Medium · Wide
Default small
This section also accepts app blocks from installed Shopify apps.
Global sections1 min read
Search
The search icon in the header opens a dialog with live suggestions. It has six layouts: a drop-down bar, a centered popup, a spotlight box, a sidebar from the right, a sidebar from the left and a full-screen overlay.
Search dialog with live results
Where to change it
Open Theme settings → Search to choose the layout, turn predictive search on or off and add popular searches.
Search settings
Setting
What it does
Search layout
How the search box opens when someone taps the search icon in the header.
Options Drop-down bar from the top (default) · Popup in the center · Spotlight: compact floating search box · Sidebar from the right · Sidebar from the left · Full-screen overlay
Default top
Enable predictive search
Turn on or off.
Default On
Popular searches
Comma separated.
Default New arrivals, Gifts, Best sellers
Global sections1 min read
Wishlist
Shoppers tap the heart on a product card or product page to save an item. The header heart opens a drawer with their saved products and a link to the full wishlist page.
The wishlist drawer
Turn the wishlist on or off
Use Enable wishlist in Theme settings → Cart and Show wishlist in the header settings. The heart on the product card can be turned on or off in Theme settings → Product cards.
Resize the headings in this section. 100% follows Theme settings > Typography.
Range 50% to 200%
Default 100
Color scheme
Choose a color scheme from Theme settings → Colors.
Default scheme-1
Top padding
Move the slider.
Range 0px to 160px
Default 64
Bottom padding
Move the slider.
Range 0px to 160px
Default 64
Sections · Hero and banners2 min read
Countdown banner
A banner with a live countdown timer for a sale or launch.
Countdown banner on the demo store
Add the section
Open the theme editor and go to the page you want to edit.
Click Add section and choose Countdown banner.
Drag it to the position you want.
Section settings
Setting
What it does
Countdown
End date and time
Format: YYYY-MM-DD HH:MM (24-hour). Date alone also works.
Default 2026-12-31 23:59
Time zone of that date
Choose one option.
Options UTC-08:00 US Pacific · UTC-07:00 US Mountain · UTC-06:00 US Central · UTC-05:00 US Eastern · UTC-03:00 Brazil · UTC+00:00 London, UTC · UTC+01:00 Central Europe · UTC+02:00 Eastern Europe · UTC+03:00 Moscow, Riyadh · UTC+04:00 Dubai · UTC+05:00 Pakistan · UTC+05:30 India (IST) · UTC+05:45 Nepal · UTC+06:00 Bangladesh · UTC+07:00 Bangkok, Jakarta · UTC+08:00 Singapore, Beijing · UTC+09:00 Tokyo, Seoul · UTC+10:00 Sydney · UTC+12:00 Auckland
Default +05:30
When the countdown ends
Choose one option.
Options Show a message · Hide the banner
Default message
Message after it ends
Type the text.
Default This sale has ended. New offers are coming soon.
Content
Heading
Type the text.
Default The end-of-season sale closes soon
Text
Add formatted text (bold, links, lists).
Button label
Type the text.
Default Shop the sale
Button link
Link to a page, collection, product, or paste any web address.
Appearance
Background image
Upload an image or choose one from your library.
Overlay strength
A wash of the color scheme background over the image so text stays readable.
Range 0% to 90%
Default 45
Alignment
Choose one option.
Options Center · Left
Default center
Height
Choose one option.
Options Small · Medium · Large
Default m
Heading size
Resize the headings in this section. 100% follows Theme settings > Typography.
Range 50% to 200%
Default 100
Color scheme
Choose a color scheme from Theme settings → Colors.
Default scheme-1
Top padding
Move the slider.
Range 0px to 160px
Default 48
Bottom padding
Move the slider.
Range 0px to 160px
Default 48
Sections · Products and collections3 min read
Featured collection
A grid or carousel of products from one collection, with an optional promo tile.
Featured collection on the demo store
Add the section
Open the theme editor and go to the page you want to edit.
Click Add section and choose Featured collection.
Drag it to the position you want.
Section settings
Setting
What it does
Heading
Type the text.
Default Fresh from the studio
Subheading
Type the text.
Collection
Choose a collection.
Products to show
Move the slider.
Range 2 to 24
Default 8
Layout
Choose one option.
Options Slider · Grid
Default slider
Columns on desktop
Move the slider.
Range 2 to 6
Default 4
Columns on mobile
Choose one option.
Options 1 column · 2 columns
Default 2
Show slider arrows on desktop
Turn on or off.
Default On
Show slider arrows on mobile
Turn on or off.
Default On
Show "view all" link
Turn on or off.
Default On
View all label
Type the text.
Default View all
View all position
Choose one option.
Options Next to heading · Button below products
Default header
Card design
Overrides the card design from Theme settings for this section only.
Options Use theme setting · 1. Classic: details below · 2. Centered details · 3. Editorial: title left, price right · 4. Round add button beside details · 5. Full-width button below · 6. Add-to-cart bar slides up on hover · 7. Icon actions on hover · 8. Details on a glass bar over the image · 9. Magazine: big title over the image · 10. Boxed card with outline button · 11. Outlined card with button · 12. Price first, add pill at the side · 13. Minimal: details appear on hover · 14. Horizontal: image left, details right
Default theme
Mobile card design
Choose one option.
Options Same as desktop · Use theme setting · 1. Classic: details below · 2. Centered details · 3. Editorial: title left, price right · 4. Round add button beside details · 5. Full-width button below · 6. Add-to-cart bar slides up on hover · 7. Icon actions on hover · 8. Details on a glass bar over the image · 9. Magazine: big title over the image · 10. Boxed card with outline button · 11. Outlined card with button · 12. Price first, add pill at the side · 13. Minimal: details appear on hover · 14. Horizontal: image left, details right
Default inherit
Card buttons
Choose one option.
Options Theme default · Add to cart + favourite · Add to cart only · Favourite only · No buttons
Default inherit
Card buttons on mobile
Choose one option.
Options Same as desktop · Add to cart + favourite · Add to cart only · Favourite only · No buttons
Default inherit
Use custom gap between product cards
Off = follow the theme setting (Theme settings > Product cards).
Default Off
Gap between product cards
Used when "Use custom gap" is on. 0 joins the cards together.
Range 0px to 48px
Default 20
Heading size
Resize the headings in this section. 100% follows Theme settings > Typography.
Range 50% to 200%
Default 100
Color scheme
Choose a color scheme from Theme settings → Colors.
Default scheme-1
Top padding
Move the slider.
Range 0px to 160px
Default 64
Bottom padding
Move the slider.
Range 0px to 160px
Default 64
Blocks
Click Add block inside the section to add these. Drag blocks to reorder them.
Promo tile up to 1
Setting
What it does
Image
Upload an image or choose one from your library.
Heading
Type the text.
Default The gift edit
Text
Type the text.
Default Small things, wrapped well.
Button label
Type the text.
Default Shop gifts
Link
Link to a page, collection, product, or paste any web address.
Sections · Products and collections1 min read
Collection list
A grid or carousel of collection cards, including circle and tile styles.
Collection list on the demo store
Add the section
Open the theme editor and go to the page you want to edit.
Click Add section and choose Collection list.
Drag it to the position you want.
Section settings
Setting
What it does
Heading
Type the text.
Default Start with a collection
Subheading
Type the text.
Default Every collection has its own colour and its own mood.
Tile shape
Choose one option.
Options Arch · Rounded · Pill · Circle
Default arch
Layout
Choose one option.
Options Grid · Slider
Default grid
Columns on desktop
Move the slider.
Range 2 to 6
Default 4
Columns on mobile
Choose one option.
Options 1 column · 2 columns
Default 2
Show product count
Turn on or off.
Default Off
Show slider arrows on desktop
Turn on or off.
Default On
Show slider arrows on mobile
Turn on or off.
Default On
Link label
Type the text.
Default All collections
Link URL
Link to a page, collection, product, or paste any web address.
Heading size
Resize the headings in this section. 100% follows Theme settings > Typography.
Range 50% to 200%
Default 100
Color scheme
Choose a color scheme from Theme settings → Colors.
Default scheme-1
Top padding
Move the slider.
Range 0px to 160px
Default 64
Bottom padding
Move the slider.
Range 0px to 160px
Default 64
Blocks
Click Add block inside the section to add these. Drag blocks to reorder them.
Collection
Setting
What it does
Collection
Choose a collection.
Title override
Leave blank to use the collection title.
Image override
Defaults to the collection image, or its first product.
Sections · Products and collections3 min read
Collection tabs
A tabbed product carousel where each tab shows a different collection.
Collection tabs on the demo store
Add the section
Open the theme editor and go to the page you want to edit.
Click Add section and choose Collection tabs.
Drag it to the position you want.
Section settings
Setting
What it does
Heading
Type the text.
Default Shop by mood
Subheading
Type the text.
Default Flip between collections without leaving the page.
Products per tab
Move the slider.
Range 2 to 16
Default 8
Layout
Choose one option.
Options Slider · Grid
Default slider
Columns on desktop
Move the slider.
Range 2 to 6
Default 4
Columns on mobile
Choose one option.
Options 1 column · 2 columns
Default 2
Tab style
Choose one option.
Options Pills · Plain text
Default pills
Header button label
Shown to the right of the tabs. Leave blank to hide.
Header button link
Link to a page, collection, product, or paste any web address.
Show slider arrows on desktop
Turn on or off.
Default On
Show slider arrows on mobile
Turn on or off.
Default On
Arrow style (Slider layout)
Choose one option.
Options Circle, above each tab · Square, next to the header button
Default circle
Show "view all" link in each tab
Turn on or off.
Default On
View all label
Type the text.
Default View all
Card design
Overrides the card design from Theme settings for this section only.
Options Use theme setting · 1. Classic: details below · 2. Centered details · 3. Editorial: title left, price right · 4. Round add button beside details · 5. Full-width button below · 6. Add-to-cart bar slides up on hover · 7. Icon actions on hover · 8. Details on a glass bar over the image · 9. Magazine: big title over the image · 10. Boxed card with outline button · 11. Outlined card with button · 12. Price first, add pill at the side · 13. Minimal: details appear on hover · 14. Horizontal: image left, details right
Default theme
Mobile card design
Choose one option.
Options Same as desktop · Use theme setting · 1. Classic: details below · 2. Centered details · 3. Editorial: title left, price right · 4. Round add button beside details · 5. Full-width button below · 6. Add-to-cart bar slides up on hover · 7. Icon actions on hover · 8. Details on a glass bar over the image · 9. Magazine: big title over the image · 10. Boxed card with outline button · 11. Outlined card with button · 12. Price first, add pill at the side · 13. Minimal: details appear on hover · 14. Horizontal: image left, details right
Default inherit
Card buttons
Choose one option.
Options Theme default · Add to cart + favourite · Add to cart only · Favourite only · No buttons
Default inherit
Card buttons on mobile
Choose one option.
Options Same as desktop · Add to cart + favourite · Add to cart only · Favourite only · No buttons
Default inherit
Use custom gap between product cards
Off = follow the theme setting (Theme settings > Product cards).
Default Off
Gap between product cards
Used when "Use custom gap" is on. 0 joins the cards together.
Range 0px to 48px
Default 20
Heading size
Resize the headings in this section. 100% follows Theme settings > Typography.
Range 50% to 200%
Default 100
Color scheme
Choose a color scheme from Theme settings → Colors.
Default scheme-1
Top padding
Move the slider.
Range 0px to 160px
Default 64
Bottom padding
Move the slider.
Range 0px to 160px
Default 64
Blocks
Click Add block inside the section to add these. Drag blocks to reorder them.
Tab up to 5
Setting
What it does
Collection
Choose a collection.
Tab label
Leave blank to use the collection title.
Sections · Products and collections1 min read
Collection chips
A row of rounded collection shortcuts.
Add the section
Open the theme editor and go to the page you want to edit.
Chips with no collection or link are replaced by your store's collections (up to 12) until at least one chip has a collection or link.
Heading size
Resize the headings in this section. 100% follows Theme settings > Typography.
Range 50% to 200%
Default 100
Color scheme
Choose a color scheme from Theme settings → Colors.
Default scheme-1
Top padding
Move the slider.
Range 0px to 160px
Default 64
Bottom padding
Move the slider.
Range 0px to 160px
Default 64
Blocks
Click Add block inside the section to add these. Drag blocks to reorder them.
Chip
Setting
What it does
Collection
Choose a collection.
Custom label
Defaults to the collection title.
Custom image
Defaults to the collection image, then its first product image.
Link override
Defaults to the collection page.
This section also accepts app blocks from installed Shopify apps.
Sections · Products and collections3 min read
Product picks
Hand-picked products shown in a grid or carousel.
Add the section
Open the theme editor and go to the page you want to edit.
Click Add section and choose Product picks.
Drag it to the position you want.
Section settings
Setting
What it does
Heading
Type the text.
Default Hand-picked for you
Subheading
Type the text.
Layout
Choose one option.
Options Grid · Slider
Default grid
Columns on desktop
Move the slider.
Range 2 to 6
Default 4
Columns on mobile
Choose one option.
Options 1 column · 2 columns
Default 2
Show slider arrows on desktop
Turn on or off.
Default On
Show slider arrows on mobile
Turn on or off.
Default On
Link label
Type the text.
Link URL
Link to a page, collection, product, or paste any web address.
Card design
Overrides the card design from Theme settings for this section only.
Options Use theme setting · 1. Classic: details below · 2. Centered details · 3. Editorial: title left, price right · 4. Round add button beside details · 5. Full-width button below · 6. Add-to-cart bar slides up on hover · 7. Icon actions on hover · 8. Details on a glass bar over the image · 9. Magazine: big title over the image · 10. Boxed card with outline button · 11. Outlined card with button · 12. Price first, add pill at the side · 13. Minimal: details appear on hover · 14. Horizontal: image left, details right
Default theme
Mobile card design
Choose one option.
Options Same as desktop · Use theme setting · 1. Classic: details below · 2. Centered details · 3. Editorial: title left, price right · 4. Round add button beside details · 5. Full-width button below · 6. Add-to-cart bar slides up on hover · 7. Icon actions on hover · 8. Details on a glass bar over the image · 9. Magazine: big title over the image · 10. Boxed card with outline button · 11. Outlined card with button · 12. Price first, add pill at the side · 13. Minimal: details appear on hover · 14. Horizontal: image left, details right
Default inherit
Card buttons
Choose one option.
Options Theme default · Add to cart + favourite · Add to cart only · Favourite only · No buttons
Default inherit
Card buttons on mobile
Choose one option.
Options Same as desktop · Add to cart + favourite · Add to cart only · Favourite only · No buttons
Default inherit
Use custom gap between product cards
Off = follow the theme setting (Theme settings > Product cards).
Default Off
Gap between product cards
Used when "Use custom gap" is on. 0 joins the cards together.
Range 0px to 48px
Default 20
Heading size
Resize the headings in this section. 100% follows Theme settings > Typography.
Range 50% to 200%
Default 100
Color scheme
Choose a color scheme from Theme settings → Colors.
Default scheme-1
Top padding
Move the slider.
Range 0px to 160px
Default 64
Bottom padding
Move the slider.
Range 0px to 160px
Default 64
Blocks
Click Add block inside the section to add these. Drag blocks to reorder them.
Product
Setting
What it does
Product
Choose a product.
Sections · Products and collections1 min read
Product showcase
A large product look or outfit with linked products.
Add the section
Open the theme editor and go to the page you want to edit.
Click Add section and choose Product showcase.
Drag it to the position you want.
Section settings
Setting
What it does
Heading
Type the text.
Default Shop the look
Subheading
Add formatted text (bold, links, lists).
Cards per row on desktop
Move the slider.
Range 3 to 5
Default 4
Emphasize center card
Makes the middle card of the first view taller on desktop.
Default Off
Show arrows
Turn on or off.
Default On
Wide container
Turn on or off.
Default Off
Heading size
Resize the headings in this section. 100% follows Theme settings > Typography.
Range 50% to 200%
Default 100
Color scheme
Choose a color scheme from Theme settings → Colors.
Default scheme-1
Top padding
Move the slider.
Range 0px to 160px
Default 64
Bottom padding
Move the slider.
Range 0px to 160px
Default 64
Blocks
Click Add block inside the section to add these. Drag blocks to reorder them.
Look
Setting
What it does
Lifestyle image
Defaults to the product's second image, then its featured image.
Product
Choose a product.
This section also accepts app blocks from installed Shopify apps.
Sections · Products and collections2 min read
Product hotspots
One large image with clickable hotspots on the left and the tagged products listed on the right.
Product hotspots on the demo store
Add the section
Open the theme editor and go to the page you want to edit.
Click Add section and choose Product hotspots.
Drag it to the position you want.
Section settings
Setting
What it does
Layout
Choose one option.
Options Single image · Two images side by side · Image + product list
Default list
Heading
Type the text.
Default Get the look
Text
Add formatted text (bold, links, lists).
Default <p>Tap the dots to shop every piece.</p>
Heading alignment
Choose one option.
Options Left · Center
Default left
Product list heading
Image + product list layout only.
Default In this look
Images
Image 1
Upload an image or choose one from your library.
Image 1 on mobile
Optional. Dots keep the same positions.
Image 2
Two images layout only.
Image 2 on mobile
Upload an image or choose one from your library.
Image ratio
Choose one option.
Options Auto · 4:5 · 1:1 · 16:9
Default auto
Dots and cards
Dot style
Choose one option.
Options Pulse ring · Numbered · Plus icon · Minimal
Default pulse
Dot colour
Choose one option.
Options Light · Dark
Default light
Product card style
Choose one option.
Options Popover card · Glass card · Bottom sheet on mobile
Default popover
Show "Shop the look" button
Opens a drawer listing every product.
Default On
Appearance
Heading size
Resize the headings in this section. 100% follows Theme settings > Typography.
Range 50% to 200%
Default 100
Color scheme
Choose a color scheme from Theme settings → Colors.
Default scheme-1
Top padding
Move the slider.
Range 0px to 160px
Default 64
Bottom padding
Move the slider.
Range 0px to 160px
Default 64
Blocks
Click Add block inside the section to add these. Drag blocks to reorder them.
Hotspot
Setting
What it does
Product
Choose a product.
Horizontal position
Move the slider.
Range 0% to 100%
Default 50
Vertical position
Move the slider.
Range 0% to 100%
Default 50
Image
Two images layout only.
Options Image 1 · Image 2
Default 1
Custom label
Optional, e.g. "Overshirt". Shows beside the dot on hover.
This section also accepts app blocks from installed Shopify apps.
Sections · Products and collections1 min read
Shoppable lookbook
A shoppable lookbook image with product hotspots.
Add the section
Open the theme editor and go to the page you want to edit.
Click Add section and choose Shoppable lookbook.
Drag it to the position you want.
Section settings
Setting
What it does
Heading
Type the text.
Default Shop the outfit
Text
Add formatted text (bold, links, lists).
Heading alignment
Choose one option.
Options Left · Center
Default left
Image
Upload an image or choose one from your library.
Image shape
Product dots are positioned on the visible image.
Options Match the image · Portrait · Square · Landscape
Default natural
Corners
Choose one option.
Options Rounded · Arch · Square
Default rounded
Product list
Show product list beside the image
On phones the list sits under the image.
Default On
List position
Choose one option.
Options Right · Left
Default right
List heading
Type the text.
Default In this look
Appearance
Heading size
Resize the headings in this section. 100% follows Theme settings > Typography.
Range 50% to 200%
Default 100
Color scheme
Choose a color scheme from Theme settings → Colors.
Default scheme-1
Top padding
Move the slider.
Range 0px to 160px
Default 64
Bottom padding
Move the slider.
Range 0px to 160px
Default 64
Blocks
Click Add block inside the section to add these. Drag blocks to reorder them.
Product dot
Setting
What it does
Product
Choose a product.
Horizontal position
Move the slider.
Range 0% to 100%
Default 50
Vertical position
Move the slider.
Range 0% to 100%
Default 50
Sections · Products and collections3 min read
Image with products
An image beside a list of products.
Add the section
Open the theme editor and go to the page you want to edit.
Overrides the card design from Theme settings for this section only.
Options Use theme setting · 1. Classic: details below · 2. Centered details · 3. Editorial: title left, price right · 4. Round add button beside details · 5. Full-width button below · 6. Add-to-cart bar slides up on hover · 7. Icon actions on hover · 8. Details on a glass bar over the image · 9. Magazine: big title over the image · 10. Boxed card with outline button · 11. Outlined card with button · 12. Price first, add pill at the side · 13. Minimal: details appear on hover · 14. Horizontal: image left, details right
Default theme
Mobile card design
Choose one option.
Options Same as desktop · Use theme setting · 1. Classic: details below · 2. Centered details · 3. Editorial: title left, price right · 4. Round add button beside details · 5. Full-width button below · 6. Add-to-cart bar slides up on hover · 7. Icon actions on hover · 8. Details on a glass bar over the image · 9. Magazine: big title over the image · 10. Boxed card with outline button · 11. Outlined card with button · 12. Price first, add pill at the side · 13. Minimal: details appear on hover · 14. Horizontal: image left, details right
Default inherit
Card buttons
Choose one option.
Options Theme default · Add to cart + favourite · Add to cart only · Favourite only · No buttons
Default inherit
Card buttons on mobile
Choose one option.
Options Same as desktop · Add to cart + favourite · Add to cart only · Favourite only · No buttons
Default inherit
Use custom gap between product cards
Off = follow the theme setting (Theme settings > Product cards).
Default Off
Gap between product cards
Used when "Use custom gap" is on. 0 joins the cards together.
Range 0px to 48px
Default 20
Heading size
Resize the headings in this section. 100% follows Theme settings > Typography.
Range 50% to 200%
Default 100
Color scheme
Choose a color scheme from Theme settings → Colors.
Default scheme-1
Top padding
Move the slider.
Range 0px to 160px
Default 64
Bottom padding
Move the slider.
Range 0px to 160px
Default 64
Blocks
Click Add block inside the section to add these. Drag blocks to reorder them.
Link up to 4
Setting
What it does
Label
Type the text.
Default Shop the edit
Link
Link to a page, collection, product, or paste any web address.
Sections · Products and collections1 min read
Bundle and save
Bundles products together with a savings message.
Add the section
Open the theme editor and go to the page you want to edit.
Click Add section and choose Bundle and save.
Drag it to the position you want.
Section settings
Setting
What it does
Heading
Type the text.
Default Complete the look
Text
Add formatted text (bold, links, lists).
Default <p>Pick what you love and add it all in one go.</p>
Include the current product
Turn on or off.
Default On
Note under the total
For example, mention an automatic discount you have set up in Shopify.
Card shape
Choose one option.
Options Arch · Rounded · Square
Default arch
Blend photos into the tint
Turn on or off.
Default On
Heading size
Resize the headings in this section. 100% follows Theme settings > Typography.
Range 50% to 200%
Default 100
Color scheme
Choose a color scheme from Theme settings → Colors.
Default scheme-1
Top padding
Move the slider.
Range 0px to 160px
Default 64
Bottom padding
Move the slider.
Range 0px to 160px
Default 64
Blocks
Click Add block inside the section to add these. Drag blocks to reorder them.
Product up to 4
Setting
What it does
Product
Choose a product.
Selected by default
Turn on or off.
Default On
Sections · Products and collections3 min read
Product recommendations
Related or complementary products powered by Shopify recommendations.
Add the section
Open the theme editor and go to the page you want to edit.
Click Add section and choose Product recommendations.
Drag it to the position you want.
Section settings
Setting
What it does
Heading
Type the text.
Default You may also like
Text
Add formatted text (bold, links, lists).
Recommendation type
Complementary products are chosen in the Shopify Search & Discovery app.
Overrides the card design from Theme settings for this section only.
Options Use theme setting · 1. Classic: details below · 2. Centered details · 3. Editorial: title left, price right · 4. Round add button beside details · 5. Full-width button below · 6. Add-to-cart bar slides up on hover · 7. Icon actions on hover · 8. Details on a glass bar over the image · 9. Magazine: big title over the image · 10. Boxed card with outline button · 11. Outlined card with button · 12. Price first, add pill at the side · 13. Minimal: details appear on hover · 14. Horizontal: image left, details right
Default theme
Mobile card design
Choose one option.
Options Same as desktop · Use theme setting · 1. Classic: details below · 2. Centered details · 3. Editorial: title left, price right · 4. Round add button beside details · 5. Full-width button below · 6. Add-to-cart bar slides up on hover · 7. Icon actions on hover · 8. Details on a glass bar over the image · 9. Magazine: big title over the image · 10. Boxed card with outline button · 11. Outlined card with button · 12. Price first, add pill at the side · 13. Minimal: details appear on hover · 14. Horizontal: image left, details right
Default inherit
Card buttons
Choose one option.
Options Theme default · Add to cart + favourite · Add to cart only · Favourite only · No buttons
Default inherit
Card buttons on mobile
Choose one option.
Options Same as desktop · Add to cart + favourite · Add to cart only · Favourite only · No buttons
Default inherit
Use custom gap between product cards
Off = follow the theme setting (Theme settings > Product cards).
Default Off
Gap between product cards
Used when "Use custom gap" is on. 0 joins the cards together.
Range 0px to 48px
Default 20
Heading size
Resize the headings in this section. 100% follows Theme settings > Typography.
Range 50% to 200%
Default 100
Color scheme
Choose a color scheme from Theme settings → Colors.
Default scheme-1
Top padding
Move the slider.
Range 0px to 160px
Default 64
Bottom padding
Move the slider.
Range 0px to 160px
Default 64
Sections · Products and collections1 min read
Recently viewed
Shows products the shopper looked at recently. The list is stored in the shopper’s browser.
Add the section
Open the theme editor and go to the page you want to edit.
Click Add section and choose Recently viewed.
Drag it to the position you want.
Section settings
Setting
What it does
Heading
Type the text.
Default Pick up where you left off
Products to show
Move the slider.
Range 2 to 12
Default 6
Layout
Choose one option.
Options Slider · Grid
Default slider
Columns on desktop
Move the slider.
Range 2 to 6
Default 4
Columns on mobile
Choose one option.
Options 1 column · 2 columns
Default 2
Show slider arrows on desktop
Turn on or off.
Default On
Show slider arrows on mobile
Turn on or off.
Default On
Heading size
Resize the headings in this section. 100% follows Theme settings > Typography.
Range 50% to 200%
Default 100
Color scheme
Choose a color scheme from Theme settings → Colors.
Default scheme-1
Top padding
Move the slider.
Range 0px to 160px
Default 64
Bottom padding
Move the slider.
Range 0px to 160px
Default 64
Sections · Products and collections1 min read
Tint stage
A product stage whose background tints to match the selected product.
Add the section
Open the theme editor and go to the page you want to edit.
Click Add section and choose Tint stage.
Drag it to the position you want.
Section settings
Setting
What it does
Heading
Type the text.
Default Pick a colour, then the piece
Text
Add formatted text (bold, links, lists).
Scroll length per product
Percent of the screen height (desktop only).
Range 50% to 120%
Default 80
Show product switcher
Turn on or off.
Default On
Heading size
Resize the headings in this section. 100% follows Theme settings > Typography.
Range 50% to 200%
Default 100
Color scheme
Choose a color scheme from Theme settings → Colors.
Default scheme-1
Top padding
Move the slider.
Range 0px to 160px
Default 56
Bottom padding
Move the slider.
Range 0px to 160px
Default 0
Blocks
Click Add block inside the section to add these. Drag blocks to reorder them.
Product
Setting
What it does
Product
Its tint comes from the product's custom.tint metafield.
Custom headline
Optional. Replaces the product title as the big heading.
Tint colour
Used when the product has no tint of its own.
Always use this tint
Ignores the product's tint metafield.
Default Off
Sections · Products and collections1 min read
Card stack
Stacked cards that spread out as you scroll.
Add the section
Open the theme editor and go to the page you want to edit.
Click Add section and choose Card stack.
Drag it to the position you want.
Section settings
Setting
What it does
Heading
Type the text.
Default The edit, layer by layer
Text
Add text with bold or italic.
Heading alignment
Choose one option.
Options Left · Center
Default left
Cards
Image position
Choose one option.
Options Left · Right
Default left
Alternate image sides
Turn on or off.
Default On
Wide layout
Turn on or off.
Default Off
Sticky top offset
Space kept clear above the stacked cards, e.g. for a sticky header. Each card adds 24px.
Range 0px to 160px
Default 96
Heading size
Resize the headings in this section. 100% follows Theme settings > Typography.
Range 50% to 200%
Default 100
Color scheme
Choose a color scheme from Theme settings → Colors.
Default scheme-1
Top padding
Move the slider.
Range 0px to 160px
Default 64
Bottom padding
Move the slider.
Range 0px to 160px
Default 64
Blocks
Click Add block inside the section to add these. Drag blocks to reorder them.
Card up to 8
Setting
What it does
Image
Upload an image or choose one from your library.
Caption
Type the text.
Heading
Type the text.
Default Card heading
Text
Add formatted text (bold, links, lists).
Button label
Type the text.
Default Shop now
Button link
Link to a page, collection, product, or paste any web address.
Use a different color scheme
Turn on or off.
Default Off
Card color scheme
Choose a color scheme from Theme settings → Colors.
Default scheme-2
This section also accepts app blocks from installed Shopify apps.
Sections · Video and social2 min read
Shoppable videos
Vertical video cards that open in a pop-up with the tagged products on the right. Each video can have up to three products, with variant dropdowns, and an ambient glow on desktop.
Shoppable videos on the demo store
Add the section
Open the theme editor and go to the page you want to edit.
Click Add section and choose Shoppable videos.
Drag it to the position you want.
Tip
Pick the products for each video. With one product the pop-up shows its full details, price, variants and buy buttons. With several, it shows a list and opens the chosen product inside the pop-up.
Section settings
Setting
What it does
Heading
Type the text.
Default Shop the videos
Text
Add text with bold or italic.
Heading alignment
Choose one option.
Options Left · Center
Default left
Cards
Layout
Choose one option.
Options Slider · Grid
Default slider
Cards per row (desktop)
Move the slider.
Range 2 to 6
Default 4
Card style
Choose one option.
Options Rounded · Arch · Circle
Default rounded
Card shape
Ignored by the Circle style.
Options Tall 9:16 · Portrait 3:4 · Square
Default tall
Preview uploaded videos on hover
Turn on or off.
Default On
Popup
Popup style
On phones the products always sit under the video.
Options Split: video left, products right · Full screen video, products drawer
Default split
Heading size
Resize the headings in this section. 100% follows Theme settings > Typography.
Range 50% to 200%
Default 100
Color scheme
Choose a color scheme from Theme settings → Colors.
Default scheme-1
Top padding
Move the slider.
Range 0px to 160px
Default 48
Bottom padding
Move the slider.
Range 0px to 160px
Default 48
Blocks
Click Add block inside the section to add these. Drag blocks to reorder them.
Video up to 12
Setting
What it does
Title
Type the text.
Default Styled by our team
Uploaded video
Best for vertical video.
Video link
Used when no video is uploaded.
Featured image
Shown on the card and as the video poster. Required for YouTube and Vimeo links.
Products in this video
Add up to 3. One product opens its details straight away; several products show a list to choose from.
Product 1
Choose a product.
Product 2
Choose a product.
Product 3
Choose a product.
This section also accepts app blocks from installed Shopify apps.
Sections · Video and social2 min read
Shoppable stories
Story rings of any shape that open full-screen stories with tagged products. Supports 12 to 15 stories, a blurred backdrop and an ambient effect.
Shoppable stories on the demo store
Add the section
Open the theme editor and go to the page you want to edit.
Click Add section and choose Shoppable stories.
Drag it to the position you want.
Section settings
Setting
What it does
Heading
Type the text.
Default Stories
Text
Add text with bold or italic.
Alignment
Choose one option.
Options Left · Center
Default left
Rings
Avatar size
Move the slider.
Range 56px to 128px
Default 84
Ring style
Choose one option.
Options Gradient · Solid
Default gradient
Ring colour
Choose one option.
Options Accent · Text
Default accent
Viewer
Slide duration
Videos play to their end. Auto-advance is off for visitors who prefer reduced motion.
Range 3s to 10s
Default 5
Heading size
Resize the headings in this section. 100% follows Theme settings > Typography.
Range 50% to 200%
Default 100
Color scheme
Choose a color scheme from Theme settings → Colors.
Default scheme-1
Top padding
Move the slider.
Range 0px to 160px
Default 40
Bottom padding
Move the slider.
Range 0px to 160px
Default 40
Blocks
Click Add block inside the section to add these. Drag blocks to reorder them.
Story up to 20
Setting
What it does
Label
Type the text.
Default New in
Ring image
Falls back to the first slide.
Slides
Image 1
Upload an image or choose one from your library.
Image 2
Upload an image or choose one from your library.
Image 3
Upload an image or choose one from your library.
Video
Replaces the images when set.
Link sticker (Instagram style)
Sticker text
Leave blank for no sticker. For example: Shop the sale.
Sticker link
Any product, collection or page.
Sticker style
Choose one option.
Options White · Dark · Glass · Accent colour
Default white
Sticker horizontal position
Move the slider.
Range 10% to 90%
Default 50
Sticker vertical position
Move the slider.
Range 10% to 90%
Default 72
Sticker tilt
Move the slider.
Range -12° to 12°
Default -3
Product sticker (Instagram style)
Product sticker
Choose a product.
Product sticker horizontal position
Move the slider.
Range 10% to 90%
Default 50
Product sticker vertical position
Move the slider.
Range 10% to 90%
Default 55
Product sticker tilt
Move the slider.
Range -12° to 12°
Default 2
Bottom bar
Product
Shows a product bar with add to cart at the bottom of the story.
Link label
Shown when no product is selected.
Link
Link to a page, collection, product, or paste any web address.
This section also accepts app blocks from installed Shopify apps.
Sections · Video and social1 min read
Image gallery
An Instagram-style image gallery with an optional follow link.
Image gallery on the demo store
Add the section
Open the theme editor and go to the page you want to edit.
Click Add section and choose Image gallery.
Drag it to the position you want.
Section settings
Setting
What it does
Heading
Type the text.
Default Seen on you
Text
Add formatted text (bold, links, lists).
Default <p>Tag your photos and we will feature our favourites.</p>
Instagram handle
Without the @. Shows a follow button below the gallery.
Default zelora.wear
Follow link
Leave empty to link to the Instagram profile.
Layout
Layout
Choose one option.
Options Even grid · Mixed heights
Default masonry
Tile shape
Choose one option.
Options Arch (doorway) · Rounded · Circle and pill · Square
Default arch
Columns on desktop
Move the slider.
Range 2 to 6
Default 4
Gap
Move the slider.
Range 0px to 32px
Default 12
Heading size
Resize the headings in this section. 100% follows Theme settings > Typography.
Range 50% to 200%
Default 100
Color scheme
Choose a color scheme from Theme settings → Colors.
Default scheme-1
Top padding
Move the slider.
Range 0px to 160px
Default 64
Bottom padding
Move the slider.
Range 0px to 160px
Default 64
Blocks
Click Add block inside the section to add these. Drag blocks to reorder them.
Image
Setting
What it does
Image
Upload an image or choose one from your library.
Link
For example the Instagram post.
Caption
Type the text.
This section also accepts app blocks from installed Shopify apps.
Sections · Video and social1 min read
Scroll strip
An auto-scrolling or draggable strip of images.
Scroll strip on the demo store
Add the section
Open the theme editor and go to the page you want to edit.
Click Add section and choose Scroll strip.
Drag it to the position you want.
Section settings
Setting
What it does
Heading
Type the text.
Default From the studio
Text
Add formatted text (bold, links, lists).
Heading alignment
Choose one option.
Options Left · Center
Default left
Behavior
Choose one option.
Options Scrolls by itself · Drag or swipe
Default autoscroll
Auto-scroll speed
Move the slider.
Range 10px to 120px
Default 40
Auto-scroll direction
Choose one option.
Options Right to left · Left to right
Default left
Pause on hover
Turn on or off.
Default On
Image shape
Choose one option.
Options Arch · Pill · Circle · Rounded
Default arch
Image ratio
Choose one option.
Options Portrait · Tall · Square
Default portrait
Image size
Choose one option.
Options Small · Medium · Large
Default medium
Stagger images up and down
Turn on or off.
Default On
Heading size
Resize the headings in this section. 100% follows Theme settings > Typography.
Range 50% to 200%
Default 100
Color scheme
Choose a color scheme from Theme settings → Colors.
Default scheme-1
Top padding
Move the slider.
Range 0px to 160px
Default 64
Bottom padding
Move the slider.
Range 0px to 160px
Default 64
Blocks
Click Add block inside the section to add these. Drag blocks to reorder them.
Image
Setting
What it does
Image
Upload an image or choose one from your library.
Caption
Type the text.
Link
Link to a page, collection, product, or paste any web address.
Sections · Storytelling and trust1 min read
Rich text
A heading, text and buttons in a centred or aligned column.
Add the section
Open the theme editor and go to the page you want to edit.
Click Add section and choose Rich text.
Drag it to the position you want.
Section settings
Setting
What it does
Alignment
Choose one option.
Options Left · Center · Right
Default center
Width
Choose one option.
Options Narrow · Medium · Wide · Full
Default medium
Giant pull-quote style
Turns the heading into an oversized editorial quote.
Default Off
Heading size
Resize the headings in this section. 100% follows Theme settings > Typography.
Range 50% to 200%
Default 100
Color scheme
Choose a color scheme from Theme settings → Colors.
Default scheme-1
Top padding
Move the slider.
Range 0px to 160px
Default 72
Bottom padding
Move the slider.
Range 0px to 160px
Default 72
Blocks
Click Add block inside the section to add these. Drag blocks to reorder them.
Heading
Setting
What it does
Heading
Type the text.
Default We make fewer things, and make them properly.
Size
Choose one option.
Options Medium · Large · Giant
Default h1
Text
Setting
What it does
Text
Add formatted text (bold, links, lists).
Size
Choose one option.
Options Normal · Large
Default lead
Button
Setting
What it does
Label
Type the text.
Default Read our story
Link
Link to a page, collection, product, or paste any web address.
Style
Choose one option.
Options Solid · Outline · Text link
Default primary
This section also accepts app blocks from installed Shopify apps.
Sections · Storytelling and trust2 min read
Image with text
An image beside text blocks, with plate, tint and shape options.
Image with text on the demo store
Add the section
Open the theme editor and go to the page you want to edit.
Click Add section and choose Image with text.
Drag it to the position you want.
Section settings
Setting
What it does
Image
Upload an image or choose one from your library.
Image position
Choose one option.
Options Left · Right
Default left
Image shape
Choose one option.
Options Arch · Pill · Circle · Rounded
Default arch
Image ratio
Choose one option.
Options Portrait · Square · Landscape
Default portrait
Image width
Choose one option.
Options Small · Medium · Large
Default medium
Show tint shape behind the image
Turn on or off.
Default On
Tint
Colours the shape behind the image and the list icons. Defaults to the theme tint.
Content alignment
Choose one option.
Options Top · Center · Bottom
Default center
On mobile
Choose one option.
Options Image first · Text first
Default image_first
Heading size
Resize the headings in this section. 100% follows Theme settings > Typography.
Range 50% to 200%
Default 100
Color scheme
Choose a color scheme from Theme settings → Colors.
Default scheme-1
Top padding
Move the slider.
Range 0px to 160px
Default 64
Bottom padding
Move the slider.
Range 0px to 160px
Default 64
Blocks
Click Add block inside the section to add these. Drag blocks to reorder them.
This section also accepts app blocks from installed Shopify apps.
Sections · Utility and custom1 min read
Store information
Store locations, opening hours and contact details.
Add the section
Open the theme editor and go to the page you want to edit.
Click Add section and choose Store information.
Drag it to the position you want.
Section settings
Setting
What it does
Heading
Type the text.
Default Come and see it in person
Text
Add formatted text (bold, links, lists).
Heading size
Resize the headings in this section. 100% follows Theme settings > Typography.
Range 50% to 200%
Default 100
Color scheme
Choose a color scheme from Theme settings → Colors.
Default scheme-1
Top padding
Move the slider.
Range 0px to 160px
Default 72
Bottom padding
Move the slider.
Range 0px to 160px
Default 72
Blocks
Click Add block inside the section to add these. Drag blocks to reorder them.
Location
Setting
What it does
Name
Type the text.
Default Flagship studio
Address
Type the text.
Default 14 Pink City Lane, C-Scheme
Jaipur 302001, Rajasthan
Phone
Type the text.
Default +91 98765 43210
Email
Type the text.
Default hello@example.com
Opening hours
One row per line, day and time separated by a vertical bar: Mon - Sat | 10:00 am - 8:00 pm
Default Mon - Sat | 10:00 am - 8:00 pm
Sunday | 11:00 am - 6:00 pm
Note
Type the text.
Default Free parking behind the building.
Map
Google Maps embed link
In Google Maps choose Share, then Embed a map, and paste the link or the whole iframe code here.
Image instead of map
Upload an image or choose one from your library.
Directions link
Leave empty to build a Google Maps link from the address.
This section also accepts app blocks from installed Shopify apps.
Sections · Utility and custom1 min read
Order tracking
An order tracking page with carrier links.
Add the section
Open the theme editor and go to the page you want to edit.
Click Add section and choose Order tracking.
Drag it to the position you want.
Section settings
Setting
What it does
Heading
Type the text.
Default Track your order
Text
Add formatted text (bold, links, lists).
Carriers heading
Type the text.
Default Track with the carrier
Layout
Heading size
Resize the headings in this section. 100% follows Theme settings > Typography.
Range 50% to 200%
Default 100
Color scheme
Choose a color scheme from Theme settings → Colors.
Default scheme-1
Top padding
Move the slider.
Range 0px to 160px
Default 64
Bottom padding
Move the slider.
Range 0px to 160px
Default 96
Blocks
Click Add block inside the section to add these. Drag blocks to reorder them.
Carrier link
Setting
What it does
Carrier name
Type the text.
Default Delhivery
Tracking page
Link to a page, collection, product, or paste any web address.
Note
Type the text.
Default Use the tracking number from your shipping email
This section also accepts app blocks from installed Shopify apps.
Sections · Utility and custom1 min read
Custom section
Build your own section from theme blocks and app blocks.
Add the section
Open the theme editor and go to the page you want to edit.
Click Add section and choose Custom section.
Drag it to the position you want.
Section settings
Setting
What it does
Layout
Content width
Choose one option.
Options Narrow · Page · Wide · Full width
Default page
Minimum height
Choose one option.
Options Fit content · Small · Medium · Large · Full screen
Default auto
Vertical alignment
Visible when the section is taller than its content.
Options Top · Middle · Bottom
Default center
Horizontal alignment
Choose one option.
Options Left · Center · Right
Default left
Space between blocks
Move the slider.
Range 0px to 96px
Default 24
Inset rounded panel
Places the content on a rounded card inside the section.
Default Off
Background
Background image
Upload an image or choose one from your library.
Mobile background image
Optional. Shown on small screens.
Overlay opacity
Uses the color scheme background color.
Range 0% to 100%
Default 30
Colors and spacing
Heading size
Resize the headings in this section. 100% follows Theme settings > Typography.
Range 50% to 200%
Default 100
Color scheme
Choose a color scheme from Theme settings → Colors.
Default scheme-1
Top padding
Move the slider.
Range 0px to 160px
Default 64
Bottom padding
Move the slider.
Range 0px to 160px
Default 64
This section also accepts app blocks from installed Shopify apps.
Sections · Utility and custom1 min read
Custom Liquid
Paste your own Liquid, HTML or CSS.
Add the section
Open the theme editor and go to the page you want to edit.
Click Add section and choose Custom Liquid.
Drag it to the position you want.
Section settings
Setting
What it does
Liquid and HTML
Add app snippets or custom Liquid and HTML to build anything the other sections cannot.
Content width
Choose one option.
Options Page width · Wide · Narrow · Full bleed
Default page
Heading size
Resize the headings in this section. 100% follows Theme settings > Typography.
Range 50% to 200%
Default 100
Color scheme
Choose a color scheme from Theme settings → Colors.
Default scheme-1
Top padding
Move the slider.
Range 0px to 160px
Default 32
Bottom padding
Move the slider.
Range 0px to 160px
Default 32
Products and collections6 min read
Product page
The product page: gallery, title, price, variant picker, quantity, buy buttons and more.
Product page on the demo store
Product page layout
The buy box is built from blocks: title, rating, price, description, variant picker, quantity, buy buttons, inventory, delivery estimate, pickup availability, trust row, accordion, share, complementary products, custom Liquid, text, separator, notify me and gift card recipient. Add, remove and reorder them freely. App blocks can go anywhere in the buy box.
The product page on a phone
Section settings
Setting
What it does
Layout
Images position on desktop
Choose one option.
Options Images left, content right · Content left, images right
Default left
Images column width
Content takes the rest, e.g. 30% images and 70% content.
Range 30% to 70%
Default 55
Gap between columns
Move the slider.
Range 16px to 160px
Default 64
Content max width
Move the slider.
Range 360px to 900px
Default 580
Content vertical alignment
Choose one option.
Options Top · Center
Default top
Keep content in view while scrolling images
Best with the grid or single column gallery.
Default Off
Mobile order
Choose one option.
Options Images first · Content first
Default media
Gallery
Gallery layout
On mobile the gallery is always a swipeable carousel.
Options Thumbnails below · Thumbnails left · Thumbnails right · Large first image + 2-column grid · 2-column grid · Single column, all images · Carousel with dots
Default below
Media shape
Choose one option.
Options Arch · Rounded · Square
Default rounded
Media ratio
Choose one option.
Options Portrait (4:5) · Tall (3:4) · Square (1:1) · Landscape (5:4) · Match first image
Default 4/5
Image fit
Choose one option.
Options Fill the shape · Show whole image
Default cover
Blend photos into the tint
Works best with photos on white backgrounds.
Default On
Image zoom
Choose one option.
Options Lightbox on click · Hover zoom + lightbox · No zoom
Default lightbox
Keep gallery in view while scrolling (desktop)
Turn on or off.
Default On
Loop videos
Turn on or off.
Default Off
Thumbnails
Thumbnail shape
Choose one option.
Options Match gallery · Rounded · Square · Circle · Pill
Default match
Thumbnail ratio
Choose one option.
Options Portrait · Square · Tall
Default 4 / 5
Thumbnail size
Move the slider.
Range 44px to 120px
Default 68
Thumbnail spacing
Move the slider.
Range 4px to 24px
Default 10
Selected thumbnail style
Choose one option.
Options Border · Underline · Fade the others
Default border
On mobile show
Choose one option.
Options Dots · Thumbnails
Default dots
Show arrows on the main image
Turn on or off.
Default On
Page
Tint the whole section background
Washes the page with the product's tint colour.
Default On
Show breadcrumbs
Turn on or off.
Default On
Show sticky add-to-cart bar
Appears once the main buy button scrolls out of view.
Default On
Heading size
Resize the headings in this section. 100% follows Theme settings > Typography.
Range 50% to 200%
Default 100
Color scheme
Choose a color scheme from Theme settings → Colors.
Default scheme-1
Top padding
Move the slider.
Range 0px to 160px
Default 32
Bottom padding
Move the slider.
Range 0px to 160px
Default 64
Blocks
Click Add block inside the section to add these. Drag blocks to reorder them.
Title up to 1
Setting
What it does
Show vendor
Turn on or off.
Default On
Show SKU
Turn on or off.
Default Off
Title size
Choose one option.
Options Large · Medium
Default large
Rating up to 1
No settings.
Price up to 1
Setting
What it does
Show percentage saved
Turn on or off.
Default On
Show tax and shipping note
Turn on or off.
Default On
Description up to 1
Setting
What it does
Style
Choose one option.
Options Full description · Truncated with Read more
Default full
Visible lines when truncated
Move the slider.
Range 2 to 10
Default 4
Variant picker up to 1
Setting
What it does
Option style
Choose one option.
Options Buttons · Dropdown
Default buttons
Colour option style
Choose one option.
Options Round swatches · Buttons · Dropdown
Default swatches
Colour option names
Comma separated. Options with these names use the colour style. Swatches need a colour or image set on the option value.
Default Color,Colour
Size guide page
Opens in a modal next to the size option.
Size option name
Type the text.
Default Size
Quantity up to 1
No settings.
Buy buttons up to 1
Setting
What it does
Show dynamic checkout buttons
Uses the payment methods enabled in your payment settings.
Default On
Show wishlist heart
Turn on or off.
Default On
Inventory up to 1
Setting
What it does
Low stock threshold
Move the slider.
Range 1 to 50
Default 10
Show stock bar when low
Turn on or off.
Default On
Show "In stock" when stock is healthy
Turn on or off.
Default Off
Delivery estimate up to 1
Setting
What it does
Heading
Type the text.
Use order cut-off time
Turn on or off.
Default On
Order cut-off hour (24h, shop time)
Move the slider.
Range 1 to 23
Default 15
Minimum business days
Move the slider.
Range 0 to 20
Default 3
Maximum business days
Move the slider.
Range 0 to 30
Default 6
Working days
Choose one option.
Options Monday to Friday · Monday to Saturday · Every day
Default mon_sat
Extra line
Shown under the dates.
Default Free delivery on qualifying orders.
Pickup availability up to 1
No settings.
Trust row up to 2
Setting
What it does
Icon 1
Choose one option.
Options Truck · Return · Shield · Gift · Leaf · Lock · Globe · Clock · Store · Check · Sparkle · Credit card · Phone · Mail
Default truck
Text 1
Type the text.
Default Free shipping over the threshold
Icon 2
Choose one option.
Options Truck · Return · Shield · Gift · Leaf · Lock · Globe · Clock · Store · Check · Sparkle · Credit card · Phone · Mail
Default return
Text 2
Type the text.
Default Easy 7-day returns
Icon 3
Choose one option.
Options Truck · Return · Shield · Gift · Leaf · Lock · Globe · Clock · Store · Check · Sparkle · Credit card · Phone · Mail
Default shield
Text 3
Type the text.
Default Quality checked before dispatch
Icon 4
Choose one option.
Options Truck · Return · Shield · Gift · Leaf · Lock · Globe · Clock · Store · Check · Sparkle · Credit card · Phone · Mail
To select complementary products, add the Shopify Search & Discovery app.
Heading
Type the text.
Default Pairs well with
Products to show
Move the slider.
Range 1 to 6
Default 3
Custom Liquid
Setting
What it does
Custom Liquid
Paste Liquid, HTML or CSS code.
Text
Setting
What it does
Text
Add formatted text (bold, links, lists).
Default <p>Add a note, a promise or a care tip here.</p>
Style
Choose one option.
Options Body · Caption
Default body
Separator
No settings.
Back-in-stock request up to 1
No settings.
Gift card recipient up to 1
No settings.
This section also accepts app blocks from installed Shopify apps.
Products and collections1 min read
Product cards
The same product card is used on collection pages, carousels, search results and recommendations. Hover actions, swatches, badges and the add to cart button can each be turned on or off.
Show or hide the add to cart button, wishlist heart and quick view.
Show color swatches, including on mobile.
Set the gap between cards globally. Carousel and grid sections can override it.
Quick view
A pop-up product preview opened from the product cards, so shoppers can choose options and add to cart without leaving the page.
Setting
What it does
Used by the quick view popup. It is loaded automatically and cannot be added to pages.
Option style
Choose one option.
Options Buttons · Dropdown
Default buttons
Blend photos into the tint
Turn on or off.
Default On
Products and collections5 min read
Collection page
The collection page: banner, sub-collection tiles, filters, sorting and pagination.
Collection page on the demo storeThe product grid
Banner styles
Choose Banner style: full-width banner with the title on the image, full-screen banner (edge to edge, full height), split (text one side, image the other) or title left with a small image on the right. Add the collection image under Products → Collections.
Sub-collections
Show child collections above the products as circles, rounded squares or squares. Tile movement can be an auto-scrolling loop, a carousel with arrows and swipe, or a static row. Choose the parent collection and up to 12 sub-collections.
Filters and sorting
Filter layout can be a slide-in drawer or a sticky sidebar. Filters are powered by Shopify’s Search & Discovery app: set them up in Apps → Search & Discovery → Filters.
The filter drawerA collection on a phone
Section settings
Setting
What it does
Banner
Show breadcrumbs
Turn on or off.
Default On
Show collection image in an arch
Turn on or off.
Default On
Banner style
Choose one option.
Options Full-width banner with the title on the image · Full-screen banner (edge to edge, full height) · Split: text one side, image the other · Title left, small image on the right
Default full
Banner text alignment
Choose one option.
Options Left · Center
Default left
Banner image darkening
Helps white text stay readable. Full-width and full-screen banners only.
Range 0% to 80%
Default 50
Default banner image
Shown on every collection page that has no image of its own. A collection's own image (set in Products > Collections) always wins.
Show description
Turn on or off.
Default On
Show product count
Turn on or off.
Default On
Sub-collection chips
Pick a menu; its links appear as pills under the title.
Sub-collection tiles
Add one "Sub-collection group" block per parent collection (for example Men, Women, Accessories). The tiles only appear on that parent collection's page.
Tile shape
Choose one option.
Options Circle · Rounded square · Square
Default circle
Tile size
Move the slider.
Range 72px to 200px
Default 112
Tile movement
Choose one option.
Options Auto-scrolling loop · Carousel with arrows and swipe · Static row
Default marquee
Loop speed
Auto-scrolling loop only. Pauses when the pointer is over it.
Range 10px to 100px
Default 35
Carousel autoplay
0 turns autoplay off. Carousel only.
Range 0s to 8s
Default 4
Filtering and sorting
Enable filtering
Set up filters in Shopify's Search & Discovery app.
Overrides the card design from Theme settings for this section only.
Options Use theme setting · 1. Classic: details below · 2. Centered details · 3. Editorial: title left, price right · 4. Round add button beside details · 5. Full-width button below · 6. Add-to-cart bar slides up on hover · 7. Icon actions on hover · 8. Details on a glass bar over the image · 9. Magazine: big title over the image · 10. Boxed card with outline button · 11. Outlined card with button · 12. Price first, add pill at the side · 13. Minimal: details appear on hover · 14. Horizontal: image left, details right
Default theme
Mobile card design
Choose one option.
Options Same as desktop · Use theme setting · 1. Classic: details below · 2. Centered details · 3. Editorial: title left, price right · 4. Round add button beside details · 5. Full-width button below · 6. Add-to-cart bar slides up on hover · 7. Icon actions on hover · 8. Details on a glass bar over the image · 9. Magazine: big title over the image · 10. Boxed card with outline button · 11. Outlined card with button · 12. Price first, add pill at the side · 13. Minimal: details appear on hover · 14. Horizontal: image left, details right
Default inherit
Card buttons
Choose one option.
Options Theme default · Add to cart + favourite · Add to cart only · Favourite only · No buttons
Default inherit
Card buttons on mobile
Choose one option.
Options Same as desktop · Add to cart + favourite · Add to cart only · Favourite only · No buttons
Default inherit
Use custom gap between product cards
Off = follow the theme setting (Theme settings > Product cards).
Default Off
Gap between product cards
Used when "Use custom gap" is on. 0 joins the cards together.
Range 0px to 48px
Default 20
Heading size
Resize the headings in this section. 100% follows Theme settings > Typography.
Range 50% to 200%
Default 100
Color scheme
Choose a color scheme from Theme settings → Colors.
Default scheme-1
Top padding
Move the slider.
Range 0px to 160px
Default 32
Bottom padding
Move the slider.
Range 0px to 160px
Default 64
Blocks
Click Add block inside the section to add these. Drag blocks to reorder them.
Sub-collection group up to 10
Setting
What it does
Parent collection
The tiles show on this collection's page.
Sub-collection 1
Choose a collection.
Sub-collection 2
Choose a collection.
Sub-collection 3
Choose a collection.
Sub-collection 4
Choose a collection.
Sub-collection 5
Choose a collection.
Sub-collection 6
Choose a collection.
Sub-collection 7
Choose a collection.
Sub-collection 8
Choose a collection.
Sub-collection 9
Choose a collection.
Sub-collection 10
Choose a collection.
Sub-collection 11
Choose a collection.
Sub-collection 12
Choose a collection.
Products and collections1 min read
Collections list page
The page that lists all collections.
Collections list page on the demo store
Section settings
Setting
What it does
Heading
Leave blank to use the page title.
Text
Add formatted text (bold, links, lists).
Show breadcrumbs
Turn on or off.
Default On
Tile shape
Choose one option.
Options Arch · Rounded · Pill · Circle
Default arch
Show product count
Turn on or off.
Default On
Sort collections
Choose one option.
Options Store default · Alphabetically, A-Z · Alphabetically, Z-A · Product count, high to low · Product count, low to high · Recently updated
Default default
Collections per page
Move the slider.
Range 6 to 48
Default 24
Columns on desktop
Move the slider.
Range 2 to 5
Default 3
Columns on mobile
Choose one option.
Options 1 column · 2 columns
Default 2
Heading size
Resize the headings in this section. 100% follows Theme settings > Typography.
Range 50% to 200%
Default 100
Color scheme
Choose a color scheme from Theme settings → Colors.
Default scheme-1
Top padding
Move the slider.
Range 0px to 160px
Default 32
Bottom padding
Move the slider.
Range 0px to 160px
Default 80
Products and collections2 min read
Cart page
The full cart page.
Cart page on the demo store
Section settings
Setting
What it does
Show vendor
Turn on or off.
Default Off
Empty cart
Collections to suggest
Choose collections.
You may also like
Show product suggestions
Turn on or off.
Default On
Heading
Type the text.
Default You may also like
Collection
Defaults to all products. Items already in the cart are skipped.
Products to show
Move the slider.
Range 2 to 8
Default 4
Layout
Card design
Overrides the card design from Theme settings for this section only.
Options Use theme setting · 1. Classic: details below · 2. Centered details · 3. Editorial: title left, price right · 4. Round add button beside details · 5. Full-width button below · 6. Add-to-cart bar slides up on hover · 7. Icon actions on hover · 8. Details on a glass bar over the image · 9. Magazine: big title over the image · 10. Boxed card with outline button · 11. Outlined card with button · 12. Price first, add pill at the side · 13. Minimal: details appear on hover · 14. Horizontal: image left, details right
Default theme
Mobile card design
Choose one option.
Options Same as desktop · Use theme setting · 1. Classic: details below · 2. Centered details · 3. Editorial: title left, price right · 4. Round add button beside details · 5. Full-width button below · 6. Add-to-cart bar slides up on hover · 7. Icon actions on hover · 8. Details on a glass bar over the image · 9. Magazine: big title over the image · 10. Boxed card with outline button · 11. Outlined card with button · 12. Price first, add pill at the side · 13. Minimal: details appear on hover · 14. Horizontal: image left, details right
Default inherit
Card buttons
Choose one option.
Options Theme default · Add to cart + favourite · Add to cart only · Favourite only · No buttons
Default inherit
Card buttons on mobile
Choose one option.
Options Same as desktop · Add to cart + favourite · Add to cart only · Favourite only · No buttons
Default inherit
Use custom gap between product cards
Off = follow the theme setting (Theme settings > Product cards).
Default Off
Gap between product cards
Used when "Use custom gap" is on. 0 joins the cards together.
Range 0px to 48px
Default 20
Heading size
Resize the headings in this section. 100% follows Theme settings > Typography.
Range 50% to 200%
Default 100
Color scheme
Choose a color scheme from Theme settings → Colors.
Default scheme-1
Top padding
Move the slider.
Range 0px to 160px
Default 48
Bottom padding
Move the slider.
Range 0px to 160px
Default 80
This section also accepts app blocks from installed Shopify apps.
Products and collections2 min read
Search results page
The search results page.
Search results page on the demo store
Section settings
Setting
What it does
Results per page
Move the slider.
Range 8 to 48
Default 24
Product columns on desktop
Move the slider.
Range 2 to 4
Default 4
Product columns on mobile
Choose one option.
Options 1 column · 2 columns
Default 2
Filtering and sorting
Enable filtering
Set up filters in Shopify's Search & Discovery app.
Overrides the card design from Theme settings for this section only.
Options Use theme setting · 1. Classic: details below · 2. Centered details · 3. Editorial: title left, price right · 4. Round add button beside details · 5. Full-width button below · 6. Add-to-cart bar slides up on hover · 7. Icon actions on hover · 8. Details on a glass bar over the image · 9. Magazine: big title over the image · 10. Boxed card with outline button · 11. Outlined card with button · 12. Price first, add pill at the side · 13. Minimal: details appear on hover · 14. Horizontal: image left, details right
Default theme
Mobile card design
Choose one option.
Options Same as desktop · Use theme setting · 1. Classic: details below · 2. Centered details · 3. Editorial: title left, price right · 4. Round add button beside details · 5. Full-width button below · 6. Add-to-cart bar slides up on hover · 7. Icon actions on hover · 8. Details on a glass bar over the image · 9. Magazine: big title over the image · 10. Boxed card with outline button · 11. Outlined card with button · 12. Price first, add pill at the side · 13. Minimal: details appear on hover · 14. Horizontal: image left, details right
Default inherit
Card buttons
Choose one option.
Options Theme default · Add to cart + favourite · Add to cart only · Favourite only · No buttons
Default inherit
Card buttons on mobile
Choose one option.
Options Same as desktop · Add to cart + favourite · Add to cart only · Favourite only · No buttons
Default inherit
Use custom gap between product cards
Off = follow the theme setting (Theme settings > Product cards).
Default Off
Gap between product cards
Used when "Use custom gap" is on. 0 joins the cards together.
Range 0px to 48px
Default 20
Heading size
Resize the headings in this section. 100% follows Theme settings > Typography.
Range 50% to 200%
Default 100
Color scheme
Choose a color scheme from Theme settings → Colors.
Default scheme-1
Top padding
Move the slider.
Range 0px to 160px
Default 32
Bottom padding
Move the slider.
Range 0px to 160px
Default 80
Other pages3 min read
404 page
The block-based 404 page. Supports a big number, image, GIF, Lottie animation, search, buttons and product lists.
404 page on the demo store
Section settings
Setting
What it does
Layout
Content alignment
Choose one option.
Options Center · Left
Default center
Content width
Choose one option.
Options Narrow · Medium · Wide
Default medium
Page height
Choose one option.
Options Fit the content · Tall · Very tall · Full screen
Default auto
Animate the blocks in
Turn on or off.
Default On
Background
Background image
Text turns white over a background image.
Image darkening
Move the slider.
Range 0% to 90%
Default 40
Appearance
Heading size
Resize the headings in this section. 100% follows Theme settings > Typography.
Range 50% to 200%
Default 100
Color scheme
Choose a color scheme from Theme settings → Colors.
Default scheme-1
Top padding
Move the slider.
Range 0px to 160px
Default 64
Bottom padding
Move the slider.
Range 0px to 160px
Default 96
Blocks
Click Add block inside the section to add these. Drag blocks to reorder them.
Big number
Setting
What it does
Text
Type the text.
Default 404
Style
Choose one option.
Options Outline · Solid · Gradient · Door (4 + door + 4)
Default outline
Size
Choose one option.
Options Small · Medium · Large · Extra large
Default m
Door image
Door style only.
Heading
Setting
What it does
Heading
Type the text.
Default This page could not be found
Size
Choose one option.
Options Display · H1 · H2 · H3 · H4
Default h2
Text
Setting
What it does
Text
Add formatted text (bold, links, lists).
Image / GIF / video
Setting
What it does
Image or GIF
Animated GIFs keep moving. Upload them in Content > Files first if needed.
Video
Plays muted on a loop. Replaces the image.
Maximum width
Move the slider.
Range 120px to 900px
Default 420
Shape ratio
Choose one option.
Options Natural · Square · Portrait · Landscape
Default auto
Corners
Choose one option.
Options Square · Rounded · Circle · Arch
Default rounded
Lottie animation
Setting
What it does
Upload your .json Lottie file in Content > Files, copy its link and paste it below.
Lottie JSON link
Type the text.
Accessible description
Type the text.
Default Animation
Maximum width
Move the slider.
Range 120px to 800px
Default 360
Speed
Choose one option.
Options Slow · Normal · Fast · Very fast
Default 1
Loop
Turn on or off.
Default On
Autoplay
Turn on or off.
Default On
Search box
Setting
What it does
Placeholder
Leave blank for the default.
Button
Setting
What it does
Label
Type the text.
Default Back to home
Link
Link to a page, collection, product, or paste any web address.
Style
Choose one option.
Options Primary · Secondary · Text link
Default primary
Link chip
Setting
What it does
Label
Type the text.
Default Shop all
Link
Link to a page, collection, product, or paste any web address.
Collection tiles
Setting
What it does
Heading
Type the text.
Default Popular collections
Tile shape
Choose one option.
Options Circle · Rounded · Arch · Pill
Default circle
Collection 1
Choose a collection.
Collection 2
Choose a collection.
Collection 3
Choose a collection.
Collection 4
Choose a collection.
Collection 5
Choose a collection.
Collection 6
Choose a collection.
Products
Setting
What it does
Heading
Type the text.
Default You might like
Collection
Choose a collection.
Products to show
Move the slider.
Range 2 to 8
Default 4
Custom Liquid / HTML
Setting
What it does
Liquid or HTML
Add your own markup, embeds or scripts.
Spacer
Setting
What it does
Height
Move the slider.
Range 8px to 200px
Default 32
Divider
No settings.
This section also accepts app blocks from installed Shopify apps.
Other pages2 min read
Coming soon
The coming-soon page shown when the storefront password is on. Three layouts.
Coming soon on the demo storeThe coming-soon page on a phone
Note
Some stores (for example development stores) show Shopify’s own plain password page instead. This screenshot is the theme’s password template rendered on its own.
Section settings
Setting
What it does
Layout
Layout
Choose one option.
Options Text with an image on the side · Centered text · Full screen with a background image or video
Default split
Text alignment
Choose one option.
Options Left · Center
Default left
Content
Show the logo above the heading
Turn on or off.
Default Off
Small label
Type the text.
Default Private preview
Heading
Type the text.
Default Opening soon
Text
Leave empty to use the password page message from your store preferences.
Launch date
Optional countdown. Use the format 2026-12-01T10:00:00+05:30.
Images
Side image
Split layout, large screens only.
Background image
Full-screen layout.
Background video
Full-screen layout. Plays muted on a loop and replaces the image.
Background darkening
Move the slider.
Range 0% to 90%
Default 45
Email signup
Show email signup
Turn on or off.
Default On
Signup heading
Type the text.
Default Be the first through the door
Button label
Type the text.
Default Notify me
More
Show an "Enter with password" button
Turn on or off.
Default On
Show social links
Turn on or off.
Default On
Appearance
Heading size
Resize the headings in this section. 100% follows Theme settings > Typography.
Range 50% to 200%
Default 100
Color scheme
Choose a color scheme from Theme settings → Colors.
Default scheme-1
Top padding
Move the slider.
Range 0px to 160px
Default 48
Bottom padding
Move the slider.
Range 0px to 160px
Default 96
Blocks
Click Add block inside the section to add these. Drag blocks to reorder them.
Highlight
Setting
What it does
Icon
Choose one option.
Options None · Sparkle · Delivery · Gift · Leaf · Heart · Star · Clock · Shield
Default sparkle
Text
Type the text.
Default Early access for subscribers
Other pages1 min read
Blog posts
The blog listing page.
Section settings
Setting
What it does
Intro text
Add formatted text (bold, links, lists).
Feature the first article
Turn on or off.
Default On
Show tag filters
Turn on or off.
Default On
Articles per page
Move the slider.
Range 4 to 24
Default 9
Columns
Choose one option.
Options 2 · 3
Default 3
Article cards
Image shape
Choose one option.
Options Arch · Rounded
Default arch
Show excerpt
Turn on or off.
Default On
Show date
Turn on or off.
Default On
Show author
Turn on or off.
Default On
Show reading time
Turn on or off.
Default On
Layout
Heading size
Resize the headings in this section. 100% follows Theme settings > Typography.
Range 50% to 200%
Default 100
Color scheme
Choose a color scheme from Theme settings → Colors.
Default scheme-1
Top padding
Move the slider.
Range 0px to 160px
Default 64
Bottom padding
Move the slider.
Range 0px to 160px
Default 96
Other pages1 min read
Article
A single blog article.
Section settings
Setting
What it does
Featured image
Choose one option.
Options Arch beside the title · Wide banner below the title
Default arch
Show breadcrumbs
Turn on or off.
Default On
Show tags
Turn on or off.
Default On
Show author
Turn on or off.
Default On
Show date
Turn on or off.
Default On
Show share buttons
Turn on or off.
Default On
Related articles
Show related articles
Turn on or off.
Default On
Heading
Type the text.
Default Keep reading
Articles to show
Move the slider.
Range 2 to 6
Default 3
Layout
Heading size
Resize the headings in this section. 100% follows Theme settings > Typography.
Range 50% to 200%
Default 100
Color scheme
Choose a color scheme from Theme settings → Colors.
Default scheme-1
Top padding
Move the slider.
Range 0px to 160px
Default 48
Bottom padding
Move the slider.
Range 0px to 160px
Default 96
Other pages1 min read
Page content
Generic page content with text, table and button blocks.
Section settings
Setting
What it does
Show page title
Turn on or off.
Default On
Show breadcrumbs
Turn on or off.
Default Off
Title alignment
Choose one option.
Options Left · Center
Default left
Hero image
Image
Upload an image or choose one from your library.
Image style
Choose one option.
Options Arch beside the title · Wide banner below the title
Default arch
Layout
Heading size
Resize the headings in this section. 100% follows Theme settings > Typography.
Range 50% to 200%
Default 100
Color scheme
Choose a color scheme from Theme settings → Colors.
Default scheme-1
Top padding
Move the slider.
Range 0px to 160px
Default 64
Bottom padding
Move the slider.
Range 0px to 160px
Default 80
Blocks
Click Add block inside the section to add these. Drag blocks to reorder them.
Text
Setting
What it does
Heading
Type the text.
Text
Add formatted text (bold, links, lists).
Table
Setting
What it does
Heading
Type the text.
Intro text
Type the text.
Table data
One row per line, cells separated by |. The first line becomes the header row.
Footnote
Type the text.
Button
Setting
What it does
Label
Type the text.
Default Contact us
Link
Link to a page, collection, product, or paste any web address.
Style
Choose one option.
Options Solid · Outline
Default primary
This section also accepts app blocks from installed Shopify apps.
Other pages1 min read
Wishlist page
The wishlist page that shows saved products.
Wishlist page on the demo store
Section settings
Setting
What it does
Heading
Leave blank to use the page title.
Show share link button
Turn on or off.
Default On
Show "clear all" button
Turn on or off.
Default On
Columns on desktop
Move the slider.
Range 2 to 4
Default 4
Columns on mobile
Choose one option.
Options 1 column · 2 columns
Default 2
Heading size
Resize the headings in this section. 100% follows Theme settings > Typography.
Range 50% to 200%
Default 100
Color scheme
Choose a color scheme from Theme settings → Colors.
Default scheme-1
Top padding
Move the slider.
Range 0px to 160px
Default 32
Bottom padding
Move the slider.
Range 0px to 160px
Default 80
Other pages1 min read
About us page
The page.about template tells your brand story with a banner, manifesto, story, marquee, stats, process timeline, studio strip, values, testimonials and a newsletter. Every section and block can be edited, reordered or replaced.
The About us page
Create the page
Go to Content → Pages → Add page and title it About us.
Set Theme template to page.about.
Edit the page in the theme editor.
Other pages1 min read
Contact page
A contact form with store info, social links and an optional map.
The contact page
Create the page
Add a page titled Contact with template page.contact.
Set the contact details, social links and map address in the Contact form section.
Two ready-made information pages: page.size-guide and page.shipping-returns. Create a page, choose the template and edit the text and tables in the editor.
The size guide pageThe shipping and returns page
Other pages1 min read
Order tracking page
An order tracking page with carrier links.
The order tracking page
Create a page with template page.order-tracking. Settings are listed under Order tracking.
Other pages3 min read
Customer account pages
Customer account pages are styled to match the theme. They are used when classic customer accounts are enabled in Settings → Customer accounts.
Important
With new customer accounts (the default on new stores) the sign-in, account and order pages are hosted by Shopify and do not use these theme pages. Only the header account link and the account menu come from the theme.
Login
The login page.
Setting
What it does
Show guest checkout note
Turn on or off.
Default On
Image panel
Image
Shown in an arch next to the form on large screens.
Panel heading
Type the text.
Default Your things, your pace.
Panel text
Type the text.
Default Track orders, save addresses and keep a wishlist close.
Layout
Heading size
Resize the headings in this section. 100% follows Theme settings > Typography.
Range 50% to 200%
Default 100
Color scheme
Choose a color scheme from Theme settings → Colors.
Default scheme-1
Top padding
Move the slider.
Range 0px to 160px
Default 56
Bottom padding
Move the slider.
Range 0px to 160px
Default 96
Register
The create account page.
Setting
What it does
Show email marketing opt-in
Turn on or off.
Default On
Image panel
Image
Upload an image or choose one from your library.
Panel heading
Type the text.
Default Come on in.
Panel text
Type the text.
Layout
Heading size
Resize the headings in this section. 100% follows Theme settings > Typography.
Range 50% to 200%
Default 100
Color scheme
Choose a color scheme from Theme settings → Colors.
Default scheme-1
Top padding
Move the slider.
Range 0px to 160px
Default 56
Bottom padding
Move the slider.
Range 0px to 160px
Default 96
Account
The customer account overview.
Setting
What it does
Orders per page
Move the slider.
Range 5 to 30
Default 10
Layout
Heading size
Resize the headings in this section. 100% follows Theme settings > Typography.
Range 50% to 200%
Default 100
Color scheme
Choose a color scheme from Theme settings → Colors.
Default scheme-1
Top padding
Move the slider.
Range 0px to 160px
Default 56
Bottom padding
Move the slider.
Range 0px to 160px
Default 96
Addresses
The customer address book.
Setting
What it does
Addresses per page
Move the slider.
Range 2 to 20
Default 6
Layout
Heading size
Resize the headings in this section. 100% follows Theme settings > Typography.
Range 50% to 200%
Default 100
Color scheme
Choose a color scheme from Theme settings → Colors.
Default scheme-1
Top padding
Move the slider.
Range 0px to 160px
Default 48
Bottom padding
Move the slider.
Range 0px to 160px
Default 96
Order details
The order details page.
Setting
What it does
Heading size
Resize the headings in this section. 100% follows Theme settings > Typography.
Range 50% to 200%
Default 100
Color scheme
Choose a color scheme from Theme settings → Colors.
Default scheme-1
Top padding
Move the slider.
Range 0px to 160px
Default 48
Bottom padding
Move the slider.
Range 0px to 160px
Default 96
Activate account
The activate account page.
Setting
What it does
Image panel
Image
Upload an image or choose one from your library.
Panel heading
Type the text.
Default Almost there.
Panel text
Type the text.
Default Choose a password and your account is ready.
Layout
Heading size
Resize the headings in this section. 100% follows Theme settings > Typography.
Range 50% to 200%
Default 100
Color scheme
Choose a color scheme from Theme settings → Colors.
Default scheme-1
Top padding
Move the slider.
Range 0px to 160px
Default 56
Bottom padding
Move the slider.
Range 0px to 160px
Default 96
Reset password
The reset password page.
Setting
What it does
Image panel
Image
Upload an image or choose one from your library.
Panel heading
Type the text.
Default A fresh start.
Panel text
Type the text.
Default Pick something memorable and you are back in.
Layout
Heading size
Resize the headings in this section. 100% follows Theme settings > Typography.
Range 50% to 200%
Default 100
Color scheme
Choose a color scheme from Theme settings → Colors.
Default scheme-1
Top padding
Move the slider.
Range 0px to 160px
Default 56
Bottom padding
Move the slider.
Range 0px to 160px
Default 96
FAQs1 min read
Troubleshooting
My footer links lead to a 404 page
Create the pages in Content → Pages with the handles used by the footer menus, for example privacy-policy.
The header menu has no dropdowns
Add a Navigation item block in the header, set its Label to match the top-level menu item and choose Mega menu or Simple dropdown.
Filters do not show on collection pages
Install and configure Shopify’s Search & Discovery app and add filters.
Colors look different from the demo
Check Theme settings → Colors and the color scheme chosen in the section.
A section is not showing
It may be hidden (eye icon), or have no content, for example no products or collection selected.
A pop-up or age gate does not appear in the editor
Turn on Preview in the theme editor in that section.
Product cards show no colors
Color swatches need a product option named Color (or Colour). Turn on swatches in Theme settings → Product cards.
FAQs1 min read
Image size guidelines
Use compressed images that are large enough for the biggest place they appear. Shopify serves smaller sizes to phones automatically.
Use
Recommended size
Hero and full-width banners
2000 px wide or more, landscape. Add a separate mobile image (portrait) for the hero.
Product images
2000 × 2000 px or larger, all the same ratio.
Collection images
1600 px wide or more.
Shoppable stories and videos
Vertical 9:16, for example 1080 × 1920 px.
Logo
PNG with a transparent background, at least 600 px wide.
Favicon
PNG, 32 × 32 px or larger, square.
Tip
Keep each image under about 500 KB where possible. Add alt text to images in Shopify Files.
FAQs1 min read
Accessibility and SEO
Accessibility
A skip-to-content link, visible focus states and keyboard support for menus, dialogs and sliders.
Dialogs close with Esc.
Animation respects the visitor’s reduce-motion setting.
Add alt text to images.
SEO
Structured data for products, FAQ and articles, Open Graph tags and canonical links are built in.
Set the store SEO title and description in Online Store → Preferences, and per product, collection and page in Search engine listing.
Languages
Storefront text lives in the theme’s language file. Use Edit default theme content in the editor to change it, and Shopify’s Translate & Adapt for other languages.
Theme settingsColors, typography, buttons, product cards and more.
HeaderStyles, mega menu and inner-page header.
FooterBlocks, menus and legal links.
SectionsEvery section you can add.
Product pageGallery, buy box and blocks.TypographyFonts and heading sizes.
