Home Product Pages

Product Pages

• 13 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. 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 Layout Desktop sets how the media is arranged on larger screens. This choice does not change the mobile slider. The default is Slider. - 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. - Grid: images arranged in a regular grid. - Highlight: one large lead image, with the rest in a column beside it on wide screens or paired beneath it on narrower ones. Mobile sets how a shopper moves between images on a phone. Dots shows small markers under the image. Thumbnails shows a row of thumbnail images under the main one. The default is Thumbnails. Change image on appears only when Desktop is Thumbnails left or Thumbnails below. It sets whether a thumbnail changes the main image on Hover or Click. Media Aspect ratio sets the shape of the media frame. The default is Auto. - Auto follows the media's own proportions. - Portrait, Square, and Landscape use the same frame for every image. Fit height to screen keeps the media within the height of the screen. It is off by default. With Auto, the layouts that show one image at a time (Slider, Thumbnails left, Thumbnails below, and the lead image in Highlight) grow the image to fill that height and trim the overflow. Every other case narrows the frame instead, so nothing is cropped. Highlight always behaves as if Fit height to screen were on when the product has more than one image, because the column beside the lead takes the width the lead gives up. With a single image the setting decides. Media fit appears when Aspect ratio is not Auto, or when Fit height to screen is on. Crop fills the frame and trims overflow, while Fit keeps the whole image visible. Open lightbox on click lets a shopper click the main image to open a full-screen view at a larger size. It is on by default. It also turns on the pointer ring on desktop: over the middle of the image the cursor becomes a magnifier that opens the lightbox, and over the left or right edge it becomes a back or forward arrow that steps the slider. The edge arrows need a slider layout (Slider, Thumbnails left, or Thumbnails below) and more than one visible image, since Stacked, Grid, and Highlight already show everything at once. Turn the setting off to remove the enlarged view and the pointer ring together. Video These settings apply to product videos in the gallery. - Enable autoplay: plays videos on their own. Off by default. Its note reads Muted, plays inline., so autoplay videos always start without sound. With it on, Hide controls appears, which removes the native play, pause, and volume controls. A small pause button stays in the corner of the video, so a shopper can always stop a video that started on its own. - Enable video looping: restarts each video when it reaches the end. On by default. Variant filter - Group media by variant: shows only the images that match the selected variant, so choosing a size or a flavor narrows the gallery to that variant's photos. Off by default. 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, for example @size:500 ml). The match ignores case, images with no tag always stay visible, and an image tagged for more than one option must match all of them. The filter has no effect on a product with no options, so those galleries show everything either way. 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 Fit if cropping cuts off part of a product.

Last updated on Sep 09, 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 unless a listing overrides it. 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's media gallery and its info column, as your product template builds them. - Switch variants (for example a size or a flavor). - Add the item to the cart. The modal closes once the item is added. - Open the full product page with the View full details link at the top of the modal. The modal loads the real product page and shows its Product information section, so variant switching and add to cart behave the way they do on the full page. A few parts are left out because they do not belong in a modal: the section's Header region, Sticky add to cart, Product features, Complementary products, any pop-up blocks, and the click-to-enlarge lightbox. To check every detail, the shopper follows View full details. 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. Override it on one listing The two settings above are store wide. To change them for a single listing, select the Product card block inside that section, turn off Inherit global theme settings, and the same Show quick add button and Show quick add on mobile controls appear on the card itself. Only that section's cards follow them. See Product cards. 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. - 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. - Because the modal reads the product template, anything you add to the info column shows up in quick view too. Keep that column short enough to read in a modal.

Last updated on Aug 15, 2026

Buy buttons and sticky add to cart

