Home Product Pages

Product Pages

• 9 articles

Product media gallery and lightbox

Product media gallery and lightbox The Product media gallery is the block that shows a product's images, videos, and 3D models on the product page. It sits inside the Product information section and is connected to the parent product, so it pulls each product's own media automatically. It also drives the full-screen lightbox that opens when a shopper clicks the main image. A product image open in the full screen lightbox Find the gallery settings 1. In the theme editor, open a product page (switch the editor view to a product). 2. In the section list, select Product information. 3. Under it, select Product media gallery to open its settings. At the top you see the note Connected to the parent product. The block always shows the media of the product being viewed, so there is nothing to assign. For how blocks sit inside a section, see Sections, blocks, and groups. Settings Desktop layout Desktop layout sets how the media is arranged on larger screens. Its note reads Mobile stays a slider., so this choice does not change phones. - Slider: one image at a time with arrows and dots. - Thumbnails left: the slider with a column of thumbnails down the left side. - Thumbnails below: the slider with a row of thumbnails underneath. - Stacked: every image stacked in a single column, no slider. - Mosaic: the images laid out in a tiled grid. Mobile navigation Mobile navigation sets how a shopper moves between images on a phone, where the gallery is always a slider. - Dots: small markers under the image. - Thumbnails: a row of thumbnail images under the main one. Open lightbox on click Open lightbox on click lets a shopper click the main image to open a full-screen view at a larger size. Turn it off if you do not want the enlarged view. Media fit Media fit sets how each image fills its frame. - Crop: the image fills the frame and any overflow is trimmed, so every image reads at one size. Best when your product photos share a shape. - Adapt: the whole image shows with no trimming, which can leave space around photos of different shapes. Video These settings apply to product videos in the gallery. - Enable autoplay: plays videos on their own. Its note reads Muted, plays inline., so autoplay videos always start without sound. With it on, Hide controls appears, which removes the play, pause, and volume controls. - Enable video looping: restarts each video when it reaches the end. Variant filter - Group media by variant: shows only the images that match the selected variant, so choosing a color or size narrows the gallery to that variant's photos. Its note reads Requires alt-text tags on each image, like @color:Sky Blue. Add a tag in that format to each image's alt text in the product admin (the tag names the option and its value). The match ignores case, and images with no tag always stay visible. This appears only on products with more than one variant. This block also uses the standard Visibility control. See Common section settings. Tips - 3D models need no setting. If a product has a 3D model in its media, the gallery loads the viewer for it on its own. - For Group media by variant, leave general shots untagged so they stay visible for every variant. If the photos do not switch with the selection, check the spelling and case of the tag against the product's option names and values. - Crop gives the cleanest gallery when all your photos share a shape. Switch to Adapt if cropping cuts off part of a product.

Last updated on Jun 20, 2026

Quick view

Quick view Quick view lets a shopper open a product in a modal straight from a card in any listing (collection grid, featured products, search results) without leaving the page. It is controlled in the global Product cards panel under Theme settings, so it applies to every product card across your store. Quick view modal opened from a product card What the shopper sees When quick view is on, each product card shows two round action buttons on hover. The eye icon opens quick view. The bag icon adds the item to the cart. Inside the quick view modal the shopper can: - See the product gallery, title, price, and description. - Switch variants (for example size or color). - Add the item to the cart. The modal closes and the cart drawer opens. - Open the full product page with the View full details link. The product details inside the modal are the same ones from the real product page, so variant switching and add to cart behave the way they do on the full page. Turn it on 1. In the theme editor, open Theme settings (the gear icon at the bottom of the left panel). 2. Open the Product cards panel. 3. Find the Quick add heading. 4. Turn on Show quick add button. Settings These controls sit under the Quick add heading in the Product cards panel. - Show quick add button: Shows the action buttons (quick view and add to cart) on every product card. Turn it off to hide both buttons. This is on by default. - Show quick add on mobile: Shows the action buttons on phones and small screens too. By default the buttons appear only on larger screens, where shoppers hover. This control appears only when Show quick add button is on, and is off by default. Tips - The same Show quick add button setting controls both the quick view eye button and the add to cart bag button. There is no separate toggle for quick view alone. - The action buttons normally appear on hover, which phones do not have. Turn on Show quick add on mobile if you want shoppers on phones to see the buttons. - If a variant is sold out, the add to cart button on the card is disabled for that variant. The shopper can still open quick view to pick an available variant.

