Snuggle documentation

Section layouts in each style

These are the layout options each style starts with:

• Hero

  Snuggle: Split. Cugo: Overlay. Juniper opens its home page with a Slideshow in the Split with soft shapes layout instead.

• Category tiles

  Snuggle: Tiles. Cugo: Rounded squares. Juniper: Large circles, followed by a second row in Small circles.

• Value props

  Snuggle: Row with dividers. Cugo: Cards on a panel. Juniper: Row with dividers under the slideshow, and Centered icons further down.

• Featured collections

  Snuggle and Cugo: Row with arrows, with the heading on the left. Juniper: Grid, centered, with the button under the products.

• Promo banner

  Snuggle: Card with perks. Cugo: Bold card. Juniper: Split image and text.

• Collection tiles

  Snuggle: Label bar. Cugo: Tinted panels. The Juniper home page doesn't use this section.

• Testimonials

  Snuggle: Cards. Cugo: Quote bubbles. Juniper: Spotlight.

• Featured blog

  Snuggle: Picture beside text. Cugo: Large first post. Juniper: Picture above text.

• Header and footer

  Juniper: the Inline header, a Centered top bar, the Email signup band in Band with image, and the Compact footer. Cugo: the Bar header and the Columns footer.

• Product page

  Gallery layout: Thumbnails on the side (Snuggle), Stage (Cugo), or Thumbnails below (Juniper). Benefit cards: Strip with dividers, Separate cards, or Centered with rings.

• Collection page

  Banner style: Split (Snuggle), Overlay (Cugo), or Centered (Juniper). Filter layout: Sidebar, Sidebar cards, or Horizontal.

• Cart page

  Trust items position: In the order summary (Snuggle), Under the cart items (Cugo), or Under the cart, centered (Juniper).

• Landing pages

  Listicle numbers: Outline (Snuggle), Tile (Cugo), or Circle with Stacked cards (Juniper). Founder portrait: Arch, Rounded, or Circle.

Match a style by hand

To give an existing copy of Snuggle the look of another style without adding the theme again:

1. 01In Theme settings > Design, choose the Design style.
2. 02In Theme settings > Colors, edit your five color schemes, the highlight colors, and the secondary accent. See Color schemes and fonts for each style's palette.
3. 03In Theme settings > Typography, choose the style's fonts, and set Theme settings > Corners.
4. 04Open each section and choose the layout options listed in Section layouts in each style.

Menus

Create and edit menus in your Shopify admin under Content > Menus (or Online Store > Navigation). Snuggle supports three menu levels:

• Top-level items appear in the header.
• Nested items open in a dropdown, or become columns, tiles, or tabs in a mega menu.
• Items nested one level deeper appear under their parent in the dropdown, the mega menu column, or the tab.

Header

The header has three layouts. Choose one in Layout:

• StackedThe logo on the left, a wide pill search field in the middle, and the account and cart on the right. The menu sits centered in a row below. The default layout.
• BarA wide search field next to the logo, with the icons on the right and the menu in a row below. Used by the Cugo style.
• InlineThe logo, the menu, and the icons in one row, with search behind an icon that opens a panel. Used by the Juniper style.
• Header settings

  • Menu — the menu shown in the header.
  • Highlighted link — type the title or handle of one top-level menu item, for example a Sale collection. It is shown in the accent color.
  • Customer account menu — appears in the account menu for signed-in customers.
  • Layout — Stacked, Bar, or Inline.
  • Color scheme — the colors of the main row.
  • Menu row color scheme — the colors of the menu row, its dropdowns, the search results, and the mobile menu. Not shown for the Inline layout, which uses the header's color scheme for all of them.
  • Sticky header — Always, When scrolling up, or Off. See Sticky header.
  • Search placeholder — the text inside the search field.
  • Show account label — shows a label next to the account icon on large screens. Not shown for the Inline layout.
  • Dropdown style, Open dropdowns on, and Dropdown animation — see Dropdowns and mega menus.
  • Show country selector and Show language selector — show the selectors in the mobile menu. See Country and language selectors.

Dropdowns and mega menus

Every top-level menu item with nested links opens a dropdown. The header's Dropdown style sets the look of all of them, and a Mega menu block gives one menu item its own style. Every style except Simple list is a full-width panel under the header. Choose a style for each menu:

• Simple list

  One column of links in a compact card under the menu item, with deeper links indented. Best for short menus, such as About or Help.

• Columns

  Each nested link becomes a column heading with its own links beneath. Nested links without links of their own are grouped under an “All” heading. Best for large catalogs with clear groups, such as Dog > Food, Toys, and Beds.

• Columns with images

  The columns, plus up to three image cards on the right, each with an Image, a Heading, and a Link. A card appears when it has an image or a heading. The default style. Good for pointing to new arrivals or a guide next to the links.

• Image tiles

  Every nested link as a square image tile with its name, four to six per row, and a Shop all tile at the end. Best when shoppers recognize your categories from a photo.

• Round images

  The nested links as round images in a centered row, like category chips, closed by a Shop all circle. Best for a short Shop by pet or Shop by need menu.

• Featured products

  The columns, plus two to four small product cards (image, title, and price) from a Collection that you choose. Best for showing best sellers or new arrivals in the menu.

• Sidebar tabs

  The nested links as a list on the left. Hovering or focusing one shows its own links, a Shop all link, and an image on the right. Best for catalogs with many second-level categories.

• Promo card

  The columns, plus a large promotional card with an Image, an Eyebrow, a Heading, a Text, and a button, on its own color scheme. Best for a seasonal offer or a subscription pitch.

Give a menu item its own dropdown style

1. 01In your menu, create a top-level item, for example “Shop,” with nested items.
2. 02In the theme editor, select Header and click Add block > Mega menu.
3. 03In Menu item, type the title of that top-level menu item exactly as it appears in your menu. Capitalization doesn't matter.
4. 04Choose a Dropdown style and a Panel color scheme.
5. 05Fill in the settings of that style: the image cards for Columns with images, the images for Image tiles, Round images, and Sidebar tabs, the Collection and Products to show (2 to 4) for Featured products, or the card content and Color scheme for Promo card.

