Product stage

Stage cover image

Under Media → Stage cover image, select an optional wide image. It becomes the first slide, followed by all of the product’s existing gallery media in their original order. Use a 2400 x 1350px .jpg with the set clearly composed in the frame. Add meaningful alt text to the uploaded image.

A manually selected image is shared by products using the same template. For a different cover on each product, create a product image metafield (File with images accepted), fill it on each product, and connect that metafield to Stage cover image using the dynamic-source button. A product with no connected image uses its normal gallery without an extra slide.

Keep the product’s featured image composed for portrait cards in collections, search, and recommendations. The Stage cover is separate and does not replace that featured image.

Cover image fit controls only the custom opening slide and appears when a cover image is selected. It defaults to Fill the stage. Product gallery fit controls the following product images and other gallery media independently. Existing gallery fit selections are preserved. For either control, Fill the stage crops to fill the frame; Fit within the stage preserves the full image with a compact 12px clearance below the floating header. Fitted portrait and square photographs align to the top of that usable area. Landscape photographs center vertically within the space below the header, with balanced space above and below. All fitted photographs stay centered horizontally. This applies independently to the cover and gallery, including gallery video posters and players. Fill mode continues behind the floating header. Fitted cover and gallery photographs follow the global media corner radius, including sharp corners when the theme uses Sharp. The radius clips the photograph itself even when its aspect ratio leaves space in the stage. A useful combination is a cover that fills the stage followed by portrait product images that fit within it. Variant links still open the matching variant media when provided, and choosing a variant still navigates to its gallery image. Hotspot media positions continue to count only product gallery items, excluding the cover. The cover also works on its own when a product has no gallery media.

On desktop, fitted images use the space between the thumbnail rail and the Product information card, with a 16px gap beside each. The image stays fully visible for either card position. Hiding details expands the fitted media area; showing details restores the space reserved for the card. The information card keeps its standard readable width. The image moves and resizes smoothly using the global interface animation speed. No motion and reduced-motion preferences switch the layout immediately. Repeated clicks reverse the movement from its current position. The desktop arrows, progress bar, and image count share the fitted image’s horizontal center and move with it when details open or close. Mobile controls stay centered in their reserved row below the image. On phones, fitted images have at least 12px clearance before the controls, followed by a 12px gap before the information card, so the controls do not cover the photograph. Desktop positioning uses the displayed photograph’s bounds. When there is room below the photograph, the controls sit midway in that space; otherwise they sit near the bottom of the stage over the image. The stage reserves the header’s measured layout height. Sticky-header movement while scrolling does not resize fitted images or change the controls’ position relative to the image. Resizing the viewport still recalculates the layout. Filled media continues to span the stage behind the floating card.

Show cover image on mobile is enabled by default. Turn it off to start phones on the product gallery instead; the cover still appears on desktop. If the product has no gallery media, its cover remains visible so the stage does not become empty. Mobile cover image optionally replaces the cover on phones. Use a portrait image (1200 x 1600px .jpg recommended); when empty, phones use the Stage cover image. This image uses Cover image fit and can connect to a product image metafield.

Mobile gallery layout controls the phone frame independently from Cover image fit and Product gallery fit. Choose Portrait (2:3, the default) for individual products, Square (1:1) for mixed galleries, or Landscape (16:9) for wide set photography. The setting applies to both the cover and product gallery. Fit preserves each complete image inside that frame; Fill crops to fill it. A portrait photo in a landscape frame will therefore appear narrower when fitted. For mixed set galleries, Square with Fit is a balanced starting point.

On phones, the selected frame is capped at 65% of the viewport height for the photograph area. Fitted portraits can use nearly the full available width in Portrait layout, while landscape images stay centered. The header and navigation row have reserved space, so fitted media does not overlap either. The gallery height stays steady when swiping between image shapes, with the purchase card directly below it. While a fitted slide is active, the mobile header uses its selected color scheme with an opaque background. Switching to a filled cover or gallery slide restores the header’s configured overlay appearance. Desktop header styling is unchanged.

Recommended purchase card

The Product Stage preset uses this order: Product identity, Title, Product rating, Short benefit statement, Price, Variant picker, Purchase options, Quantity selector, Buy buttons, Delivery estimate, Reassurance item, and Collapsible information.

Ratings link to Product reviews when available. Purchase options appear only for products with selling plans. The preset keeps accelerated checkout off and sticky add to cart enabled. Merchants can enable accelerated checkout in Buy buttons.

Select your own shipping and returns page in the final Collapsible information block. It starts closed and remains hidden from customers until content is assigned. Use factual reassurance copy and links for the store’s actual policies.

The set template retains optional description, metadata, inventory, extra reassurance, complementary products, share, and pickup blocks in a disabled state. Enable only the blocks needed for that store. The existing media, colors, and card position are preserved.

Set template

Product Stage buys the set product and its selected variant. Evidence cards below it shows the individual products included in that set. Product routine follows it and explains how to use those products by previewing the routine pages that include them. Set contents, usage, benefits, proof, reviews, dossier, comparison, and related products each have a separate role. Replace the Proof ledger’s starter records with set-specific evidence before publishing.

The set template has no Protocol timeline or Routine builder. The full routine lives on the routine page that Product routine links to, so purchasing the set remains the main action on the set page.

