Skip to main content

Product Sections

Product sections cover the main product page, shoppable grids and carousels, video-led product showcases, bundles, and the overlays that let customers buy from anywhere in the store. Ronin includes 13 product sections: the main product section, nine sections you can add to any page, and three overlay sections that live in the Overlay section group.

Product information​

The main product section used by all three product templates. It renders the media gallery on one side and a buy box built from blocks on the other. It has no preset, so you find it already placed on product templates rather than in the Add section list. See Page Templates and the Change product template guide.

section-main-product.webp

Features:

  • Enable sticky cart shows an add-to-cart bar that follows the customer as they scroll past the buy box. Choose a Sticky cart type of Quick add or Standard add for the bar's layout
  • Media layout: Carousel, or Stack, which shows every image at once in a justified wall instead of one slide at a time
  • Media sticky keeps the gallery pinned while the buy box scrolls; with the Stack layout the wall keeps scrolling and only the product details stay pinned
  • Gallery type: Carousel or Scroll, with Enable image zoom
  • Variant media options: Hide other variants' media after selecting a variant, and Only show selected variant image
  • Media aspect ratio, including a Custom width and height ratio
  • Layout columns and gap per device, plus a Media layout column span that controls how wide the gallery is on desktop and mobile
  • Thumbnails per view for desktop and mobile, and Stack row height and Stack gap for the Stack wall
  • Fixed row and Auto row controls in the Advanced group, plus the standard width, appearance, and padding settings

Blocks​

Add these blocks to the buy box from the section's block list. Most blocks also have left and right padding controls per device.

  • Vendor: the product vendor.
  • Title: the product name, rendered as the page heading.
  • Description: the product description.
  • Price: the current price with the compare-at price when the product is on sale.
  • Variant picker: Style (Dropdowns or Buttons), a Swatches toggle, Show selected value, Direction (Horizontal or Vertical), Alignment, Option spacing, and Option value spacing. See Color swatches.
  • Inventory status: a stock indicator with Status type, a Low inventory threshold (0 always shows in stock when available), Show inventory count (None, Low inventory threshold, or Always), and label, background, track, and fill colors for in-stock and out-of-stock states.
  • Countdown timer: a timed offer with a Headline, Label, and its own color scheme, background, corner radius, and border. The countdown end date is set per product; the block links to a setup tutorial.
  • Buy button: the quantity selector and add-to-cart button with Size variant and Corner radius, Show dynamic checkout buttons for accelerated checkout, and Show recipient information form for gift cards.
  • Pickup availability: local pickup availability for the selected variant, with margin controls.
  • Promo banner: a highlighted offer with an icon, Headline, Label, and its own color scheme, background, corner radius, and border.
  • Line item properties: a Default text, Checkbox, Radio, or Dropdown field whose value is added to the cart line. Enter radio and dropdown options separated by commas. See Product line item properties.
  • Volume discount: tiered quantity pricing with a Product list, Label, Note, minimum Quantity, Discount type (Fixed amount or Percentage), Discount value, and a Highlight text. See Volume discount.
  • Collapsible row: a Heading and rich-text Content in an accordion, with Open by default.
  • Product recommendations: a complementary-products row inside the buy box, with a Heading, a full Typography group, Number of products to show, and product card aspect ratio, vendor, and price toggles. Complementary products are set up in the Shopify Search & Discovery app.
  • Apps: any Shopify app block installed on your store.
note

Pickup availability and Variant option modal also appear as sections in the theme code. They are internal helpers: the first renders the store list behind the Pickup availability block, and the second opens the option picker when a customer adds a multi-variant product from a card or bundle. They have no settings you need to change and you do not add them to pages. Local pickup must be enabled in your Shopify shipping settings for the Pickup availability block to show anything.

Collection tabs​

A "shop by category" section: a row of category chips over a product grid. Clicking a chip swaps the grid to that collection's products without reloading the page.

section-collection-tabs.webp