Buy buttons and sticky add to cart Three parts of the Product information section drive purchases. 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. The first two are blocks you add inside Details. The third is one of the section's fixed blocks, already there. All three read the product on the page, so there is nothing to pick or connect. 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 Details 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 (the default), 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. On by default. - Show price next to "Add to cart": prints the current variant price inside the button, after the label. On by default. 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 Details 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. On by default. 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 Sticky add to cart is one of the Product information section's fixed blocks, not one you add. It is always in the section's block list on a product page. Select it there to open its settings. Its position in that list does not change where the bar appears, since the bar floats over the page. It renders on product pages only, so it is absent when the section is used as Featured product on another page. Settings - Visibility: where the bar shows. All (the default) shows it everywhere, Desktop shows it on desktop only, and Mobile shows it on phones only. If the bar never appears, check this first. To remove the bar altogether, hide the block in the section's block list. - Button style: the look of the bar's button. Primary (the default), Secondary, Primary outline, or Secondary outline. - Show "Choose options": only for a product with more than one variant. When the selected variant cannot be added (sold out or unavailable), the disabled add to cart button in the bar is replaced by a Choose options button that scrolls the page to the Variant picker. Off by default. This block also uses the standard Color controls. See Common section settings. Keep the purchase path working - 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. - The bar's button mirrors the main one: it goes into its loading state, and it disables itself, whenever the main add to cart button does.

Last updated on Sep 09, 2026

Related, complementary, and recently viewed products

Related, complementary, and recently viewed products The theme 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. 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 - Layout: where the heading sits relative to the cards. Content beside products puts the heading in a column next to the slider, which is the default. Content above products stacks the heading over a full-width row. - Products to show: the maximum number of products in the row, from 2 to 10. Default is 6. The row becomes a swipeable slider when there are more products than fit. - Content width: how much of the row the heading column takes, from 20 to 40 percent. Default is 24. Available with Content beside products. - Gap: the space between the heading column and the products, from 24 to 120 pixels. Default is 40. Available with Content beside products. 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 Sep 09, 2026

Product features and status badges

Product features and status badges The theme 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 Details, the info column of the Product information section. 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 drawing 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. 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 list, select Product information, then expand Details under it. 3. Click Add block inside Details. 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 drawing 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 (the default) 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. - Type: the drawing shown next to the label. Pastel (the default) is line work over a soft color wash that keeps its own color, Ink is a line drawing in the color scheme's text color, and Custom is a file you upload. Whichever you pick, the drawing keeps the same height as the rest of the row. - Illustration: the drawing itself. The list is grouped by theme (for example Nature & botanical, Landscape & origin, Craft & making, Quality & awards, Care & ethics, Materials & texture, Time & heritage, Gifting & occasion) so you can pick one that fits the point you are making. Its note links to a gallery where you can preview every one before you choose. - Image: for Custom, the file you upload. Until you pick one the feature shows a placeholder at the right height. - 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 storage guide, a shipping policy, a sourcing 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 (the default) 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 Sep 09, 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. 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 your theme. 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 is built from four fixed blocks. You cannot add or remove them, only fill them. They are listed under the section in the sidebar: - Header: a content area above the two columns. The shipped product templates put the breadcrumbs here. It accepts any content block. - Product media gallery: the product's images and videos. It has its own article: see Product media gallery and lightbox. - Details: the details column, a stack of smaller blocks (title, price, description, and more). See The info column below. - Sticky add to cart: the floating buy bar. It renders on a product page only, so it is absent when you use this section as Featured product on another page. See Buy buttons and sticky add to cart. To change what shows in the details column, expand Details 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. On by default. - 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 and details: on desktop, keeps the shorter column in view while the taller one scrolls. On by default. 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 Details block. It stacks the blocks you add inside it, in the order set in the block list. The product blocks read the page's product on their own, so you never pick a product on the block itself. - Gap between blocks: the vertical space between the stacked blocks, from 8 to 64 pixels. Defaults to 28. Added fresh as Featured product, the details column stacks the product eyebrow, title, price, description, variant picker, and buy buttons. Reorder them, remove what you do not need, and add more with Add block under Details. Any content block works there, not only the product ones, so a rich text note or an image sits in the column alongside the price. 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, Collapsible rows, Product features and status badges, Volume pricing, and the smaller info blocks (SKU, tags, eyebrow, rating, pickup, disclosures) in More product info blocks. 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 unit price: shows the unit price (for example per 100 ml) for products sold by weight or volume. - 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 Details 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. - 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 Sep 09, 2026