Last updated on Jun 24, 2026

Buy buttons and sticky add to cart

Buy buttons and sticky add to cart These three blocks drive purchases in the Product information section. Buy buttons holds the add to cart and dynamic checkout buttons, Quantity selector sets how many to add, and Sticky add to cart is a floating bar that follows the customer as they scroll. Each block reads the product on the page, so there is nothing to pick or connect. Quantity selector with add to cart and buy buttons Buy buttons The add to cart button, with optional express checkout buttons below it. The button label follows the variant: Add to cart, Sold out, Pre-order, or Unavailable. Add or find it 1. Open the theme editor and select a product template from the top bar. 2. In the Product information section, select the Product info block. 3. Add Buy buttons under it, in the Products group. If it is already there, select it to open its settings. Settings - Button style: the look of the add to cart button. Primary, Secondary, Primary outline, or Secondary outline. - Show dynamic checkout: adds the express payment buttons under the add to cart button (Shop Pay, Apple Pay, Google Pay, and more). The set a customer sees depends on their device and your payment providers. - Show price next to "Add to cart": prints the current variant price inside the button, after the label. This block also uses the standard Margin controls. See Common section settings. Quantity selector The minus, number, and plus controls for the amount the customer adds. It follows any quantity rules set on the product's variants, so the minimum, maximum, and step come from the product, not from this block. Add or find it 1. In the Product information section, select the Product info block. 2. Add Quantity selector under it, in the Products group, or select the existing block to edit it. Settings - Show "Quantity" label: shows the word Quantity above the controls. Turn it off for a tighter layout. This block also uses the standard Margin controls. See Common section settings. Sticky add to cart A floating bar that appears when customers scroll past the product details. It shows the product image, title, price, and an add to cart button, so a customer can buy without scrolling back up. It submits to the same form as the main Buy buttons block, so keep both on the page. Find it The Sticky add to cart block sits in the Product information section. Select it in the section's blocks to open its settings. Its position in the block list does not change where the bar appears, since the bar floats over the page. Settings - Visibility: where the bar shows. Hidden turns it off without removing the block, All shows it everywhere, Desktop shows it on desktop only, Mobile shows it on phones only. - Button style: the look of the bar's button. Primary, Secondary, or Primary outline. - Show "Choose options": for a product with more than one variant, adds a button that sends the customer to pick a variant before adding to cart, instead of adding the default one. This block also uses the standard Color controls. See Common section settings. Tips - Keep Buy buttons on the page even when Sticky add to cart is on. The bar reuses the same form, so it needs the main button it scrolls past. - Match Button style across Buy buttons and Sticky add to cart so the floating bar reads as the same action. - Show "Choose options" only affects products with more than one variant. On single-variant products the bar always shows a direct add to cart button.

Last updated on Jun 20, 2026

Related, complementary, and recently viewed products

