In the theme editor: Customize›Product page›Add section›Product page
Product page
The heart of the product page: the photos, and next to them the buy panel. Every piece of the panel is a block you can move, remove or add.
Give each product its own size guide in its “Size guide” field. Products without one show the page set in the Options picker block.
Settings
Layout
- Product area width
- Slider, 1000 to 1600 pxDefault: 1280 pxUsed when "Content width" below is Standard.
- Layout on computers
- Choice: Half and half, StageDefault: Half and halfHalf and half: a square image with the thumbnails below it, and the details beside it; the whole page scrolls together. Stage: a tall image with the thumbnails inside it, and the details card over it.
- Keep the image in place while scrolling
- On or offDefault: OnOn large screens, when the details panel is taller than the image, the image stays in view while the panel scrolls.
- Panel alignment on phones and tablets
- Choice: Centered, To the sideDefault: CenteredCentered: the title, price, options and quantity sit in the middle. The description and collapsible rows stay aligned to the side, since they are long text. On desktop the panel always aligns to the side, next to the photos.
Photos
- Photo fit
- Choice: Fill the frame, Show the whole photoDefault: Fill the frame"Fill the frame" crops the photo to a square. "Show the whole photo" never crops.
- Show thumbnails
- On or offDefault: OnOn desktop and tablet: a column next to the image. On phones: see the next setting.
- Thumbnails on phones too
- On or offDefault: OnA row of thumbnails under the main image, tap to choose.
- Show arrows
- On or offDefault: On
- Continue from the last photo to the first
- On or offDefault: OnThe arrows never stop at the end.
- Show the enlarge button
- On or offDefault: On
- Autoplay video
- On or offDefault: OffGallery video plays muted and looping when it scrolls into view.
- Show a badge on the photo
- On or offDefault: OnSold out, the product's own text, or a sale.
Bottom purchase bar
- Show the purchase bar at the bottom
- On or offDefault: OnWhen the main button scrolls out of view, the frame thickens at the bottom of the screen and carries the product, the current choice, the price and Add to cart, until the end of the page. It takes the frame color. On phones it swaps with the floating menu when scrolling up.
- Floating card shape on phones
- Choice: Floating card, Rises behind the menu, The frame risesDefault: Floating cardFloating card: floats just above the bottom frame, like on computers, and the bottom menu makes room. Rises: the card rises from behind the bottom menu, and the menu stays. Frame: the frame rises across the full width, and the menu makes room. Without a bottom menu, "rises" becomes the frame. On computers it is always a floating card.
- Floating card color
- ColorEmpty: the site surface, like the search panel. Text turns light on a dark color.
- Floating card border color
- ColorA border around the floating card. Empty: a faint line in the text color.
- Small product image in the bar
- On or offDefault: OnA small image at the start of the bar, inside the row.
Page background
- Background style
- Choice: Site background, Flat color, Lit stageDefault: Site backgroundSite background: the page matches the rest of the site. Flat color: the color below. Lit stage: a stage made from the chosen color, with a soft light behind the image and behind the details. On a dark color, text, lines and buttons turn light on their own. The last two options replace the section custom colors.
- Color scheme
- Color schemeThe stage takes its background and accent from this scheme. A color chosen below overrides it.
- Background color
- ColorWith Lit stage: the tone of the stage. The default is the warm charcoal used by the stage across the site.
- Light color
- ColorThe soft light behind the image and behind the details. Empty: white.
Blocks
Blocks are the pieces inside the section. Add, remove and drag them in the editor to change the order.
App block
Apps you install can add their own block here, for example reviews or a size chart from an app.
This part has no settings of its own.
Title
General
- Show collection name above the title
- On or offDefault: On
- Emphasize the part after " | "
- On or offDefault: OnIf the product name contains " | ", the part after it is set in a heavier weight.
- Show vendor
- On or offDefault: Off
Price
General
- Show the discount percentage
- On or offDefault: OffThe discount is already shown on the photo. Turn on to show it next to the price as well.
Text
General
- Text
- TextA short description under the title. You can connect it to a product field.
Options picker
General
- Style
- Choice: Buttons, Dropdown listDefault: Buttons
- Colors
- Choice: Color circles, Dropdown listDefault: Color circlesFor a color option only. The other options follow the style above.
- Size guide page
- PageProducts with their own “Size guide” field (custom.size_guide) show that page. Otherwise this page, and if it is empty, the page from theme settings.
Quantity
General
- Position
- Choice: Next to the "Buy now" button, Own rowDefault: Next to the "Buy now" buttonNext to Buy now: the quantity sits at the start of the first button row, and Add to cart gets a full-width row below it. Own row: above the buttons, with its label. With quantity tiers, the tiers take its place.
Quantity tiers
General
- Heading
- TextEmpty: "Quantity" in the shopper's language. On desktop it is read only by screen readers.
- Label for 1 unit
- TextEmpty: the number of units ("2 units"), in the shopper's language.
- Show this tier
- On or offDefault: On
- Number of units
- Slider, 2 to 12Default: 2
- Discount
- Slider, 0 to 60 %Default: 10 %Must match your automatic discount.
- Label
- TextEmpty: the number of units ("2 units"), in the shopper's language.
- Show this tier
- On or offDefault: On
- Number of units
- Slider, 2 to 12Default: 3
- Discount
- Slider, 0 to 60 %Default: 18 %Must match your automatic discount.
- Label
- TextEmpty: the number of units ("2 units"), in the shopper's language.
- Highlight a tier
- Choice: None, Second tier, Third tierDefault: None
- Highlight text
- TextEmpty: the discount of the highlighted tier, for example "18% off".
Offer a better price for buying more. The discount is only displayed here: create a matching automatic discount in your Shopify admin so it is really charged.
Purchase options
General
- Heading
- TextEmpty: the default text.
- Show savings percentage
- On or offDefault: On
- Show plan descriptions
- On or offDefault: OnThe description comes from the subscriptions app.
- Show subscription policy link
- On or offDefault: OnShown when the store has a subscription policy (Settings, Policies).
One-time purchase and subscription options, for products sold with a subscriptions app. Without this block, products with subscriptions show the options above the add to cart button.
Buy buttons
General
- Buy now button
- On or offDefault: OnGoes straight to checkout with this product only, and keeps the cart as it is.
- Dynamic checkout buttons
- Choice: Wallet, or Shopify's "Buy it now", Wallet only, OffDefault: Wallet, or Shopify's "Buy it now"Shopify's buttons under the buy buttons. They show the shopper's wallet (Shop Pay, Apple Pay, Google Pay, PayPal) when one is enabled in your payment settings. While the Buy now button is on, Shopify's own "Buy it now" never shows, so there is only one.
- Payment shortcut buttons
- On or offDefault: Onbit, credit card and anything you added. Adds to cart and goes to checkout. The buttons themselves are in theme settings, "Express payment buttons".
- Show recipient form for gift cards
- On or offDefault: OnLets buyers send a gift card directly to someone else. While the form is shown, the Buy now button and the dynamic checkout buttons are hidden on gift cards, because Shopify checks the recipient details only when adding to cart.
Delivery and warranty line
General
- Delivery note
- TextA short line under the buy button, between two thin lines, seen before adding to the cart. For example: Delivered to your door in 8–18 business days. For a different line per product, fill the product field custom.delivery_note (Single line text; Settings, Custom data, Products): it wins over this text. If both are empty, the shipping line in the theme settings (Products) is shown, and if that is empty too, a line that follows the free shipping policy (theme settings, Free shipping).
- Warranty note
- TextOff by default: empty means no line. For a different line per product, fill the product field custom.warranty (Single line text; Settings, Custom data, Products): it wins over this text. Only write what is true for the product.
Trust row
General
Up to three short promises with an icon, and the payment icons below them. Its natural place is right under the buy button.
First item
- Icon
- Choice: Parcel (shipping), Return arrow (returns), Shield (secure payment), Headset (service), Diamond (quality), Hide this itemDefault: Parcel (shipping)
- Text
- TextEmpty: a default text that matches the icon. Parcel: the shipping promise from the free shipping policy (theme settings, Free shipping). Return arrow and shield: a short fixed text. Headset and diamond have no default text, so the item shows only with text written here. Long text wraps into two balanced lines.
Second item
- Icon
- Choice: Parcel (shipping), Return arrow (returns), Shield (secure payment), Headset (service), Diamond (quality), Hide this itemDefault: Return arrow (returns)
- Text
- TextEmpty: a default text that matches the icon. Parcel: the shipping promise from the free shipping policy (theme settings, Free shipping). Return arrow and shield: a short fixed text. Headset and diamond have no default text, so the item shows only with text written here. Long text wraps into two balanced lines.
Third item
- Icon
- Choice: Parcel (shipping), Return arrow (returns), Shield (secure payment), Headset (service), Diamond (quality), Hide this itemDefault: Shield (secure payment)
- Text
- TextEmpty: a default text that matches the icon. Parcel: the shipping promise from the free shipping policy (theme settings, Free shipping). Return arrow and shield: a short fixed text. Headset and diamond have no default text, so the item shows only with text written here. Long text wraps into two balanced lines.
Payment icons
- Show payment method icons
- On or offDefault: On
Estimated delivery
General
- Business days, at least
- Slider, 0 to 30Default: 11
- Business days, at most
- Slider, 0 to 45Default: 18
- Days that are not business days
- Choice: Friday and Saturday, Saturday and Sunday, None, every day countsDefault: Friday and Saturday
- Main line
- Text[from] and [to] are replaced with dates. Empty: "Order today, arrives between [from] and [to]"
- Second line
- TextEmpty: the range of days, to your door.
- Show a calendar icon
- On or offDefault: On
Calculates the date range from today, in business days. Dates are calculated in the shopper’s browser, so they are always right for the day of the visit.
WhatsApp question
General
- Question
- TextEmpty: the default text.
- Link text
- TextEmpty: the default text.
- Ready message
- Text[product] is replaced with the product name. Empty: "Hi, I have a question about [product]"
- Add the product link to the message
- On or offDefault: On
A line that opens a WhatsApp chat with a ready message. The number comes from the theme settings, under social media. Until a number is added, the line leads to the store’s contact page.
Description
This part has no settings of its own.
Collapsible row
General
- Heading
- Text
- What the row shows
- Choice: Text or page, Specifications from the product, List with iconsDefault: Text or page
- Content
- Text
- Content from a page
- PageShown after the content above.
- Product specifications field
- TextNamespace and key, for example custom.specs. One detail per line in the field: "Name: value". Products without the field do not show the row.
- Lines
- TextOne sentence per line. The icon is chosen from the words: shipping, return, support, secure or payment (also in Hebrew). Other lines get a shield with a check.
- Links to the shipping and refund policies
- On or offDefault: On
Offer bubble
General
- Icon
- Choice: Lightning bolt, Gift, Sparkle, Timer, Heart, Shield with a check mark, No iconDefault: Lightning bolt
- Heading
- TextEmpty: "A special offer", in the visitor's language.
- Offer line
- TextFor example "Get $20 off when you spend $200 or more". Without a line the bubble doesn't show.
- Products
- ProductsThe bubble shows only on the products chosen here. Empty: on every product that uses this template.
Countdown
General
- Offer line
- TextFor example "20% off". Empty: the variant's discount percentage, if it has a compare-at price.
- Short text
- TextShown next to the offer line. Empty: "Limited time", in the visitor's language.
- Products
- ProductsThe bar shows only on the products chosen here. Empty: it doesn't show anywhere. Use it for a real sale with a real end date.
Timer
- End date and time
- TextYear-month-day followed by hour:minute, for example 2026-10-20 18:00, in the store's time zone. Empty or invalid: the bar doesn't show in your store, and the editor shows a note with the date as the store understood it.
- Show seconds
- On or offDefault: OnVisitors who prefer reduced motion never see seconds, and the timer updates once a minute.
- When time runs out
- Choice: Show an offer ended message, The bar disappearsDefault: The bar disappears
- Ended message
- TextEmpty: "This offer has ended. Thank you for your interest.", in the visitor's language.
Background
- Background color
- ColorEmpty: the store's ink. The lit stage is made from this color.
- Background style
- Choice: Flat color, Lit stageDefault: Lit stageLit stage: a soft light from above that fades toward the bottom, made from the chosen color. On a light color the top turns white; on a dark color it becomes a dark stage.
- Light color
- ColorThe soft light from the top center. Empty: white.
- Text color
- ColorEmpty: automatic. Light on a dark background, dark on a light one.
Custom Liquid
General
- Custom Liquid
- CodeFor advanced customization and app snippets.
Something here doesn’t match what you see in your editor? Tell us and we will fix the guide.