Variant pickers and swatches

Variant pickers and swatches The theme shows variant options in two places. The Variant picker block lets a shopper choose options (size, flavor, format) on the product page. The Swatches block shows the same choices as small tiles on product cards in listings. This article covers both. For how blocks fit inside a section, see Sections, blocks, and groups. 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. In Product information, expand Details. 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 (the default) 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. On by default. 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 sizing guide, for example). Type the exact option name as it exists on the product. Prefilled with Size. - Variant option note: short text shown under the option named above. Use it for guidance like storage, serving, or how the sizes compare. Italic and bold are supported. Add a pop-up link The Variant picker block accepts an Inline pop-up child block. Its trigger renders in the heading of the option you named in Variant option name, and nowhere else. To use it, select Variant picker, click Add block, and choose Inline pop-up. Set its Link label, then put the content inside the Pop-up dialog block nested under it. For a full measurements guide (a table with a unit toggle) built this way, see Add a size chart. This block also uses the standard Margin controls. See Common section settings. Swatches (product cards) The Swatches block adds a row of swatches to a product card in listings, so a shopper can see the choices 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 one option only: the first product option whose values carry native Shopify swatches. If no option has swatches, the block renders nothing. 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. Off by default. - Swap card image on swatch hover: hovering a swatch swaps the card's main image to that variant's image. On by default. This block also uses the standard Margin controls. See Common section settings. If swatches do not appear - 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 reads the first option with swatches, so if a product has two swatched options only the first one shows on the card. Order the product's options in the admin to control which that is. - 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 Aug 15, 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, ingredients, or storage. 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 Product information, expand Details and 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 icon shown next to the heading, or None. The dropdown is grouped: Shipping & delivery, Payments, Trust & guarantees, Service & contact, Products & services, Sustainability, Materials & care, Sizing, Seasonal & promotions, Store & location, and General. Its note links to a gallery where you can preview every icon before you choose. Defaults to 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, ingredients) 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. - The same detail written once on a page, then linked from a row's Body, beats repeating it on every product template.

Last updated on Aug 15, 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. Before you start: create a gift card product Gift cards are a Shopify product type, not a theme feature. Before this block has anything to attach to, create a gift card product in the Shopify admin under Products (add a product and mark it as a gift card, or use the Gift cards area). That product uses your gift card template, and this block belongs on that template. The denominations, delivery email, and balance are all handled by Shopify. The Gift card recipient block is the piece: the form that lets a buyer send the card to someone else. Add the block The default product template that ships with the theme already has this block in place, above the buy button row, so on a fresh install there is usually nothing to add. Add it yourself when your gift cards use a template of their own: 1. In the theme editor, open the product template you use for gift cards (or your default product template). 2. In Product information, expand Details and 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. The fields submit with the product's add to cart form, so keep the Buy buttons block on the same template. Without it there is no form for the recipient details to travel on. 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 Aug 15, 2026

More product info blocks

