Zeppelin StudioOpaline
  1. Docs
  2. Guides

Guide

Product page

Set up the gallery, the buying controls and the information blocks of your product pages.

Product title$49.0012345
  1. 1Gallery: stacked or carousel
  2. 2Thumbnails in a glass strip
  3. 3Title, price and text
  4. 4Variant picker with swatches
  5. 5Quantity and buy buttons
The product page: the gallery on one side, the information column on the other.

Open the product page settings#

  1. In the theme editor, choose Products > Default product in the page selector.
  2. Click Product page in the sidebar.

Under Media, Media layout offers two presentations:

LayoutHow it looksIts settings
StackedEvery image one below the other, scrolling with the page, while the information column stays in view.Media aspect ratio (Original by default), Show margins around media (on by default), Show thumbnails (off by default).
CarouselOne image at a time in a shared frame, with arrows and swipe.Media aspect ratio (Portrait 5:6 by default), Show margins around media (off by default), Show thumbnails (on by default).
Product title$49.00
The carousel layout with thumbnails: a glass strip of thumbnails and a progress bar set over the image.
  • Media aspect ratio: Original keeps each photo’s own proportions. The other ratios — portrait 5:6, 4:5, 3:4, square, landscape 16:9 — give every image the same frame and crop it to fill.
  • Show margins around media: a white border with rounded corners around the images. Off, the images run edge to edge with a thin line between them.
  • Show thumbnails: a small strip of thumbnails in liquid glass, with a progress bar. In the stacked layout it stays at the bottom of the screen while the gallery scrolls; clicking a thumbnail scrolls the page to that image.
Product title$49.00
The stacked layout with thumbnails turned on.
Good to know

Videos, YouTube and Vimeo videos and 3D models can sit in the gallery. Only one plays at a time: starting one pauses the others.

Variants and colors#

Under Variants:

  • Color swatches for variants shows round or square color chips for any option named Color, Colour, Couleur or Teinte. Choose the shape with Swatch shape.
  • Hide photos of non-selected colors shows only the photos of the chosen color.

The full set-up is in Color variants & swatches.

The information column#

The right column is made of blocks. Add, remove and reorder them under Product page in the sidebar.

BlockWhat it shows
VendorThe vendor or an eyebrow line above the title.
Product titleThe product name.
PriceThe price, the compare-at price, the unit price and, when turned on, the variant SKU.
Variant pickerThe options: swatches for colors, buttons for the others. Unavailable values are crossed out.
SubscriptionsDelivery frequencies from your subscription app, with a one-time purchase when allowed.
Buy buttonsQuantity, Add to cart and the accelerated checkout buttons.
DescriptionThe product description.
Accordion panelA collapsible panel for care, dimensions, delivery or returns.
Complementary productsProducts that go with this one, chosen in Shopify’s Search & Discovery app.
Custom LiquidYour own code.

Buying controls#

  • Show accelerated checkout buttons adds Shop Pay, Apple Pay and the other express checkouts under Add to cart.
  • Show pickup availability tells visitors whether the variant can be picked up in store.
  • Show tax and shipping note adds the tax mention under the price.
  • Show the variant SKU shows the reference of the selected variant.
Tip

When Shopify tracks the inventory of a variant and does not allow overselling, the quantity stops at what is left — minus what is already in the cart — and a message says so before anything is added.