Features:

  • Heading area with Overline, Heading, Accent the italic word, Highlight style (for a word wrapped in square brackets), Heading size, and Alignment
  • Products per tab
  • Product card: Color scheme, Product card type, and toggles for vendor, price, swatches, add to cart, quick view, and compare
  • Product media aspect ratio, hover effect, navigation style, and bullets
  • Variant display option and Option name for card swatches
  • Category tab blocks, up to 8, each with a Collection and an optional Tab label (leave it blank to use the collection's title)

A product grid, carousel, or masonry layout with a full heading area and an optional button. It is the main way to show a row of product cards on the home page or any landing page.

section-featured-products.webp

Features:

  • Overline, Heading, Accent the italic word, Highlight style, Intro, Heading size, and Alignment
  • Button with label, style, size, URL, and new-tab option
  • Source products from a Collection or a specific Products list, with Number of products to show
  • Cards layout: Carousel, Grid, or Masonry, with desktop and mobile column counts and gap
  • Cards layout advanced: fixed row, per-move count, pagination, effect, speed, autoplay, loop, overflow, and auto height
  • Product card: Color scheme, Product card type, and toggles for vendor, price, swatches, add to cart, quick view, and compare
  • Product media aspect ratio, hover effect, navigation style, and bullets
  • Variant display option and Option name for card swatches

A single product with its gallery and buy box, placed on any page. Use it to spotlight a hero product on the home page or a landing page with a working add-to-cart.

section-featured-product.webp

Features:

  • Pick the Product to feature; leave it empty to preview the section with placeholder content
  • Media layout: Carousel or Stack, with Media sticky
  • Gallery type: Carousel or Scroll, with Enable image zoom
  • Hide other variants' media after selecting a variant, and Only show selected variant image
  • Media aspect ratio, layout columns and gap per device, and a Media layout column span for the gallery width
  • Thumbnails per view, Stack row height, and Stack gap
  • Blocks: Vendor, Title, Description, Price, Variant picker, Inventory status, Countdown timer, Buy button, Promo banner, Line item properties, Volume discount, Collapsible row, Apps (the same blocks as Product information, without Pickup availability and Product recommendations)

Combo product​

A curated kit offer that adds several products to the cart at once. A pitch panel with a computed save badge and a lifestyle photo sits on one side; the combo's products, a live total, and a single add-all button sit on the other.

section-combo-product.webp

Features:

  • Products list that makes up the combo
  • Discount type (Percentage or Fixed amount) and Discount value, which drive the save badge and the combo total
  • Pitch: Heading, Subtext, and a separate Pitch color scheme
  • Save badge: Badge label and Badge suffix
  • Image with alt text, shown behind the pitch panel
  • Call to action: Button label, style, and size for the add-all button
  • Products with several variants open an option picker so the customer can choose before adding

Product specs​

A product hero with a count-up spec bar. The product image scales up slightly as the customer scrolls, and each spec's value counts up when it comes into view.

section-product-specs.webp

Features:

  • Heading area with Overline, Heading, Accent the italic word, Highlight style, Heading size, and Alignment
  • Button with label, style, size, URL, and new-tab option
  • Hero image: Product image with alt text; a transparent PNG is recommended
  • Stat blocks, up to 8, each with an Icon type (a built-in Icon such as Droplet, Zap, Shield, or Ruler, or your own Icon image), a Value, a Unit, and a Label
  • The spec bar's column count follows the number of Stat blocks

Shop the look​

A split feature with a full-height editorial image on one half and a shoppable product carousel on the other. The heading and button sit over the image on a bottom scrim.

section-shop-the-look.webp

Features:

  • Image with alt text and an Image position of Left or Right to flip the halves
  • Overlay heading with Overline, Heading, Accent the italic word, Highlight style, Heading size, and Alignment
  • Call to action button with label, style, size, URL, and new-tab option
  • Source products from a Collection or a Products list (the list overrides the collection when set), with Number of products to show
  • Cards layout: Carousel, Grid, or Masonry, with column counts, gap, and the Cards layout advanced carousel options
  • Product card: Color scheme, Product card type, and toggles for vendor, price, swatches, add to cart, quick view, and compare
  • Product media aspect ratio, hover effect, navigation style, bullets, and variant display option

Shop clips​

A fanned deck of shoppable vertical video clips that spreads out as the customer scrolls. Each clip has play, mute, and progress controls and a product chip with a quick add-to-cart. On mobile the fan becomes a horizontal scroll strip.

section-shop-clips.webp

Features:

  • Heading area with Overline, Heading, Accent the italic word, Highlight style, Heading size, and Alignment
  • Button with label, style, size, URL, and new-tab option
  • Video ratio, including a Custom width and height ratio
  • Clip blocks, up to 12, each with a Video, Loop video, a Poster image (vertical 9:16 recommended), a Product, and an optional Product thumbnail that overrides the product's featured image in the chip

Video stack​

A shoppable, sticky-stacking video reel. Each pane is a playable video that folds back as the next one stacks over it while the customer scrolls; the last pane stays as the resting clip. A bottom bar on each pane shows the product name, price, a mute button, and an Add to cart button.

section-video-stack.webp

Features:

  • Clip blocks, up to 4, each with a Video source of Hosted video (custom play, mute, and progress controls) or YouTube or Vimeo (the platform's own player controls)
  • Video or Video link, Loop video, and a Poster image that falls back to the product's featured image
  • Product per clip, which drives the name, price, sale price, and Add to cart button
  • Videos start muted and show the poster until they play
  • Standard width, appearance, and padding settings

Product recommendations​

Shopify's related-products row for the current product. It has no preset and is placed on product templates, where it loads recommendations for the product being viewed.

section-product-recommendations.webp

Features:

  • Overline, Heading, Accent the italic word, Highlight style, Intro, Heading size, and Alignment
  • Number of products to show
  • Cards layout: Carousel or Grid, with desktop and mobile column counts and gap
  • Cards layout advanced: fixed row, per-move count, navigation arrows, pagination, effect, speed, autoplay, loop, overflow, and auto height
  • Product card: Color scheme, Product card type, and toggles for vendor, price, swatches, add to cart, quick view, and compare
  • Product media aspect ratio, hover effect, navigation style, bullets, and variant display option

Cart mini​

The cart drawer that slides in when a customer adds a product or opens the cart icon. It lives in the Overlay section group and has no section settings; its behavior comes from Online Store > Customize > Theme settings > Cart.

section-xo-cart-mini.webp

Features:

  • Cart type: Drawer, Page, or Popup notification, set in Theme settings
  • Drawer position (Left or Right)
  • Optional cart drawer note and discount fields
  • Redirect to Cart page option
  • Free shipping message with a Free shipping threshold, plus optional product suggestions from a collection you choose

See Theme Settings for the full Cart group, and the Cart attributes guide for collecting extra information at checkout.

Quick view​

The modal that opens when a customer clicks Quick view on a product card. It lives in the Overlay section group, has no settings, and loads the product's gallery, price, variant picker, and add-to-cart without leaving the current page.

section-quick-view.webp

Features:

  • Large modal container sized for a two-column product layout
  • Variant selection and add to cart from inside the modal
  • Turn on the Quick view button on cards with Show quick view in the Product card settings of each product section
note

Quick view content and Quick view bundle are internal sections rendered inside this modal: the first for standard products, the second for products opened from a bundle context. You do not add them to pages.

Product compare modal​

The comparison overlay opened by the Compare action on product cards. It lives in the Overlay section group, lists up to four products side by side, and lets the customer remove products or clear the list.

section-product-compare-modal.webp

Features:

  • List compare rows toggled individually: Available, Type, Price, Vendor, SKU, Tags, and Variants
  • Custom metafields, one per line, to add your own comparison rows. See Product metafield data
  • Products come from the customer's compare list, up to 4 at a time, with a remove action per product
  • Turn on the Compare button on cards with Show compare in the Product card settings of each product section
Building a product carousel

Featured products, Shop the look, and Product recommendations share the same Cards layout controls. Set Type to Carousel, choose the desktop and mobile column counts, then open Cards layout advanced to turn on pagination, autoplay, and loop. Keep the Product card settings consistent across sections so cards look identical wherever they appear.