Dropdown behavior

• Open dropdowns on: Hover or Click. Touch screens and keyboards always open dropdowns with a tap or a key press.
• Dropdown animation: None, Fade, or Slide down. Visitors who turn on reduced motion don't see the animation.
• In Sidebar tabs, a tap on a touch screen shows a tab's links first and follows the link on the second tap. Keyboard users move through each tab and its links in order.

Sticky header

• Always: the header stays at the top of the screen while visitors scroll, condensed to its main row.
• When scrolling up: the header moves out of the way while visitors scroll down and comes back as soon as they scroll up. This is the default.
• Off: the header scrolls away with the page.

Top bar

The Top bar sits above the header on every page and shows short announcements, such as shipping offers. It can only be added to the header group.

• Top bar settings

  • Layout — Row shows the announcements on the left and a tagline on the right on large screens. Centered shows the announcements in the middle.
  • Color scheme — the colors of the bar.
  • Tagline — a short line on the right of the bar on large screens. Row layout only.
  • Rotate announcements — on small screens, one announcement shows at a time and rotates when there is more than one. Visitors who reduce motion see the first one.
  • Change every — how long each announcement is shown, from 3 to 10 seconds.
  • Show country selector and Show language selector — selectors appear in the top bar on large screens when your store sells in more than one country or language.
  • Announcement (block) — an Icon (for example Truck, Returns, Shield, Paw, or Gift), a Text, and an optional Link. Add up to three announcements.

Country and language selectors

Selectors appear when your store sells in more than one country or language. Set up countries in Settings > Markets and languages in Settings > Languages. You can show the selectors in three places:

• Header: in the mobile menu.
• Top bar: on large screens.
• Footer: at the bottom of every page.

Customer account icon

When customer accounts are turned on in Settings > Customer accounts, the header shows an account icon. It uses Shopify's account component, which lets customers sign in and, once signed in, opens a menu with links to their orders and profile. To add your own links to that menu, choose a menu in the header's Customer account menu setting. See Customer accounts.

Footer

• Footer settings

  • Color scheme — the colors of the footer.
  • Footer logo — leave blank to use the logo from theme settings.
  • Layout — Columns places your blocks side by side. Compact gives the payment icons their own column, as in the Juniper style.
  • Show decorations — leaves, soft shapes, or paw prints, depending on the design style.
  • Legal menu — links in the bottom row. Leave blank to show your store policies instead.
  • Show policy links — links to the policies you add in Settings > Policies.
  • Show payment icons — shows the icons of the payment methods your store accepts.
  • Show Follow on Shop button — lets customers follow your store in the Shop app. Shop Pay must be enabled.
  • Show country selector and Show language selector — selectors appear when your store sells in more than one country or language.
  • Top padding and Bottom padding — space above and below the footer content.
• Footer blocks

  • Brand — your logo, a short Text about your brand, and social media icons (Show social media icons). Set the logo size with Logo width. One per footer.
  • Menu — a column of links from the selected Menu. Leave Heading blank to use the menu name. Up to three.
  • Text — a Heading and Text, for example contact details.
  • Email signup — a newsletter form with a Heading, a Text, and a Button label. Each signup adds a subscriber to your customer list. One per footer.
  • Custom Liquid — your own Liquid or HTML code.
  • Apps — app blocks from apps that you install.

Email signup band

Each style places an Email signup section in the footer group, above the footer. You can also add it to any page. Each signup adds a subscriber to your customer list.

• Email signup settings

  • Layout — Card: a centered card. Band with image: a full-width band with a cut-out photo that stands on its bottom edge, as in the Juniper style. Split panel: a rounded panel in the color scheme, with the text beside the form.
  • Image — for Band with image. Use a cut-out photo with a transparent background (PNG).
  • Let the image rise above the band — lets the photo reach above the top edge of the band.
  • Show decorations — leaf corners on the band, soft shapes on the panel. Not used by Card.
  • Eyebrow, Heading, Text, and Button label.
  • Alignment — Left or Center, for Card.
  • Color scheme, Top padding, and Bottom padding.

Banners and offers

• HeroA large opening banner with a heading, text, up to two buttons, a trust line, and an image.

  • Layout — Split: text beside an image that bleeds to the edge of the screen (Snuggle). Overlay: text on a rounded image over a shade of the color scheme (Cugo); pick a bold scheme for a strong banner. Split with soft shapes: text beside the image, with soft shapes behind it.
  • Picture shape — Circle or Soft edge, for Split with soft shapes.
  • Eyebrow, Heading, and Text — set a phrase of the heading in italics to highlight it.
  • Heading level — H1 or H2. Use H1 only once per page, for the main heading.
  • Button label, Button link, Second button label, and Second button link.
  • Trust line — a short line under the buttons, for example your guarantee. Leave empty to hide it.
  • Image — a transparent PNG of your products works best. 2400 x 1200 px recommended.
  • Mobile image — replaces the image on small screens.
  • Handwritten note — a short line in the handwritten font over the image. Leave empty to hide it.
  • Show sticker and Sticker text — up to three short words in a round sticker on the image.
  • Minimum height — from 400 to 800 px.
• SlideshowUp to eight slides, each with its own image, text, button, and color scheme.

  • Layout — Full width: the image fills the slide and the text sits on it. Rounded banner: each slide is a rounded card. Split with soft shapes: text beside the image with soft shapes, as on the Juniper home page. Banner and split color each whole slide with the slide's color scheme.
  • Minimum height — Small, Medium, or Large.
  • Show arrows and Show dots — navigation controls.
  • Auto-rotate slides — off by default. Rotation pauses while a visitor hovers or focuses the slideshow, and stays off for visitors who prefer reduced motion.
  • Change slides every — from 3 to 10 seconds.
  • Slide (block) — Image, Mobile image, Eyebrow, Heading, Text, Button label, Button link, and Color scheme. Alignment (Left, Center, or Right) and Text position (Top, Middle, or Bottom) apply to the Full width layout.