Related, complementary, and recently viewed products Reign offers three ways to show product recommendations. Related products and Recently viewed are sections. Complementary products is a block you add inside the product page. Each is filled by Shopify or the shopper's own activity, so none has a manual product picker. Recommended products rail Related products A section that shows items Shopify recommends for the product on the page, based on order and product data. It works only on the product template, and appears under the Products group when you click Add section. 1. In the theme editor, open a product template. 2. In the section list, click Add section. 3. Under Products, choose Related products. 4. Drag the section to where you want it on the page. The recommendations come from Shopify, so there is no list to fill. An info note in the section reads: "Dynamic recommendations use order and product information to change and improve over time." A product with no recommendations yet shows nothing, which is normal for new products and stores with little order history. The eyebrow, heading, and product cards are blocks inside the section. Select them in the section's blocks to edit the heading text or change what each card shows. Settings - Products to show: the maximum number of products in the row, from 2 to 12. Default is 4. The row becomes a swipeable slider when there are more products than fit. This section also uses the standard Color, Padding, Margin, and Visibility controls. See Common section settings. Complementary products A block that shows products that pair with the one on the page, for example an accessory or a refill. It reads from Shopify's complementary recommendations, which you set per product in the Search & Discovery app. Add it inside your product page where you want the suggestions to appear. 1. In the theme editor, open a product template. 2. Select the product section, then add a block. 3. Choose Complementary products. 4. Drag the block to where you want it in the layout. The block is connected to the parent product, so it always reflects the product being viewed. It shows products only when that product has complementary items set in Search & Discovery. With none set, the block stays empty. Settings - Heading: the label above the list. Default is "Pairs well with". Clear it to hide the label. - Products to show: the maximum number of suggestions, from 1 to 6. Default is 3. This block also uses the standard Margin controls. See Common section settings. Recently viewed A section that shows products the current shopper has already looked at, pulled from their own browser history. It works on the product, collection, and home page templates, and appears under the Products group when you click Add section. 1. In the theme editor, open a product, collection, or home page template. 2. In the section list, click Add section. 3. Under Products, choose Recently viewed. 4. Drag the section to where you want it on the page. The list is per shopper and comes from their browsing history, so a first-time visitor with no history sees nothing. The section stays hidden until there is something to show, which means it can look empty in a preview even when it works for real visitors. Settings - Products to show: the maximum number of products in the row, from 2 to 12. Default is 6. The row becomes a swipeable slider when there are more products than fit. This section also uses the standard Color, Padding, Margin, and Visibility controls. See Common section settings. Tips - To set complementary products, open the Search & Discovery app in your Shopify admin and add complementary items on each product. The block reads from there. - Recently viewed and Complementary products both depend on data that may be absent in a preview (browser history, configured pairings). An empty section in the editor does not mean it is broken. - Use Products to show to keep a recommendation row to a single line on desktop. A lower number reads as a tighter, curated set.

Last updated on Jun 20, 2026

Product features and status badges