More product info blocks Beyond the title, price, and description covered in Product page layout and blocks, the product info column accepts a set of smaller blocks. Most of them read the page's product automatically (the editor marks them "Connected to the parent product"), so there is nothing to pick: add the block, place it in the stack, and it fills itself. You add each one the same way: select the Product information section, expand Details, click Add block, and pick the block from the Products group. Every block here also uses the standard Margin controls. See Common section settings. Product eyebrow A short label above the title, in small type: the product's category, vendor, or your own text. - Text source: where the label comes from. Collection or type (auto), the default, uses the collection the shopper came from and falls back to the product's type when there is none. Collection title, Product type, and Vendor each pin one source. Custom text shows the text you type below. - Custom text: the label to show. Appears only when Text source is Custom text. - Uppercase: sets the label in capitals. On by default. Collection title and the automatic mode both depend on how the shopper arrived. A shopper who lands on the product from search or a direct link has no collection, so those sources fall back or stay empty. Product type and Vendor always read the product itself. Product rating The product's star rating with an optional average and review count. The block reads the rating your product reviews app saves on the product, so it needs a reviews app to show anything. - Show average rating: prints the numeric average next to the stars. On by default. - Show review count: prints how many reviews the rating is based on. On by default. - Reviews link: clicking the rating scrolls to your reviews section. Enter its anchor, for example #reviews. Prefilled with #reviews, and it falls back to that if you clear it. SKU The SKU of the selected variant. When the shopper switches variants, the SKU follows. - Prefix: the text printed before the number. The default is "SKU ". Clear it to show the bare value. Product tags The product's tags as a row of small labels. - Max tags: how many tags to show at most, from 1 to 20. Defaults to 6. - Link to search: makes each tag clickable, leading to the search results for that tag. Off by default. Pickup availability Shows whether the selected variant can be picked up at your locations. The block reads the variant's stock at every location where you have turned local pickup on, so the line changes as the shopper switches variants. The first line covers your first pickup location. When the variant is in stock there it reads Pickup available at that location, followed by the ready time if you have set one. When the variant is out of stock there it reads Pickup currently unavailable at that location. Either way the line stays visible, so a shopper is told rather than left guessing. Under the line sits a button. With one pickup location it reads View store information. With more it reads Check availability at other stores and counts the rest. Either way it opens a panel listing every pickup location with its status (Available with the ready time, or Currently unavailable), its address, and its phone number when you have one on the location. The block needs Shopify pickup locations: set them up in your Shopify admin under Settings, then Locations, and turn on local pickup for each one. With no pickup locations configured, the block stays empty. Its editor note reads "Requires Shopify pickup locations." Line item property A field the shopper fills in before adding to cart, saved on the cart line and on the order: a gift message, an engraving, a delivery date. Add one block per field. - Type: the kind of field. Text (the default), Dropdown, Radio buttons, or Checkbox. - Label: the field's name, and the name the value is saved under. Give each property block a different label, since that is what keeps them apart. - Rich text label: appears for Checkbox only. Replaces the plain label with formatted text, so you can link out to terms. Label must still hold a unique value. - Show property value to customer in cart and order details: on by default. Turn it off and the value still reaches you in the Shopify admin, but the shopper does not see it in the cart or on the order. - Make text box larger: appears for Text only. Swaps the single line for a multi-line box. - Minimum length and Maximum length: character limits for a Text field. The minimum appears only when Required is on. - Required: appears for Text and Checkbox. The shopper cannot add to cart without it. - Options: appears for Dropdown and Radio buttons. Type the choices separated by commas. The block's editor note warns that a property only works where the block is shown. The bag button on a product card adds straight to the cart without it, so a required property can be skipped that way. Quick view is fine, since it loads the product page's own info column. To close the gap entirely, turn off the quick add button: see Quick view. Product disclosures A heading followed by one expandable row per safety and compliance disclosure saved on the product. The content comes from Shopify's own product safety fields (the EU product compliance data you fill in on the product in the admin), not from this block. Each disclosure's title stays visible; the detail opens on click. Only disclosures you have set to appear on the product page are shown. A product with none renders nothing on the storefront, though the heading stays visible in the theme editor so you can still select the block. - Heading: the title above the rows. Defaults to Product disclosures. - Open by default: shows the rows already expanded when the page loads. Off by default. Follow on Shop A button that lets shoppers follow your store in the Shop app, so your new products and offers show in their feed. For the button to be visible, the Shop channel must be installed and Shop Pay activated. - Alignment: Left (the default), Center, or Right. Tips - These blocks stay empty rather than break when their data is missing: no reviews app means no rating, no tags means no tag row, no pickup locations means no pickup note. If a block seems to do nothing, check the data source first. - Product eyebrow on Collection or type (auto) is the safe default for a catalog with mixed categorization; pin a single source only when every product has that field filled. - Keep Max tags low. Tags are navigation hints, not content; three to five read well above or below the description.