• Promo bannerA card that promotes an offer or a program, such as subscriptions, with up to three perks.

  • Layout — Card with perks: image, text, and a column of perks on a soft panel (Snuggle). Bold card: a strong colored card with shapes (Cugo); it works best with a bold Panel color scheme. Split image and text: a large image beside the text (Juniper).
  • Image, Heading, Show icon before the heading, and Text.
  • Button label, Button link, Second button label, and Second button link.
  • Color scheme and Panel color scheme — the colors of the section and of the card.
  • Perk (block) — an Icon, a Title, and a Text. Add up to three. Only list perks your store really offers.
• CountdownA live timer that counts down to a real deadline, such as the end of a sale or a launch. The timer is the same for every visitor and never restarts.

  • Eyebrow, Heading, Text, Button label, and Button link.
  • End date — use the format YYYY-MM-DD, for example 2026-12-31.
  • End time — 24-hour format HH:MM, for example 18:00.
  • Time zone — the UTC offset of the end time. Use the offset in effect on the end date, so take daylight saving time into account. See How do I set the countdown time zone?
  • Show days, Show hours, Show minutes, and Show seconds — the units of the timer.
  • When the timer ends — Hide the section, or Show a message (set the Message).
  • Layout — Side by side or Stacked.
  • Panel color scheme — the colors of the timer panel.
  • Only count down to a deadline that really applies. A timer that restarts for each visitor misleads customers, so Snuggle doesn't offer one.
• Rich textAn Eyebrow, a Heading, a Text, and an optional button (Button label and Button link), with Alignment (Left or Center) and Style: Plain, or Panel for a rounded panel in the color scheme.
• Email signupA newsletter form. See Email signup band.

Collections and products