Custom product highlights

Use a custom product metafield when the standard category attributes do not cover a value you want to display.

1. Create a product metafield definition in Shopify admin, with a supported plain-value type.
2. Fill the field on every product that should display it.
3. In this section, open a Highlight block and select Custom product metafield.
4. Enter the definition’s full namespace and key, such as custom.product_highlight, in the newly shown metafield identifier field. Enter this as plain text, without a dynamic-source connection.
5. Save and preview products with different values. Existing manual fallbacks remain available.

See Custom product metafield setup for field creation steps, supported types, this section’s exact fallback behavior, and troubleshooting. If you enter only the key without its namespace, the theme editor displays a message explaining the required format.

Complementary product links

Complementary product titles have no default underline on mobile. Titles follow the global text-link hover setting.

Complementary product arrows slide the outgoing and incoming pages horizontally together. Page height adjusts smoothly when the pages differ in height. The global Interface animation speed controls timing; No motion and reduced motion switch pages immediately.

Sticky add to cart

In Buy buttons, Show sticky add to cart on mobile and Show sticky add to cart on desktop independently control the sticky purchase action. Both are enabled by default. Mobile shows a slim bottom bar below 750px. Desktop shows a compact floating card in the lower-right corner at 750px and wider. Its slim horizontal layout pairs the product’s featured-image thumbnail and title with the priced button. The thumbnail is omitted when the product has no featured image. Titles wrap without truncation, and the card follows the section color scheme and theme corner-radius controls. Most of the page remains clear for reading. Turn off either option to keep the bar only on the other screen size, or turn off both to remove it.

The bar appears after shoppers scroll past the main add to cart button and stays above the following page sections, including Benefits and suitability, Proof ledger, and the Product dossier. It hides when the main button returns to view. It also hides while the cart drawer, a header menu, search, localization panel, or a dialog is open. The bar shows the native Shopify product title and copies the main button’s current label, including its price when Show price on add to cart is enabled, availability, and loading state. It submits the existing product form with the selected variant, quantity, purchase option, and gift card recipient details. It does not require a metafield or separate product content.

Long product titles wrap, and the page reserves space for the bar so the last page content remains reachable. Appearance follows the section color scheme and global motion settings, including reduced motion. Without JavaScript, shoppers use the main product form.

Delivery estimate

The Delivery estimate block tells shoppers when the selected variant ships and when it arrives, for example “Arrives Tue, Oct 20 – Fri, Oct 23” with “Order within 3 hr 12 min to ship today” beneath it. A newly added Product stage section does not include it; add it to the buying column with Add block. The default product template places it below Pickup availability with the countdown off. Match the schedule settings to how you ship before you publish.

Shipping schedule

• Daily order cutoff — the hour, on a 24-hour clock, after which orders count from the next working day. It uses your store’s time zone from Settings > General in Shopify admin.
• Processing time — working days to prepare an order. Use 0 to ship orders placed before the cutoff on the same day.
• Shortest delivery time and Longest delivery time — working days in transit after an order ships. When both match, shoppers see a single date. If the shortest is set longer than the longest, the block swaps them.
• Working days — Monday to Friday, Monday to Saturday, or Every day. Applies to both processing and delivery time.
• Closed dates — holidays when you do not ship, written as YYYY-MM-DD and separated by commas, such as 2026-12-25, 2027-01-01. Entries in any other format are ignored.

Display

• Shipping method — names the service the estimate describes, Standard shipping by default. Leave it blank to hide it.
• Style — Compact shows the arrival dates with the dispatch day beneath. Timeline shows three stops: Order, Ships, and Arrives. The stops stack vertically in narrow columns and on phones.
• Show time left before cutoff — off by default. Counts down, to the minute, to your daily cutoff. Turn it on once the cutoff and processing time match how your team actually ships.

The countdown is the real time left before your cutoff. When it ends, the dates move on to the next working day; it never restarts. Set the cutoff to the time your team actually ships orders, because Theme Store rules do not allow false urgency.

Dates are calculated in the shopper’s browser on your store’s clock, so a shopper in another time zone works to the same cutoff as your warehouse. Without JavaScript the block shows business days instead, such as “Ships in 1 business day” and “Arrives in 3–6 business days”. The estimate comes from these settings, not from carrier rates, so keep it in line with your shipping policy.

The block hides for sold-out variants, variants selling on backorder, and variants that do not require shipping, including digital gift cards. In the theme editor, a note explains why it is hidden. The estimate updates when shoppers choose another variant.

Content ownership: Shopify product data supplies availability, inventory policy, and whether a variant requires shipping. The block owns the shipping schedule and display. It reads no metafields.

Purchase options without JavaScript

Both product templates enable accelerated checkout by default. Shopify determines eligible methods from variant, market, customer and gateway. Recipient validation uses Add to cart and can hide accelerated checkout on gift products.

Without JavaScript, a labeled native selector submits the chosen variant rather than the initial hidden ID. A sold-out deep link still lets shoppers choose another available variant. Shopify owns options, price, media and availability; blocks own presentation. Verify quantity rules and purchase plans at checkout.

Complementary product title links keep a minimum 24px target in both layouts, including short names. Product data supplies each title and destination.