Last updated on Aug 15, 2026

Volume pricing (B2B quantity breaks)

Volume pricing (B2B quantity breaks) Volume pricing shows a customer a cheaper per-unit price as they buy more: 1+ at full price, 6+ for less, 12+ for less again. The theme displays these tiers on the product page and in the cart. They come from Shopify's B2B pricing, so they appear only for a signed-in company customer whose catalog has volume pricing for the product. A regular shopper sees nothing, which is expected. Set the tiers in Shopify The prices themselves are a Shopify feature, not a theme setting. You set them in the Shopify admin under Products, then Catalogs, on a B2B catalog: open Manage products and pricing and add the quantity breaks (a quantity and its price) per variant. Quantity rules (minimum, maximum, and increment) live in the same place. The theme reads whatever you set there. Volume pricing needs a Shopify plan that includes B2B. The Volume pricing block On the product page the tiers render in a Volume pricing block inside the Details region of the Product information section. Every product template that ships with the theme already has this block in place, just above the quantity and buy button row, so there is usually nothing to add. To add or move it: in the product template, open Product information, expand Details, click Add block, and choose Volume pricing from the Products group. Drag it to sit where you want the tiers, usually near the price or the add to cart button. The block has no content to fill in. The tiers, prices, and the active row all come from the catalog. Its editor note reads "Tiers appear for signed-in B2B customers whose catalog includes volume pricing for this product." Its only control is the standard Margin. See Common section settings. The first row is the variant's own quantity rule minimum at the regular price, and the catalog's breaks follow. The block lists three rows and puts the rest behind a Show more toggle. One row is marked as active, and the mark accounts for what the customer already has of that variant in the cart. Because the tiers are B2B only, the block is empty in a normal storefront preview. In the theme editor it shows three sample rows (a full-price row, a 6+ row, and a 12+ row) built from the product's own price, so you can see the layout and place the block while you work. Those numbers are a placeholder, not your catalog. Live, the block fills with real catalog prices for a signed-in company customer and collapses to nothing for everyone else. In the cart The cart drawer and the cart page carry the same tiers per line. A line whose variant has quantity breaks gets a small percent button next to it. Clicking it opens a panel with the full tier table and a check mark on the row that matches the line's current quantity, so the mark moves as the customer changes the quantity. There is no block to add and nothing to configure. On product cards When a product has quantity breaks in the signed-in customer's catalog, its cards in listings show a short Volume pricing available note under the price. This is automatic and has no setting. Quantity selector The Quantity selector block already follows the product's quantity rules, so the minimum, maximum, and step a customer can pick match what you set in the catalog. Volume pricing and quantity rules are separate settings in Shopify: you can use either on its own or both together. Tips - If tiers do not show for a real B2B customer, check the catalog assigned to their company has volume pricing for that specific product and variant. The block only reflects what the catalog holds. - Test with a real company customer account. Previewing as yourself, or in the theme editor, can never show live tiers, so an empty block there is not a fault.

Last updated on Aug 15, 2026

Add a size chart