• Category tilesA row of collection shortcuts with images and labels. Add up to eight Collection blocks.

  • Heading, Subtitle, Link label, and Link.
  • Style — Tiles: an image, the label, and a chevron (Snuggle). Rounded squares: images on a tinted background (Cugo). Large circles: big round images with the label beneath, like Shop by pet (Juniper). Small circles: a compact row of round images. With circles, the heading is centered and the link shows as a button under the row.
  • Mobile layout — Swipe slider or Grid.
  • Collection (block) — a Collection, and an optional Label and Image (leave them blank to use the collection's own). Link replaces the link to the collection.
• Collection tilesLarge image tiles that link to collections, for example Shop by need. Add up to eight Tile blocks.

  • Heading, Subtitle, Link label, and Link.
  • Style — Label bar: a bar with the label and an arrow across the bottom of each tile (Snuggle). Tinted panels: images on tinted panels (Cugo). Cards with captions: image cards with the label below.
  • Mobile layout — Swipe slider or Grid.
  • Tile (block) — a Collection, a Link (replaces the link to the collection), an Image (leave blank to use the collection image), and a Label (leave blank to use the collection title).
• Collection listA grid of collection cards. Add up to 12 Collection blocks.

  • Heading, Subtitle, Link label, and Link — leave Link blank to link to your collections page.
  • Alignment — Left or Center.
  • Card style — Tile, Rounded square, or Circle.
  • Columns on desktop — from 2 to 6.
  • Mobile layout — Swipe slider or Grid, with Columns on mobile (1 or 2) for the grid.
  • Show product count — shows the number of products in each collection.
  • Collection (block) — a Collection, and an optional Label and Image.
• Featured collectionsProduct cards from one or more collections. With more than one Collection block, shoppers switch between them with tabs. Add up to eight.

  • Heading, Subtitle, Link label, and Link — leave Link blank to link to the first collection.
  • Header layout — Heading left, link right; or Centered, button under the products.
  • Layout — Row with arrows or Grid.
  • Products to show — from 3 to 12.
  • Columns on desktop — from 2 to 5.
  • Arrow position — On the sides or Below the slider, for Row with arrows.
  • Show the new badge for and Best seller collection — see Product badges.
  • Collection (block) — a Collection and an optional Tab label. Leave the label blank to use the collection title.
• Featured productShows one product with its images and buy buttons, so customers can buy without leaving the page.

  • Product, Media position (Left or Right), Media ratio (Adapt to media, Square, Portrait, or Landscape), and Image fit (Fill or Fit).
  • Blocks — Title, Product rating, Vendor, Price, Text, Description, Inventory status, Product facts, Variant picker, Purchase options, Buy buttons, Trust row, Pop-up guide, Custom Liquid, and app blocks. These work like the product page blocks.
• Image hotspotsShop the look: a lifestyle image with a dot on each product. Add up to six Hotspot blocks.

  • Eyebrow, Heading, and Text.
  • Image and Image ratio — Adapt to media, Portrait, Square, Landscape, or Wide.
  • Layout — Intro beside the image or Intro centered above.
  • Image position — Left or Right. On desktop, the list of products sits on the other side.
  • Handwritten note — a short line over the image, for example “Tap a dot to shop.” Leave empty to hide it.
  • Hotspot (block) — a Product, a Horizontal position (distance from the left edge of the image), and a Vertical position (distance from the top edge). Single-variant products get an add to cart button in the dot's card; products with options, subscription-only products and gift cards show View product instead.
  • Selecting a dot opens a card with the product image, title, and price. Products without variants can be added to the cart from the card. Others link to their product page.
• Recently viewed productsShows the products the visitor looked at most recently. The section stays hidden until there is something to show. The list is stored in the visitor's own browser.

  • Eyebrow and Heading.
  • Products to show — from 2 to 8.
  • Columns on desktop — from 2 to 5.
  • Arrow position — On the sides or Below the slider.
  • Mobile layout — Swipe slider or Grid.

Product badges

Product cards and the product page show one badge per product, in this order: Sold out, Sale, Best seller, and New. Sold out and Sale follow your theme settings. Best seller and New are set in each section that shows products (Featured collections, Collection page, and Search results) and in the Title block of the product page:

• Show the new badge for: products tagged new, or created within this number of days (0 to 90), get the New badge. Set it to 0 to turn it off.
• Best seller collection: products in this collection, and products tagged bestseller, get the Best seller badge.
• On product cards and the product page, a custom.badge metafield replaces the automatic badge with its own text (Sold out still shows first). See How do I add a badge to some products only?

Trust and storytelling

• Value propsA row of short promises, such as shipping, returns, and support. Add up to six Value prop blocks.

  • Style — Row with dividers: thin lines between the items, a calm strip (Snuggle). Cards on a panel: white cards with icon tiles on a rounded panel that carries the color scheme (Cugo). Centered icons: centered items with the icon in a tinted circle (Juniper).
  • Heading — optional, shown centered above the items.
  • Mobile layout — Swipe slider or Grid.
  • Value prop (block) — an Icon, a Title, and a Text. Only promise what your store really offers.
• Logo listLogos or names of press features, partners, or retailers. Add up to 12 Logo blocks.

  • Eyebrow, Heading, and Text.
  • Layout — Grid, or Scrolling row: an endless row that pauses when a visitor hovers over it and has a pause button. Visitors who reduce motion see a still row.
  • Logo height — from 24 to 120 px.
  • Show logos in one color — recolors the logos to match the color scheme. Works best with transparent PNG or SVG logos.
  • Speed — for the scrolling row, the time for one full loop, from 10 to 90 seconds. Lower values move faster.
  • Separator — None, Dot, Sparkle, or Paw print, shown between logos in the scrolling row.
  • Logo (block) — an Image, a Name, a Link, and a Quote: a short line from the article, shown under the logo. The Name is also the logo's alt text.
  • Wordmarks — leave Image blank to show the Name as a text wordmark, styled with Wordmark style: Heading font, Spaced capitals, Italic, or Accent font. A scrolling row of wordmarks also works as a band of short brand promises.
• TestimonialsCustomer reviews. Add up to six Testimonial blocks. Use real reviews, shared with the customer's permission.

  • Heading, Subtitle, Link label, and Link.
  • Role line — shown under each name, for example “Verified buyer.” Use it only when it is true for every review. Leave empty to hide it.
  • Style — Cards: review cards with round photos (Snuggle). Quote bubbles: big quotes in speech bubbles (Cugo). Spotlight: one large review at a time with arrows and dots, which never moves on its own (Juniper).
  • Desktop layout — Grid or Endless scrolling row, for Cards and Quote bubbles. The row pauses on hover, on keyboard focus, and with its pause button. Visitors who prefer reduced motion see a still grid.
  • Speed — the time for one loop of the scrolling row, from 20 to 90 seconds.
  • Mobile layout — Swipe slider or Stacked, for Cards and Quote bubbles.
  • Testimonial (block) — Author photo, Quote, Rating (0 to 5 stars; 0 hides the stars), and Author.
• Image with textAn image next to text, buttons, and a checklist.

  • Image and Second image — the second image overlaps the corner of the first one.
  • Badge — a short label on the image, for example “New.”
  • Layout — Side by side, or Joined panel, where the color scheme colors one panel that holds the image and the text (Cugo).
  • Image position — Left or Right.
  • Blocks — Eyebrow, Heading, Text, Checklist (add one item per line in List items), Button (Primary or Secondary), Custom Liquid, and app blocks.
• Before and afterTwo photos of the same subject with a handle that customers drag, or move with the arrow keys, to compare them.

  • Eyebrow, Heading, and Text.
  • Before image, Before label, After image, and After label — take both photos from the same angle.
  • Starting position — where the handle starts, from 0% to 100%.
  • Image ratio — Adapt to media, Landscape, Square, Portrait, or Wide.
  • Layout — Intro above or Intro beside. Width (Narrow or Page width) applies to Intro above.
• Benefit cardsUp to six cards, each with a round image or an icon, a title, and a short text. The product template places it under the product.

  • Heading and Subtitle.
  • Style — Strip with dividers (Snuggle), Separate cards (Cugo), or Centered with rings (Juniper).
  • Columns on desktop — from 2 to 4.
  • Mobile layout — Swipe slider or Stacked.
  • Panel color scheme — the colors of the strip or the cards.
  • Benefit card (block) — an Image (square recommended), an Icon (shown when there is no image), a Title, and a Text.
• FAQQuestions that open and close to reveal their answers.

  • Eyebrow, Heading, and Text.
  • Layout — List, or Heading beside questions (Cugo).
  • Open the first question — shows the first answer when the page loads.
  • Question (block) — Question, Answer, and Answer from page. When you choose a page, its content appears in the answer.
  • Custom Liquid and app blocks are also supported.
• Featured blogThe latest posts from one blog.

  • Blog, Heading, and Subtitle.
  • Link label — links to the selected blog. Leave blank to hide the button.
  • Posts to show — from 2 to 4.
  • Layout — Picture beside text (Snuggle), Large first post (Cugo), or Picture above text (Juniper).
  • Mobile layout — Swipe slider or Stacked.
  • Show featured image, Show tags, Show date, and Show excerpt — what each blog post card shows.

Layout and utilities

• Custom sectionAn empty section that you build from theme blocks. See Custom section and blocks.
• Custom LiquidPaste app snippets or your own Liquid, HTML, CSS, and JavaScript to build advanced customizations. Code you add here is not covered by our support.

  • Liquid code — your code.
  • Make section full width — removes the page margins.
• BreadcrumbsShows the path to the current page. Nothing is shown on the home page. You can add it to every template except the home page and the password page.

  • Text size — Small, Medium, or Large.
  • Alignment — Left or Center.
  • Top padding and Bottom padding — from 0 to 48 px.
• Contact formA form that sends messages to your store email. See Contact page and contact form.
• Quick order listA table of every variant of a product with a quantity field each. See Quick order list.

Product information

• Section settings

  • Gallery layout — Thumbnails on the side: a column of thumbnails beside the main image (Snuggle). Thumbnails below: a row of thumbnails under the image (Juniper). Stage: the media on a tinted panel with the thumbnails in a row under it (Cugo).
  • Media ratio — Adapt to media, Square, Portrait, or Landscape.
  • Image fit — Fill crops images to the frame. Fit shows the whole image.
  • Loop videos — restarts product videos when they end.
  • Enable image zoom — opens product images in a full screen view with previous and next navigation. See Image zoom.
  • Color scheme — the colors of the section.
  • Show sticky add to cart bar — shows the price and an add to cart button at the bottom of the screen once the buy buttons scroll out of view. See Sticky add to cart bar.

Product blocks

Add, remove, and reorder these blocks inside Product information.

• Title

  The product title with one badge, and the subtitle from the custom.subtitle metafield. Settings: Show badge, Show the new badge for, and Best seller collection. See Product badges.

• Product rating

  Shows the product rating metafields that review apps fill in.

• Vendor and SKU

  The product vendor, and the SKU of the selected variant.

• Price

  The price, the compare-at price, and unit prices. Show tax and shipping note adds a note about taxes and shipping, and Show installment terms shows Shop Pay Installments terms when they are available.

• Text

  A short piece of rich text.

• Description

  The product description.

• Inventory status

  Stock messages for variants whose inventory Shopify tracks. Low stock threshold (0 to 50) shows the remaining quantity, for example “Only 3 left.” Show in stock message shows “In stock” above the threshold.

• Benefit icons

  Up to four icon chips with short labels. See Benefit icons.

• Product facts

  Short facts as chips, such as a size or a weight. See Product facts.

• Variant picker

  Cards, Pills, or Dropdown. See Variant picker and swatches.

• Purchase options

  One-time purchase and subscription choices. See Purchase options and subscriptions.

• Buy buttons

  The quantity field and the add to cart button. See Buy buttons.

• Trust row

  Three short reassurances with icons. See Trust row.

• Back in stock request

  See Back in stock request.

• Pop-up guide

  A link that opens a pop-up. See Pop-up guide.

• Size chart

  A Size guide button that opens a chart. See Size chart.

• Collapsible tab

  A Heading that opens to show Content, Content from page, or both. Open by default shows the content when the page loads.

• Share

  A share button that uses the device's share menu or copies the link. Add an optional second button with Help button label and Help button link, for example to your contact page.

• Compare button

  Adds the product to the comparison. See Product comparison.

• Countdown

  A compact timer in the buy box. See Countdown block.

• Volume pricing

  Quantity rules and price breaks for B2B customers. See Volume pricing and quantity rules.

• Quick order list

  Every variant with its own quantity field. See Quick order list.

• Custom Liquid

  Your own Liquid or HTML code.

• Apps

  App blocks, for example from a reviews or subscriptions app.

Benefit icons

Up to four icon chips, each with a label and an optional second line, for example “Grain free / Gentle on tummies.” Set them in the block with First icon and First text up to Fourth icon and Fourth text. The texts accept dynamic sources.

To show different benefits on each product, use the custom.benefit_icons metafield. With Use the product's benefit icons metafield on (the default), a product that has the metafield shows its own items, and other products show the block's items. When all four texts of the block are empty, the block always reads the metafield.

1. 01In your Shopify admin, go to Settings > Custom data > Products and click Add definition.
2. 02Name it “Benefit icons,” set Namespace and key to custom.benefit_icons, and choose Single line text with List of values. A multi-line text with one item per line also works.
3. 03Open each product and add one item per value, written as icon|Label|Sublabel, for example leaf|Grain free|Gentle on tummies. The sublabel is optional.

Product facts

Short facts shown as chips, such as a size, a weight, or an origin. With Use the product's facts metafield on (the default), the block shows the first four facts of the product's custom.facts metafield. Products without the metafield show the block's First text to Fourth text, which accept dynamic sources.

1. 01In Settings > Custom data > Products, add a definition with Namespace and key custom.facts. Choose Single line text with List of values, or a multi-line text with one fact per line.
2. 02Open each product and add its facts, for example 2 kg bag, Made in Portugal, and For adult dogs.

Variant picker and swatches

The Style setting sets how options appear:

• Cards: each value of the first option is a card with the price of that variant and its saving, for example pack sizes. The other options appear as pills. The default on the product page.
• Pills: every value is a button.
• Dropdown: every option is a list.
• Unavailable combinations are marked, so customers can see them at a glance.
• Options connected to a category metafield with swatches show color or image swatches. See How do I show color swatches?

Purchase options and subscriptions

The Purchase options block appears only for products with subscriptions or other purchase options. One-time purchase is listed first, followed by each subscription or other purchase option that you set up in your subscription app, each with its price. If a product can only be bought with a subscription, the one-time option is hidden.

Purchase options also appear in quick view and in the Featured product section. See How do I sell subscriptions?

• When an option costs less than a one-time purchase, it shows a “Save X%” badge, calculated from your real plan prices. Plans whose name already states a percentage don't repeat it.
• When the selected option has 2 to 5 delivery frequencies, they appear as buttons. More than 5 appear in a dropdown.
• Select subscription by default: product pages open on the first subscription plan. Customers can still switch to one-time purchase, and a link that names a plan opens on that plan.
• Show subscriptions first: lists the subscription options above one-time purchase. Shopify recommends showing one-time purchase first, so turn this on only if most of your customers subscribe.
• Popular badge: a short label on the first subscription option, for example “Most popular.” Leave empty to hide it.
• Subscription benefits: one benefit per line, shown as a checklist in the first subscription option. Only list benefits that your subscription really includes.

Buy buttons

• Buy buttons settings

  • Show quantity selector — the quantity field follows each variant's quantity rules: a typed quantity snaps to the nearest allowed amount.
  • Show dynamic checkout buttons — customers see their preferred payment method, such as PayPal or Apple Pay.
  • Show gift card recipient form — on gift card products, customers can send the card to someone else's email with their name and a personal message.
  • Show pickup availability — shows whether the selected variant can be picked up at your locations, with a drawer that lists each location. Set up local pickup in Settings > Shipping and delivery.
  • Delivery note — a short line under the add to cart button, for example when orders ship. Keep it accurate.
  • Show pre-order button and Pre-order note — see How do I take pre-orders?

Trust row

Three short reassurances under the buy buttons, each with an icon, a title, and a subtitle: First icon, First title, and First subtitle, and the same for the second and third. The default texts, such as Free shipping and Easy returns, are placeholders. Change them to your real terms, or clear a slot's title to hide it.

Back in stock request

Appears when the selected variant is sold out. Customers leave their email address, and Snuggle sends the customer's email and the product name to your store email, like the contact form, so you can follow up. Customize the Heading and Text.

Pop-up guide

A link that opens a pop-up, for example a care guide or shipping details. Set the Link label, an optional Pop-up heading (leave blank to use the link label), and the content: type it in Content, or choose a page in Content from page to reuse the same guide on many products. You can add several pop-up guides.

Size chart

A Size guide button with a ruler icon that opens the chart in a dialog. The chart comes from the first of these that has content: the product's custom.size_chart metafield (a page reference), the block's Page, or the block's Content.

• Option names: the button appears only on products with an option of one of these names, for example Size. Separate names with commas, or leave it empty to show the button on every product.
• Label: the button text. Heading: the dialog title. Leave Heading blank to use the page title.
• To give each product its own chart, create a page per chart and a product metafield definition custom.size_chart of type Page, then choose the page on each product.

Volume pricing and quantity rules

If you sell to businesses with B2B catalogs, you can set quantity rules (a minimum, a maximum, and increments) and volume pricing for each variant in your Shopify admin. The Volume pricing block shows the rules, for example “Minimum of 6 · Increments of 6,” and a table of the price per quantity break, with the break that applies highlighted.

Customers without a B2B catalog see nothing in this block. The quantity field always follows the rules, on the product page, in quick view, in the cart, and in the quick order list.

Quick order list

A table of every variant of a product, each with its image, options, SKU, price, stock, and a quantity field, so customers such as wholesale buyers can order many variants at once. The cart updates as they type, and the list shows the cart count and subtotal for the product, with Remove all and View cart.

Add it as the Quick order list block of Product information, or as the Quick order list section on product and page templates. On a page template, choose the Product in the section. Settings: Show variant images, Show SKU, Show availability, and Low stock threshold. The section also has a Heading and Text.

Countdown block

A compact timer in the buy box, for example “Offer ends in 2 days 4 hours.” Set the Text, End date (YYYY-MM-DD), End time (HH:MM), and Time zone, and choose what happens When the timer ends: Hide or Show a message. The timer counts to the same moment for every visitor and never restarts, so use it only for a real deadline.

Sticky add to cart bar

When Show sticky add to cart bar is on, a bar with the product image, title, price, and an add to cart button slides in once the buy buttons scroll out of view, and hides again near the footer.

For products without variants, the button adds the product to the cart. For products with variants, a required subscription, or a gift card recipient form, the button scrolls back to the options, so customers always see what they are buying.

Image zoom

When Enable image zoom is on, customers can open product images in a full screen view and move between them with previous and next buttons, the arrow keys, or a swipe.

Quick view

When Show quick view button is on in Theme settings > Product cards, product cards get a quick view button. It opens the product in a dialog with its images, title, badge, price, variant picker, purchase options, quantity selector, buy buttons, and a link to the full product page. The add to cart button on a card also opens quick view for products with variants, subscriptions, or gift cards.

Product tabs

Product tabs shows a row of tabs under the product, with an optional Key benefits card beside them. A tab that has no content for the current product is left out, so you can connect tabs to metafields that only some products have. The default template has Description, Details, and Shipping and returns tabs.

• Tab (block)

  • Heading — the tab label.
  • Use the product description — shows the product description in this tab, above the content.
  • Content — connect a product metafield with the Connect dynamic source icon to show different content on each product, for example custom.ingredients for an Ingredients tab or custom.feeding_guide for a Feeding guide tab.
  • Content from page — shows the content of a page, for example your shipping policy.
• Benefits card (block)

  • Heading — the default is Key benefits.
  • Image — a small square image at the top of the card.
  • Row icon — the icon of the rows that come from the metafield.
  • One per section.
• Benefit row (block)

  • Icon, Label, Value, and Note — one row of the Key benefits card.

Key benefits card

When a product has rows in its custom.benefit_rows metafield, the card shows those rows, so every product can have its own. Products without the metafield show the card's Benefit row blocks instead, so the blocks work as a fallback.

1. 01In your Shopify admin, go to Settings > Custom data > Products and click Add definition.
2. 02Name it “Key benefit rows,” set Namespace and key to custom.benefit_rows, and choose Single line text with List of values, or a multi-line text with one row per line.
3. 03Open each product and add one row per value, written as Label | Value | Note, for example Protein | 32% | From fresh chicken. The note is optional.
4. 04Optional: in the theme editor, keep or edit the Benefit row blocks under the Benefits card. They only show on products without the metafield.

Related and complementary products

The product template has two Related products sections. Recommendation type chooses what each one shows, and both load as they scroll into view.

• Related products

  “You may also like”: a row of product cards from Shopify's recommendations. Settings: Heading, Subtitle, Link label, Link, Products to show (1 to 10), Columns on desktop (2 to 5), Arrow position, and Mobile layout.

• Complementary products

  “Better together”: product cards next to an optional image card with an Image, a Heading, a Text, a Link label, a Link, and a Panel color scheme. Choose complementary products in the Search & Discovery app. There is no bundle discount.

How shoppers compare products

1. 01Shoppers select Compare on a product card, or with the Compare button block on a product page.
2. 02A compare bar slides up at the bottom of the screen with one slot per product. Shoppers can remove products, clear the list, or minimize the bar.
3. 03With at least two products, Compare opens the comparison table. Highlight differences marks the rows where the products differ. Products without variants can be added to the cart from the table, and the others link to their product page.

Turn comparison on or off

• Compare bar, in the Overlays group: Enable product comparison must be on. Without it, no Compare control or button appears anywhere.
• Theme settings > Product cards > Show compare on cards: adds the control to product cards. Compare control chooses a round icon on the image (phones and tablets show a checkbox under the price, since they have no hover) or the checkbox everywhere.
• Compare button block: adds the button to the product page. It is in the default product template.

• Compare bar settings

  • Enable product comparison — turns comparison on for the whole store.
  • Maximum products — 2, 3, or 4 products.
  • Position on desktop — Left, Center, or Right.
  • Heading — the title of the comparison table.
  • Rows — Show price, Show availability, Show rating (when a reviews app provides one), Show vendor, Show product type, Show options, Show specification rows, and Show short description.
  • Color scheme — the colors of the bar and the table.

Specification rows

Specification rows come from one product metafield, named in Theme settings > Product cards > Specification metafield as namespace.key. The default is custom.benefit_rows, the same metafield as the Key benefits card.

• Use a list of single line texts (or a multi-line text with one row per line), each row written as Label | Value | Note.
• Rows with the same label line up across products. A product without that row shows a dash.
• To compare other details than the Key benefits card shows, create a second metafield, for example custom.specs, and enter it in Specification metafield.

Collection page

The default collection template contains Breadcrumbs and the Collection page section.

• Banner

  • Show banner — shows a banner with the collection title at the top of the page.
  • Banner style — Split: the title and description beside the collection image, with a handwritten note and a sticker (Snuggle). Overlay: the title on the collection image in a rounded frame (Cugo). Centered: the breadcrumbs, title, and description in the middle of a band with soft circles (Juniper).
  • Show breadcrumbs in the banner — for Centered, on templates without a Breadcrumbs section, so the trail doesn't show twice.
  • Show collection description and Show collection image.
  • Handwritten note — for Split. Leave empty to hide it.
  • Show sticker and Sticker text — up to three short words in a round sticker on the image, for Split and Overlay.
  • Banner color scheme — the colors of the banner.
• Subcollections

  • Show subcollection chips — a row of round image chips that link to other collections. See Subcollection chips.
  • Menu — used when no menu has the same handle as the collection. Leave blank to hide the chips there.
• Filtering and sorting

  • Enable filtering — shows filters. Manage filters in the Shopify Search & Discovery app.
  • Enable sorting — lets customers sort products, for example by price or best selling.
  • Filter layout — Sidebar: collapsible filter groups beside the products. Sidebar cards: each filter group in its own card (Cugo). Horizontal: a row of filter buttons with dropdowns above the products (Juniper). Phones always open the filters in a drawer.
• Badges and grid

  • Show the new badge for and Best seller collection — see Product badges.
  • Products per page — from 8 to 24.
  • Pagination style — Page numbers, Load more button, or Infinite scroll. Load more and infinite scroll add the next products below the list. Page links stay in place for search engines and for visitors without JavaScript.
  • Columns on desktop and Columns on mobile — the number of products in each row: 2 to 5 on desktop, 1 or 2 on mobile.
  • Promo banner (block) — see Promo banners in the grid.

Subcollection chips

Subcollection chips are a row of round images with labels above the products, for example Dry food, Wet food, and Treats on a Dog food collection. The current collection is marked with a ring. The row scrolls sideways on small screens.

1. 01In Content > Menus, create a menu with links to the subcollections.
2. 02Give the menu the same handle as the collection. For a collection at /collections/dog-food, the menu handle must be dog-food. You can see and edit a menu's handle on the menu page.
3. 03Open the collection page in your store. The chips show the image of each linked collection, or the first letter of its title when it has no image.

Filtering and sorting

Filters come from the free Shopify Search & Discovery app. In the app, click Filters > Add filter to add filters such as availability, price, product type, vendor, tags, variant options, and metafields, for example life stage or pet size.

Active filters appear as pills that customers can remove one by one. Products update without a page reload, and the address bar keeps the selected filters, so filtered pages can be shared. Filters with swatches, such as color, show color or image swatches when you choose the swatch display for the filter in Search & Discovery.

Promo banners in the grid

A Promo banner block places a full-width banner across the product grid. Add up to two.

• Show after row: from 1 to 6, counted in rows of the desktop grid. Banners appear on the first page only, and they hide while filters or a different sort order are active.
• Image, Heading, Text, Button label, Button link, Second button label, and Second button link.
• Perk 1, Perk 2, and Perk 3: an Icon, a Title, and a Text each.
• Color scheme: the colors of the banner.

Search results

The search page has the same filtering, sorting, badge, pagination, and grid settings as the collection page, with Results per page (8 to 24) instead of Products per page. Results include products, pages, and blog posts.

Search suggestions

When Show search suggestions is on in Theme settings > Search, the search field shows suggested search terms, products, collections, pages, and blog posts while visitors type. Customers can move through the results with the arrow keys.

Collections page

The page that lists all your collections (/collections). Settings: Heading (leave blank to use the default title), Text, Collections per page (8 to 24), Columns on desktop (2 to 4), Columns on mobile, Card style (Tile, Rounded square, or Circle), and Show product count.

Trust items

Trust items are short reassurances under the checkout button, for example “Secure checkout” or “Free returns within 30 days.” Each Trust item block has an Icon and a Text. The drawer and the cart page have their own blocks, because the drawer isn't shown on the cart page.

• Trust items position (cart page only): In the order summary, Under the cart items, or Under the cart, centered.
• Only promise what your store really offers, and keep the texts in step with your policies.

Free shipping progress

To turn it on, go to Theme settings > Cart, turn on Show free shipping progress, and enter your Free shipping threshold. Use the same minimum order price as your free shipping rate in Settings > Shipping and delivery. It is off when you install the theme, in every style.

The cart drawer and the cart page then show how much more the customer needs to spend to get free shipping, with a progress bar. Once the cart reaches the threshold, a message confirms that free shipping is unlocked.

• Enter the threshold in your store currency. It is compared with the cart subtotal after discounts.
• Customers who shop in another currency see the amount converted at the current exchange rate. If you set fixed shipping rates per market, the converted amount may not match them exactly.
• The bar is hidden when the cart is empty or when nothing in the cart needs shipping.

Landing page sections

You can also add these sections to other templates.

• Listicle

  • Eyebrow, Heading, Heading level (H1 or H2), and Text.
  • Layout — Alternating rows, where image and text swap sides, or Stacked cards.
  • Image ratio — Adapt to media, Landscape, Square, or Portrait.
  • Number style — Outline, Filled, Tile, or Circle.
  • Show sticky bar on phones — a bar at the bottom of the screen with the Product, its price, and a button while visitors scroll through the list. Bar text shows when no product is selected. Set the Button label, the Button link (leave blank to link to the product), and the bar's Color scheme.
  • Reason (block) — an Image, a Heading, a Text, and an optional Button label and Button link. Each reason is numbered by its position. Add up to 12.
• Founder letter

  • Portrait and Portrait shape — Arch, Circle, or Rounded.
  • Eyebrow, Heading (leave blank to use the page title), Heading level, and Text. Short paragraphs read best on phones.
  • Show a drop cap — enlarges the first letter of the letter.
  • Signature image — a scan of a handwritten signature on a transparent background works best. Without one, the Name shows in the handwritten font.
  • Name and Role line — the sign-off.
  • Timeline — a Heading, and Milestone blocks with a Year, a Title, and a Text.
  • Values — a Heading, and Value blocks with an Icon, a Title, and a Text.
  • Color scheme and Panel color scheme — the colors of the section and of the letter.
• Advertorial header

  • Show disclosure label — on by default. Tells readers that the article is advertising. Advertising rules in many countries require this label, so keep it on.
  • Disclosure label — Advertorial or Sponsored.
  • Eyebrow, Heading (leave blank to use the page title), Heading level, and Subtitle.
  • Author, Author photo, and Date line — for example the publication date or the reading time.
  • Image, Image ratio (Adapt to media, Landscape, or Wide), and Caption.
• Advertorial article

  • Show a drop cap — enlarges the first letter when the article starts with a paragraph.
  • Heading level — H2 or H3, for subheadings and the offer box. Use H2 after an Advertorial header with an H1.
  • Blocks, in any order (up to 50) — Paragraph, Subheading, Image (Column width or Wide, with a Caption), Pull quote, Product callout, Checklist, Offer box, Testimonial, and Custom Liquid.
  • Product callout — a product with an Eyebrow, a Title (leave blank to use the product title), a Text, and a Button label.
  • Offer box — a Heading, a Text, an optional Product, a button, a Guarantee line, and a Color scheme. Only mention discounts and terms that apply at checkout, and only describe a guarantee you really offer.
  • Testimonial — a Quote, an Author, a Role line, and an Author photo. Use the real words of a customer, shared with their permission.
• Comparison tableThe defaults don't name another brand. Only claim what you can back up, and check the rules that apply to you before you name a competitor.

  • Eyebrow, Heading, Heading level, and Text.
  • Your column heading, Your column logo, and Highlight label — a short label above your column, such as “Best choice.”
  • Comparison column heading, Show a second comparison column, and Second comparison column heading.
  • Footnote — explain what you compared and when you last checked it. Leave empty to hide it.
  • Call to action — an Image, a Text, a Button label, and a Button link.
  • Row (block) — a Feature, and for each column a Value: Check mark, Cross, or Text. Add up to 16 rows.
  • On phones every column stays visible. With two comparison columns, the table scrolls sideways and the feature column stays in place.

Contact page and contact form

To create a contact page, go to Online Store > Pages, add a page, and choose contact as its Theme template. The contact template shows your page content followed by a Contact form section. You can also add the Contact form section to other templates.

The section has an Eyebrow, a Heading, a Text, and an Alignment (Left or Center). Messages are sent to your store email. Build the form from these blocks (up to 20):

• Text field

  A single-line field. Autofill helps browsers fill in a Name or Company.

• Email field

  The first email field is sent as the customer's email address, so it is always required. If the form has no email field, one is added automatically.

• Phone field

  A phone number field.

• Multi-line text field

  The first multi-line text field is sent as the message.

• Dropdown

  A list of choices. Add one option per line in Options.

• Checkbox

  Leave Options blank for a single checkbox, for example a consent. Add one option per line to show a group of checkboxes. Required applies to single checkboxes only.

• Heading

  A heading that groups the fields below it.

• Paragraph

  A short instruction or note between fields.

Connect a metafield to a setting

Settings with the Connect dynamic source icon can show a metafield instead of fixed text, for example a Product tabs tab or the texts of the Benefit icons and Product facts blocks.

1. 01In the theme editor, open the product template and select the block, for example a Tab in Product tabs.
2. 02Click the Connect dynamic source icon next to the setting, such as Content, and choose the metafield.
3. 03Preview a few products. Products with an empty metafield show nothing there, and an empty tab is left out.

Apps

• Search & Discovery

  Filters on collection and search pages, and the products of the Complementary products section, are managed in the free Shopify Search & Discovery app.

• Subscriptions

  Subscription apps that use Shopify selling plans, such as the free Shopify Subscriptions app, appear in the Purchase options block. See How do I sell subscriptions?

• Reviews

  Review apps that fill in the product rating metafields show stars across the theme. Add the app's own block for the review list.

• Translate & Adapt

  Translates your own content into more languages. See Translations and RTL.

• App blocks

  Apps can add blocks to Product information, Featured product, Image with text, FAQ, Custom section, Column and Row blocks, the Cart section, and the Footer.