Product pages
The product page is the most configurable template in Lapels. It is a Product section, which splits a sticky media gallery against a buy box, followed by whatever supporting sections you choose to put under it.
Everything is assembled in the theme editor. Open Online Store → Themes → Customize, then use the page selector at the top to load Products → Default product.
Changing a variant updates the price, the SKU, the stock line, the quantity ceiling, the pickup record, the gallery, the share links, and the address in the browser bar, all without reloading the page.
The section stack
Section titled “The section stack”Lapels ships the product template with three sections, in this order:
- Product. The gallery, the buy box, the breadcrumbs, and the page’s structured data.
- Related products: related items. A shelf of products Shopify picks.
- Related products: complementary items. A shelf of products you pick, headed “Wear it with.”
The two shelves are the same Related products section added twice with different settings, which is why the sidebar shows them under distinct names. You can reorder, remove, or duplicate them. You can also add any other section below the Product section. Spec table, Recently viewed, Shop the look, FAQ, Custom Liquid, and the rest of the catalog are all available.
To give some products a different page, open the theme editor, switch the page selector to a product, and choose Create template from the template menu at the top. Customize it like any other, then assign it on the product itself under Products → (a product) → Theme template.
The Product section
Section titled “The Product section”The section owns what belongs to the page rather than to either column: the ground it sits on, the spacing around it, the breadcrumb trail, and the split itself.
| Setting | What it does | Default |
|---|---|---|
| Color scheme | The colors the whole page body takes. | scheme-paper |
| Section spacing | The space above and below the section, 0–200px. Device switches which pair of sliders you are editing. | 96 / 96 desktop, 56 / 56 mobile |
Three things the section does that have no setting:
- Breadcrumbs. When a visitor arrives from a collection, a Home / Collection / Product trail is drawn above the split. Reach the product from anywhere else and there is nothing to draw, so nothing appears.
- Structured data. Each product page hands search engines the product’s name, images, price, and availability in the form they read, which is what lets a search listing show a price or a rating. Nothing to configure.
- An app strip. Adding an app block to the Product section itself places it full width, under both columns. That is where a reviews widget or an upsell block belongs. A block of unknown height between the two columns would disturb how they stick.
Inside the section sit two fixed columns, Media and Information. They are permanent. You can hide either one, but you cannot reorder, duplicate, or delete them. Each has its own settings panel and its own Add block list. Click Media in the sidebar for everything about the pictures, and Information for everything about buying.
On desktop the two columns sit side by side, roughly 60/40, and the gallery sticks as the shopper scrolls past it. Choosing the Stacked gallery layout reverses that: the gallery becomes the tall column, so the buy box is the one that follows the shopper down the page. On phones the two columns stack, gallery first.
The media gallery
Section titled “The media gallery”The Media column renders every media item attached to the product: images, Shopify-hosted video, external video from YouTube or Vimeo, and 3D models. A product with no media at all draws a framed placeholder rather than leaving a blank column.
Key settings (select Media in the sidebar):
| Setting | What it does | Default |
|---|---|---|
| Layout | How the images sit against the buy box. Thumbnails at the left puts the rail in a column beside the stage. Thumbnails below runs it under the stage. Stacked drops the stage and shows every item at once, down the column. | Thumbnails at the left |
| Image ratio | The shape of the stage and thumbnails: Tall (2:3), Portrait (3:4), Square (1:1), or Landscape (4:3). Photographs of another shape are cropped to it, so pick the shape you actually photograph in. | Square (1:1) |
| Magnify on hover | A lens follows the pointer and shows the garment close up. Pointer devices only. | On |
| Magnification | How much closer the lens brings the cloth, 1.5x–4x. Past about 3x the photograph has to be larger than most product shots are, or the image goes soft. Shown only while Magnify on hover is on. | 2.4x |
| Zoom on click | Opens the photograph full size in a viewer that takes the screen. | On |
| Image ratio (under Full-size images) | The shape of the enlarged frame. Nothing is cropped to it, as the photograph is fitted whole inside. A shape that matches your photography leaves the least surrounding space. | Square (1 by 1) |
The stage and the thumbnail rail
Section titled “The stage and the thumbnail rail”One item is on the stage at a time, and the photograph that opens is the selected variant’s featured image. It is not simply the first one in the list. Changing the variant moves the stage to that variant’s photograph, and re-pressing the swatch you are already on brings it back if you have since stepped away with a thumbnail.
The thumbnail rail appears when the product has more than one media item and the layout is not Stacked. Its own previous/next arrows appear only when the rail actually overflows its column, so a dead control is never drawn. Video and 3D thumbnails carry a small badge, and each thumbnail’s accessible name says which kind of item it is and where in the run it sits.
Every thumbnail is an ordinary button, so the rail is reachable with Tab and operable with Enter or Space. Changes between photographs are drawn as a wipe. A visitor who has asked their system for reduced motion gets the change without it.
The full-size viewer
Section titled “The full-size viewer”With Zoom on click on, pressing the photograph opens a full-screen viewer: one picture at a time, previous and next buttons, a frame counter on a rule underneath, and a close button. The left and right arrow keys step it, Escape closes it, and focus returns to the photograph that opened it.
The viewer holds photographs only. A video and a 3D model have nothing to enlarge, so they are neither a frame in it nor a number in its counter.
The magnifier
Section titled “The magnifier”With Magnify on hover on, moving a pointer over the stage builds a lens that follows the cursor at the magnification you set. It is built on the first hover rather than at page load, so a visitor who never reaches for it never downloads the second copy of the photograph. It does not appear on touch devices, where there is no hover to answer.
The magnifier and the full-size viewer can both be on at once. They answer different questions, and a shop that turns both off still has a complete gallery.
3D models and AR
Section titled “3D models and AR”A product with a 3D model gets Shopify’s model viewer on the stage and a single View in your space button below the pictures. That button is revealed by Shopify’s AR runtime only on devices that can actually place a model, so a desktop visitor is never shown a control that could only fail. On a product with several models the button aims at whichever model is on the stage.
Blocks under the gallery
Section titled “Blocks under the gallery”The Media column takes blocks of its own, and they stack under the photographs. Use it for what a shopper looks at rather than reads, such as a row of care icons, a fabric note, a customer quote, or a pickup record. They travel with the pictures when the column sticks.
Available here: Heading, Text, Icon with text, Image, Video, Button, Group, Purchase options, Collapsible row, Installments banner, Pickup availability, Deal countdown, Trust badges, Testimonial, Divider, Spacer, Custom Liquid, and app blocks. The shipped template puts a Pickup availability block (in its Card style) and a Testimonial here.
The buy box
Section titled “The buy box”The Information column is the product form. Everything inside it posts with one submit, however you order it. That includes the variant picker, the quantity field, the buy buttons, and a gift card’s recipient fields.
It has a single setting of its own:
| Setting | What it does | Default |
|---|---|---|
| Show a sticky add to cart bar on mobile | A compact bar with the product name, its price, and an add-to-cart button follows the visitor once the real buy button has scrolled away. It reappears in place when the buttons scroll back. | On |
The bar shadows the Buy buttons block specifically, not the whole column, so it appears as soon as the button leaves the screen rather than waiting for the description and collapsible rows below it. Its button is bound to the same form, so it always adds the variant and the quantity currently chosen.
The block stack
Section titled “The block stack”Everything in the buy box is a block you add, remove, reorder, and configure. The shipped order is:
Vendor → Product title → Price → Variant picker → Inventory → Quantity → Buy buttons → Description → three Collapsible rows → Share
The three collapsible rows are headed “Size and fit”, “Care and repairs”, and “Shipping and returns”. Nothing about that order is fixed. Drag the blocks into whatever order suits your catalog. The picker, the quantity field, and the buy buttons stay wired together wherever you put them.
| Block | What it does | Settings |
|---|---|---|
| Product title | The product name, and the page’s only top-level heading. | Size |
| Price | The price, a struck-through compare-at price on sale, a unit price where the product carries one, and a tax note where your store prices tax-inclusive. | Size |
| Vendor | The product’s vendor, in the small label voice, linked to that vendor’s collection. Renders nothing when the product has no vendor. | Link to the vendor |
| Product meta | The vendor and the product type on one line, each linked to everything the store carries from that vendor or of that type. It is the combined alternative to a Vendor block on its own. | Show the vendor, Show the product type, Show the field names, Link each value |
| SKU | The selected variant’s SKU or barcode. Renders nothing when no variant in the product carries one. | Source, Show the label |
| Variant picker | One group per product option, as swatches or pills, plus an optional size guide link. | See below |
| Purchase options | One-time purchase or a subscription plan, when a subscriptions app has attached selling plans to the product. | None |
| Quantity | A labeled stepper capped at the variant’s remaining stock. | Label position, Expand to the full width |
| Buy buttons | Add to cart, plus the express wallet buttons. | See below |
| Description | The product description, optionally folded into a row the visitor opens. | See below |
| Inventory | In stock, low stock, or sold out, with a status dot. | See below |
| Collapsible row | A fold-out row for size, care or shipping. Use text you write here, or a page you point at. | Heading, Text, Page |
| Pickup availability | Where this variant can be collected, and how soon. | Style |
| Installments banner | Shopify’s Shop Pay Installments banner for the selected variant. | None |
| Share | Share links for the product, plus a native share or copy-link control. | See below |
| Deal countdown | A deadline with a clock, and a message that replaces it once the deadline passes. | Heading, Text, Ends on, and more |
| Trust badges | A reassurance line with an icon and the payment marks your store accepts. | Heading, Icon, Heading level |
| Icon with text | One icon beside one line, such as a fabric fact or a shipping promise. | Icon, Heading, Text |
| Testimonial | A customer quote with an optional rating and portrait. Its Plain style suits a quote standing in the buy box. | Quote, Rating, Author, Role, Style |
| Video | A video inside the buy box. | Video, URL, Poster image, Ratio, Caption, Reveal on scroll, Play the film automatically, Loop the film |
| Divider | A hairline rule between two runs of blocks. | Width, Spacing, Draw on scroll |
| Spacer | Blank vertical space, 8–160px. | Height |
| Custom Liquid | An app snippet, or Liquid of your own. | Code |
| App blocks | Any block an installed app provides. | The app’s own |
Variant picker
Section titled “Variant picker”Each product option renders as its own group with the option name above it and, when Show the selected value is on, the chosen value printed beside that name. An option renders as swatches when every one of its values carries swatch data, and as pills otherwise. It is never a mixture inside one group, since a partly-swatched option would show some values as blank boxes.
| Setting | What it does | Default |
|---|---|---|
| Show the selected value | Prints the chosen value beside the option name. | On |
| Size guide page | A page to link to under the options. Optional. | None |
| Size guide label | The wording of that link. Leave it blank and the link reads “Size guide”. | None |
Sold-out values stay in the picker rather than being hidden or removed. A shopper needs to find the size they wanted and see that it is gone. A sold-out pill takes a hatch its value still reads through. A sold-out swatch keeps its color whole and dashes the frame around it. Screen readers hear the value followed by “unavailable”.
The picker recomputes availability against the whole selection, not one option at a time. Burgundy, 42R, and Slim may each be in stock while Burgundy / 42R / Slim is not, and the picker marks that combination before the buy button goes dead. An unmarked value is always one press away from something you can buy.
Two more things it does: it updates the address in the browser bar as the choice changes, so the link a shopper copies is the colorway they are looking at, and it moves the gallery to that variant’s photograph.
For setting up color swatches, linked options, and size options in Shopify admin, see Fit, color and swatches. The Size guide page setting links out to a page. If you want a measurements table on the page itself, add a Spec table below the buy box. In its List layout, that is exactly what it draws.
Quantity
Section titled “Quantity”A labeled stepper with minus and plus buttons around a real number field.
| Setting | What it does | Default |
|---|---|---|
| Label position | Above puts the label over the field. Inline puts it beside. | Above |
| Expand to the full width | Stretches the stepper across the buy box. | Off |
The ceiling is the variant’s remaining stock, and it is re-read on every variant change. A ceiling is only applied where one is real, meaning the variant tracks inventory and is set to stop selling when out of stock. Dial past it and the field says so, rather than quietly rewriting the number.
Buy buttons
Section titled “Buy buttons”| Setting | What it does | Default |
|---|---|---|
| Show dynamic checkout buttons | Shows the express payment buttons the visitor’s browser offers, such as Shop Pay or Apple Pay. | On |
| Expand to the full width | Stretches the buttons across the buy box. | On |
The main button reads Add to cart. It reads Sold out when the variant is unavailable. It reads Unavailable when the current combination of options matches no variant, or when the product can only be bought on a subscription plan the selected variant has none of.
Where Theme settings → Cart → Cart type is set to Drawer, adding to the cart opens the cart drawer rather than leaving the page.
Description
Section titled “Description”| Setting | What it does | Default |
|---|---|---|
| Style | Body is ordinary paragraph text. Intro sets it one step larger, as an opening line. | Body |
| Fold the description away | Turns the description into a row the visitor opens. | Off |
| Open the row by default | When folded, whether the row starts open. | On |
| Row label | The wording on that row. | Description |
Inventory
Section titled “Inventory”One line with a status dot, in three states. In stock when the variant is purchasable. Low stock when inventory is tracked and the count sits at or below your threshold, with the number remaining. Sold out when it is not available. The copy states a fact rather than manufacturing urgency.
| Setting | What it does | Default |
|---|---|---|
| Low stock threshold | How few units count as low, 1–25. | 5 |
| Show how many remain | Print the remaining count in the low-stock line. | On |
| Show when the piece is in stock | Turn this off to show only the low and sold-out states. The plain “in stock” line disappears, and the two states a shopper actually needs keep working. | On |
Only variants that track inventory can read as low. An untracked variant has no number of units left to report, so Lapels does not invent one.
Pickup availability
Section titled “Pickup availability”Shows where the selected variant can be collected and how soon, as a marked summary line. Pressing it opens a side drawer listing every location, each with its standing, its address, its phone number, and a directions link.
| Setting | What it does | Default |
|---|---|---|
| Style | Card sets the record on a tinted panel with a hairline edge. Plain leaves it on the section’s own ground. | Plain |
Pickup is configured in Shopify admin, not in the theme. Set up local pickup under Settings → Shipping and delivery, and the block appears once at least one location offers it for the variant in question.
Availability is per variant as well as per location, so the block refetches the record whenever the shopper changes size or color. The shipped template places this block under the gallery in its Card style. It works equally well inside the buy box.
Four network links are ordinary links, live the moment the page is. They are X, Facebook, Pinterest, and email. On top of those, the browser’s own share sheet appears where the platform provides one, and a copy-link button where it does not.
| Setting | What it does | Default |
|---|---|---|
| Heading | The label above the buttons. Leave it empty to hide the label. | Share |
| Share on X | Show the X link. | On |
| Share on Facebook | Show the Facebook link. | On |
| Pin on Pinterest | Show the Pinterest link. | On |
| Share by email | Show the email link. | On |
Every link is rebuilt from the variant currently chosen before the press lands, so a shopper never shares the wrong colorway. It is also built from the product’s own address, so preview links and campaign tags are never passed on.
Related products
Section titled “Related products”The Related products section shows a shelf of recommendations under the buy box. It is restricted to the product template and cannot be added elsewhere.
| Setting | What it does | Default |
|---|---|---|
| Color scheme | The colors of the shelf. | scheme-paper |
| Recommendation type | Related is chosen by Shopify from your catalog and order history. Complementary is the list you set per product in Shopify’s free Search & Discovery app. | Related |
| Products to show | How many, 2–10. Fewer appear when Shopify has fewer to recommend. | 4 |
| Heading | The shelf’s title. Italicize a word and it is drawn in italic, in the scheme’s accent color. | ”Cut from the same cloth.” |
| Heading width | How many lines the heading wraps to: Narrow, Normal, Wide, or Full width. | Wide |
| Columns on desktop | Cards per row, 2–5. | 4 |
| Section spacing | The space above and below, 0–200px, with separate desktop and mobile values. | 96 / 96 desktop, 56 / 56 mobile |
The shelf loads after the page and hides itself completely when there is nothing to show. No heading, no rule, no empty strip. In the theme editor it draws a worked example instead, so you can style it before the data exists. It also takes Custom Liquid blocks and app blocks, if you want something of your own under the cards.
Recently viewed
Section titled “Recently viewed”Not on the shipped product template, but a natural addition at the foot of it. The Recently viewed section draws a shelf from what this visitor has already looked at, with recommendations and a fallback collection to fall back on when they have no history yet. The history is kept in the visitor’s own browser, holding the last 24 products and never sent to your store. So it needs no account and no consent banner of its own.
Supporting sections worth adding
Section titled “Supporting sections worth adding”Any section can go below the buy box. The ones that earn their place on a menswear product page:
- Spec table. A measurements table, with one column per measurement and one row per size.
- Text tabs. Composition, care, shipping and returns behind tabs, rather than buried in the description.
- Shop the look. The full outfit the garment was photographed in.
- Media carousel. More photography than the product gallery should hold.
- FAQ. The questions this category always attracts.
- Testimonials. Worn-in reviews, if you have real ones.
Quick view
Section titled “Quick view”Shoppers can preview a product from a product card on a collection, search, or recommendation grid without leaving the page. It opens a panel holding the product’s photographs, its title linked through to the full page, the price, a short description, the star rating where the product has review data, the same variant picker as the buy box, and an add-to-cart button over a link to the full product page.
Quick view is an overlay that is always present and is configured rather than added. See Quick view.
Accessibility and internationalization
Section titled “Accessibility and internationalization”The gallery, the viewer, the picker, the stepper, the collapsible rows, and the sticky bar are all keyboard operable with visible focus. They carry names a screen reader can read out, and they honor a visitor’s reduced-motion preference. Together that meets WCAG 2.1 AA.
The stock line, the quantity note, and any refusal from the cart are live regions, so a screen reader hears them change. The price carries its own “Regular price” and “Sale price” labels, so the two figures are never read as one number.
Every string is translatable, and the layout mirrors correctly for right-to-left languages including Arabic. See Performance and accessibility.
Related: Fit, color and swatches · Spec table · Collection & search pages · Cart drawer · Lapels support replies within 12 hours.