Product features and status badges Reign gives you three blocks for the product page that show trust at a glance: a list of selling points with icons, automatic status badges, and a live stock indicator. You add each one inside the product section that holds the title, price, and buy button. For how blocks fit inside sections, see Sections, blocks, and groups. All three blocks appear in the Products group of the block picker: - Product features: a short list of selling points, each with a symbol and a label. - Status badges: automatic Sale and Sold out flags based on the product's state. - Inventory status: a stock pill that reads live inventory and shows in stock, low stock, out of stock, or pre-order. Product page with status flags under the buy buttons Add a block to the product page 1. In the theme editor, open a product page (use the top page selector to switch to Products). 2. In the section's blocks, find the product section that holds the title, price, and buy button. 3. Click Add block inside that section. 4. Pick the block you want from the Products group: Product features, Status badges, or Inventory status. 5. Drag the block to the position you want in the column. Product features A list of selling points, each a small symbol plus a line of text. The block holds one or more Feature child blocks. When you add the block it ships with three placeholder features (Add a feature, Add a benefit, and Add a detail) for you to rewrite. Block settings - Layout: how the features sit. Stacked lists them one per line. Inline flows them in a row. - Show divider: adds a separating line between the items. On by default. This block also uses the standard Margin control. See Common section settings. Each Feature Click a Feature child block to edit it, or click Add block inside Product features to add another. - Symbol: the icon shown next to the label. The list is grouped by theme (for example Nature & botanical, Craft & making, Quality & awards, Trust & assurance, Gifting & occasion) so you can pick one that fits the point you are making. - Label: the text of the feature. Defaults to Add a detail. - Link: optional. Turns the whole feature row into a link to the page you set (a size guide, a shipping policy, a materials page). Status badges Small flags that appear on the product page automatically. You do not type the text: each badge shows only when the product is in that state. If none apply, the block shows nothing. For merchant set badges driven by a product metafield, and for the store wide badge style, see Product badges in Theme settings. The Status badges block here is separate: it reads the product's real state instead of a metafield. Block settings - Show "Sale" badge: shows a sale flag when the variant has a compare-at price higher than its price. The badge includes the discount percentage when there is one. On by default. - Show "Sold out" badge: shows a sold-out flag when the product is unavailable. On by default. This block also uses the standard Margin control. See Common section settings. Inventory status A single stock pill that reads live inventory for the selected variant and shows one of four states. The state and text change as the shopper switches variants. The block notes in the editor that it shows live stock when inventory tracking is enabled in Shopify admin. For variants without tracking, it falls back to a plain in-stock or out-of-stock reading based on availability. Block settings - Low stock threshold: the count at or below which the pill switches to the low-stock state. Set it to 0 to turn the low-stock state off. Ranges from 0 to 50, default 5. - Status dot: the small indicator dot before the text. Pulsing animates it, Static keeps it still, None hides it. In stock - Label: the text shown when stock is healthy. Defaults to In stock. Low stock - Label: the text shown when stock is at or below your threshold. Use [stock] anywhere in the text to insert the remaining quantity. Defaults to Low stock · [stock] left. Out of stock - Label: the text shown when the variant is unavailable. Defaults to Out of stock. Pre-order - Label: the text shown when the variant is out of stock but set to keep selling (continue selling when out of stock, in the variant's inventory settings). Defaults to Pre-order. This block also uses the standard Margin control. See Common section settings. Tips - Status badges and Inventory status are driven by the product's real state, so leave them in place across your catalog. A product with no sale and no stock issue shows no badge at all, which is expected. - For the low-stock count to appear, the variant must use Shopify inventory tracking. Without tracking, the pill can only say in stock or out of stock, and Low stock threshold has no effect. - A Feature row only becomes clickable when you fill in its Link. Leave Link empty for a plain, non-clickable point.

Last updated on Jun 24, 2026

Product page layout and blocks