Add a size chart The theme shows a size chart as a pop-up that a shopper opens from a link next to the option they are choosing. You build it from blocks the theme already has, so there is nothing to install. The same build works for any measurements table: jar and bottle volumes, net weights, portions per pack, or a garment size run. Add the link that opens the pop-up The link lives on the Variant picker block, in the heading of the option you name: 1. In the theme editor, open your product template, expand Details under Product information, and select the Variant picker block. 2. Set Variant option name to the option the link should sit beside, spelled exactly as it is on the product (for example Size). It is prefilled with Size. 3. With Variant picker still selected, click Add block and choose Inline pop-up. 4. Set its Link label to something like "Size guide". It is prefilled with "Learn more". The trigger only renders next to the option named in Variant option name. If the name does not match an option on the product, the link does not appear. See Variant pickers and swatches for the rest of that block. Put the chart in the pop-up The Inline pop-up block holds a Pop-up dialog block. That is where the content goes, not on Inline pop-up itself. Expand Inline pop-up, select Pop-up dialog, and use its Add block button. Set the dialog's Size to Large if your table is wide. Its Title is read by screen readers only, so add a visible heading as a block inside if you want one. For the table itself you have two ways: - A page with your table. Create a page under Online Store > Pages and put your measurements table on it. Then add a Page block inside Pop-up dialog and point it at that page. This keeps the numbers as real text, which reads better on a phone and can be translated. - An image. Save your chart as a graphic and add an Image block inside Pop-up dialog. Simplest, but scale it so the numbers stay readable on a phone. Add a unit toggle To let shoppers switch between metric and imperial, add a Tabs block inside Pop-up dialog. It arrives with two tabs. Select each Tab, set its Tab name (for example "ml" and "fl oz", or "CM" and "IN"), and put the matching table inside it as a Page or Image block. The tab bar becomes the unit toggle. Tips - The pop-up sits on the product template, so it shows on every product that uses that template. If only part of your catalog needs a chart, give those products their own template. - Keep one page per unit and per product family. A jar volume chart and a loaf weight chart are different pages, pointed at from each product's own template. - Quick view leaves pop-up blocks out of the modal, so a shopper reaches the chart from the full product page. See Quick view.

Last updated on Aug 15, 2026

Quick order list

Quick order list Quick order list shows every variant of a product in one table, each with a quantity stepper, so a customer can set amounts across many variants and add them all in a single step. It suits wholesale, bulk, and any product where people buy several variants at once (sizes, flavors, pack counts). What it shows The table lists one row per variant, with four columns: - Variant: the variant name, with an optional image and SKU. - Unit price: the per-item price. Hidden on phones to save room. - Quantity: a stepper to set how many of that variant to order. - Total: the line total for that variant, which updates as the quantity changes. Below the table, a summary shows how many items are selected and an Estimated total, next to an Add all to cart button that adds every filled row in one step. If a variant has quantity rules or B2B quantity price breaks set in Shopify, the table respects them: the stepper follows the minimum, maximum, and increment, and the per-unit price reflects the break for the quantity entered. See Volume pricing for how the breaks are set. Add the block Quick order list is a block, so you place it inside a section rather than adding it as a section of its own. 1. In the theme editor, open a product template (or Default product). 2. Select the Product information section, then its Details block, which holds the title, price, and buy buttons. 3. Click Add block and open the Products group. 4. Choose Quick order list. 5. Drag it in the block list to where you want the table. The block reads the product it sits inside, so it also works in a Featured product section and in quick view. On a page with no product, or a product with no variants, it renders nothing at all, which is why it looks empty on a general page. To put the table below the product information rather than beside it, add a section under Product information and place the block in there. Settings Select the block to set its options: - Show variant image: shows a small thumbnail next to each variant name. On by default. - Show SKU: shows each variant's SKU under its name. Off by default. The block also carries its own Margin controls, so you can space the table away from what sits above and below it. To put a heading above the table, add a heading block next to it in the same section. The table has no heading of its own. Tips - The table earns its place on products with several variants. On a product with a single variant it shows one row, which a normal add to cart button handles just as well. - Pair it with quantity rules or Volume pricing in Shopify for wholesale ordering: customers see the per-unit break and order in the required increments from the same table. - The table lists every variant of the product, with no page limit. On a product with a very long variant list, consider whether shoppers are better served by the normal variant pickers.

Last updated on Aug 15, 2026