Store setup
Product pages
Set up the product gallery, the blocks beside it, the sticky add to cart bar and product recommendations.
The product page is built from the Product information section, which holds the gallery and a column of blocks, followed by Product recommendations. Every block can be reordered, hidden or removed.
Open the product template
- Open the theme editor.
- In the page menu at the top, choose Products > Default product.
- Use the preview to pick a product with variants and several images, so you can see every block working.
Gallery
| Setting | Options |
|---|---|
| Desktop gallery layout | Two column grid, One column, Thumbnails on the side, Thumbnails below |
| Media width | Small, Medium, Large |
| Stretch media to the screen edge | Removes the page margin next to the gallery |
| Enable image zoom | Opens images in a full-screen viewer |
| Loop videos | Replays product videos when they end |
On mobile, every layout becomes a swipeable gallery. When a customer picks a variant that has its own image, the gallery moves to that image.
The gallery supports images, videos, YouTube and Vimeo videos, and 3D models. Products with a 3D model get a View in your space button for AR on supported phones. Add media in Products, then open the product and use the Media card.
Gallery text
With the Two column grid layout, you can add a text tile after the images on desktop. Fill in Heading and Text under Gallery text, and pick a color scheme for the tile. Leave both empty to hide it.
Product information blocks
The default template uses these blocks, in this order: Vendor, Title, Product rating, Price, Labels, Variant picker, Popup (size guide), Inventory status, Quantity selector, Buy buttons, Pickup availability, Trust badges, Description, two Collapsible rows, Complementary products and Share.
| Block | What it shows |
|---|---|
| Text | A line of text as body, eyebrow or caption. |
| Vendor | The product vendor. |
| Title | The product title, small, medium or large. |
| Product rating | Stars from the product rating metafield. See Metafields. |
| Price | Price, compare-at price, unit price, a tax and shipping note, and Shop Pay Installments. |
| Labels | Up to three short labels, such as "Free shipping". |
| Chips | A label and a list of chips, such as skin types. |
| Back in stock form | An email form shown when the selected variant is sold out. |
| SKU | The selected variant's SKU. |
| Inventory status | In stock, low stock, out of stock or "ships later" for tracked variants. |
| Variant picker | Option buttons, a dropdown or swatches. See Variant picker. |
| Quantity selector | Quantity field, quantity rules and volume pricing. |
| Buy buttons | Subscription options, gift card recipient form, add to cart and dynamic checkout buttons. |
| Pickup availability | Whether the variant can be picked up, and where. |
| Description | The product description. |
| Collapsible row | A heading that expands to show text, or the content of a page. |
| Popup | A link that opens a page in a pop-up, such as a size guide. |
| Fit scale | A scale from "Runs small" to "Runs large" with a marker. |
| Trust badges | Up to three icons with short text. |
| Product details | Up to three values with labels, such as "3–4 drops per use". |
| Complementary products | Products chosen in Search & Discovery as pairing well with this one. |
| Share | A share button that uses the device's share menu. |
| Custom Liquid | Your own Liquid code. |
Apps can add their own blocks here too. Every block and setting is listed in the Product information reference.
Variant picker
Choose a Style for the picker:
- Buttons shows each value as a button. Unavailable values are crossed out but can still be selected.
- Dropdown shows each option as a menu.
Options with swatches always show as swatches, whichever style you choose. See Swatches.
When a customer picks a variant, the price, SKU, inventory, pickup availability and volume pricing update without a page reload, and the page address updates with the variant.
Buy buttons
- Show dynamic checkout buttons adds the customer's preferred express checkout, such as Shop Pay or Apple Pay, under Add to cart.
- Show recipient form for gift cards lets customers send a gift card to someone else on a chosen date. It appears on gift card products only.
- Subscriptions appear automatically when a product has selling plans from a subscription app. If the product can also be bought once, a one-time purchase option comes first.
Back in stock form
Add the Back in stock form block to let customers ask for an email when a sold out variant returns. It appears only when the selected variant is sold out.
Requests arrive as contact form emails at your store's contact email, tagged back-in-stock and naming the product and variant. Vellora doesn't send the "back in stock" email for you. Reply by hand, or use an app if you get many requests.
Size guide and other pop-ups
- In Online Store > Pages, create a page with your size chart.
- In the theme editor, select the Popup block, set Link label to "Size guide" and choose the page under Page.
The link stays hidden until the page has content. Use the same approach for care instructions or shipping details.
Sticky information and add to cart bar
- Keep product information visible while scrolling keeps the block column in view next to a long gallery on desktop.
- Show sticky add to cart bar shows a bar with the product image, title, price and an add to cart button once the main button scrolls out of view.
Product recommendations
The Product recommendations section below the product shows related products that Shopify picks from your sales and product data. Set Recommendation type to Related or Complementary, and set the maximum number of products and columns.
To choose recommendations yourself, use the Search & Discovery app: open Recommendations, pick a product and add related or complementary products. See the Product recommendations reference.
Alternate product templates
To give some products a different layout, such as a pre-order page:
- In the theme editor, open the page menu, choose Products and click Create template.
- Name it, base it on Default product, and change its blocks.
- In the Shopify admin, open a product and choose the new template under Theme template.
Tips
- Put the most important blocks above the buy buttons on mobile. Customers scroll past the gallery first.
- Keep Labels and Trust badges short: three to four words each.
- Fill in the image alt text for each product image in the admin. It's read aloud by screen readers.