Product page layout and blocks Product information is the main section of every product page. It places the media gallery on one side and a details column on the other, and you fill the details column with blocks like the title, price, and description. On a product template it is already in place. You can also add it to another page as Featured product to show one chosen product. Product page with the media gallery and info column Open or add the section On a product template the Product information section is already there. To open it: 1. In the Shopify admin, go to Online Store > Themes and click Customize on Reign. 2. Switch the page dropdown at the top to a product. 3. In the sidebar, click Product information to open its settings. To feature a product on another page, click Add section, open the Products group, and choose Featured product. It is added as a Product information section. Then set its Product to the product you want. How the section is built The section holds two regions, listed under it in the block list: - Product media gallery: the product's images and videos. It has its own article: see Product media gallery and lightbox. - Product info: the details column, a stack of smaller blocks (title, price, description, and more). See The info column below. To change what shows in the details column, expand Product info in the sidebar. Add a block with Add block, drag a block to reorder it, or select one and remove it. Section settings These settings sit on the Product information section itself. Product - Product: the product to show. Leave it empty on a product template, where the page supplies its own product. Set it when you use the section as Featured product on another page. Ambient background A soft blurred wash behind the page, taken from the product's first image. - Show ambient background: turns the wash on. - Ambient opacity: how strong the wash is, from 1 to 50 percent. Shows when Show ambient background is on. Layout - Media position: which side the gallery sits on, Left or Right. The details column takes the other side. - Media width: how much of the row the gallery takes, from 30 to 80 percent. The details column fills the rest. - Sticky media & details: on desktop, keeps the shorter column in view while the taller one scrolls. On phones both columns stack. This section also uses the standard Color, Padding, and Margin controls. See Common section settings. The info column The details column is the Product info region. It stacks the blocks you add, in the order set in the block list. Each block is tied to the page's product, so you do not pick a product on the block itself. - Gap between blocks: the vertical space between the stacked blocks, from 8 to 64 pixels. A starting product page stacks the title, price, description, variant picker, and buy buttons. Reorder them, remove what you do not need, and add more with Add block under Product info. The blocks below have their own settings. Other product blocks have their own articles: Variant pickers and swatches, Buy buttons and sticky add to cart, and Collapsible rows. Product title The product's name, pulled from the product. - Heading level: the heading tag, H1, H2, or H3. Keep the main product page on H1 for search engines. Use H2 or H3 when the section is a secondary feature on another page. - Italicize second word: sets the second word of the title in italic for a styled look. This block also uses the standard Margin controls. See Common section settings. Price The selected variant's price, with the compare-at price and a sale style when the product is on sale. - Show compare-at price on sale: shows the original price struck through next to the sale price. - Show installments: shows pay-over-time offers (Shop Pay, Affirm, Klarna) under the price. - Show tax information: adds a tax note and, when you have one, a link to your shipping policy. This block also uses the standard Margin controls. See Common section settings. Product description The product's description, pulled from the product. You edit the text on the product in the admin, not in the theme editor. It has no settings of its own and uses the standard Margin controls. See Common section settings. Share An optional block with a share button for the product. Add it under Product info with Add block. - Button label: the text on the button (default Share). - Share method: how shoppers share the product. - Share buttons: opens a small popover of social buttons (the ones you turn on below) and a copy-link button. - Device share sheet: opens the device's own share sheet, so the shopper can send the link to any app they have. It shows on supported devices (mostly mobile). On desktop it falls back to the share buttons. - Both: the device share sheet where it is supported, with the share buttons as the fallback. - Show Facebook, Show X (Twitter), Show Pinterest, Show WhatsApp, Show copy link: pick which buttons appear in the popover. This block also uses the standard Margin controls. See Common section settings. Tips - Media width and Media position work together. Set the gallery side first, then the split, and check both on a phone where the columns stack. - Use Sticky media & details so the shorter column follows the shopper down a long product page. It applies on desktop only. - A section setting applies to every product on the same template, not to one product. If a change does not show on a product, confirm you are editing the template that product uses. - On the Share block, Both reaches the most shoppers: the familiar device share sheet on phones, the share buttons on desktop.

Last updated on Jun 24, 2026

Variant pickers and swatches

Variant pickers and swatches Reign shows variant options in two places. The Variant picker block lets a shopper choose options (size, color, material) on the product page. The Swatches block shows color choices on product cards in listings. This article covers both. For how blocks fit inside a section, see Sections, blocks, and groups. Variant picker with color swatches and sizes Variant picker (product page) The Variant picker block adds the option selector inside the product details on a product page. It reads its options from the product it sits in, so you do not pick a product for it. The block is added from Add block under the Products group. Add the block 1. Open the theme editor and go to a product page template. 2. Select the Product information section. 3. Click Add block, then choose Variant picker from the Products group. 4. Drag the block to where you want the option selector to appear in the section's blocks. Settings - Style: how options render. Pills shows each value as a tappable button. Dropdowns shows each option as a select menu. This applies to every option that is not shown as a swatch. - Use image swatches: when an option carries swatch images set in your Shopify admin, that option renders as visual swatches instead of pills or a dropdown. Turn it off to keep every option as plain pills or dropdowns. When it is on, a swatch option stays a swatch even if Style is set to Pills or Dropdowns. - Variant option name: the name of the option that gets the note below it, and where a pop-up trigger appears (a size guide, for example). Type the exact option name as it exists on the product, such as Size. - Variant option note: short text shown under the option named above. Use it for guidance like fit or care. Italic and bold are supported. Add a pop-up link (size guide) The Variant picker block accepts an Inline pop-up child block. Its trigger renders next to the option you named in Variant option name. To use it, add the Inline pop-up block inside the Variant picker block, then set Variant option name to the option you want it tied to. This block also uses the standard Margin controls. See Common section settings. Swatches (product cards) The Swatches block adds color swatches to a product card in listings, so a shopper can preview colors without opening the product. It belongs to the product card and uses the card's own product, so there is no product to pick. It shows the first product option that carries native Shopify swatches, and only when that option has more than one value. Find the block The Swatches block lives inside the product card. To reach its settings, open a section that shows product cards (a collection or a featured product grid, for example), open the card's blocks, and select Swatches. Display - Show variant image: shows the variant photo on each swatch instead of the swatch color or pattern. - Swap card image on swatch hover: when on, hovering a swatch swaps the card's main image to that variant's image. This block also uses the standard Margin controls. See Common section settings. Tips - Use image swatches and the Swatches block both rely on swatches you set up in Shopify admin, on the product option values. If swatches do not appear, confirm the option has color or image swatches assigned there first. - The Swatches block only renders when the product has an option with swatches and that option has more than one value. A product with a single color will not show a swatch row. - For the Variant option note and the pop-up link to attach, Variant option name must match the product's option name exactly.

Last updated on Jun 24, 2026

Collapsible rows

Collapsible rows A Collapsible row is an expandable section on the product page: a heading the shopper taps to reveal a panel of text. Use one for each piece of detail that does not need to stay open, like shipping, returns, materials, or care. Each row is its own block, so you add as many as you need and order them yourself. Add a collapsible row 1. In the theme editor, open a product template. 2. In the Product information section's blocks, click Add block. 3. Choose Collapsible row from the Products group. 4. Drag it into the position you want in the details column. 5. Edit its Heading and Body, then add more rows the same way. Settings - Heading: the tappable title of the row. Defaults to Shipping. - Body: the content revealed when the row opens. It is a rich text field, so you can format the text and add links. - Icon: the symbol shown next to the heading. Enter a symbol name, for example shipping-box. - Open by default: shows the row already expanded when the page loads, instead of collapsed. Off by default. This block also uses the standard Margin controls. See Common section settings. Tips - Add one row per topic (shipping, returns, materials) so shoppers scan to what they need instead of reading one long block. - Leave rows collapsed by default to keep the product page short. Turn on Open by default only for the detail you most want seen. - Each row is a separate block, so you reorder them by dragging in the section's blocks, the same as any other product block.

Last updated on Jun 24, 2026

Gift card recipient

Gift card recipient The Gift card recipient block adds the form where a shopper enters recipient details when buying a gift card: an email, an optional name and message, and a send date. The form shows only on gift card products. On every other product the block renders nothing, so you can leave it on a shared product template without it appearing on physical items. The gift card recipient form with email, name, message, and send date fields Add the block 1. In the theme editor, open the product template you use for gift cards (or your default product template). 2. In the Product information section's blocks, click Add block. 3. Choose Gift card recipient from the Products group. 4. Drag it into the position you want, above or below the buy button row. 5. Save. The block carries a note in the editor that reads "Appears only on gift card products." The recipient fields and labels come from Shopify's gift card recipient feature and your store language, so there is nothing to fill in here. Settings This block uses only the standard Margin controls, the space above and below it on the product page. See Common section settings. Tips - If you do not sell gift cards, you do not need this block. Adding it to a regular product has no effect, since it shows only on gift card products. - Place the block above the quantity and buy button row. It spans the full width there, which gives the recipient fields more room than they would have squeezed into the buy area. - To preview the form, open a gift card product in the editor preview. On any other product the block stays empty, which is expected. - The cart discount code field is a separate feature, set in Cart settings under the Cart panel.

Last updated on Jun 24, 2026