The Product page provides customers with key details such as the product name, images, price, and other important information. Vino includes 7 product page templates for customizing the product details page.
By default, every product is assigned to Vino’s Default product template.
You can also create additional product page templates with the theme editor
Customize the default product template
Open Products, then the Default product template with the page selector.
Product page settings
Click Product in the left sidebar to access the general settings for the template.
Choose the Media position to place the product image gallery on the Left or Right side of the product page. Size adjusts the overall size of the main product media. The Force image size option allows you to display the image at its natural size or crop it to a square, portrait, or landscape aspect ratio.
Allow customers to get a closer look at high-quality product images by activating the Image zoom feature.
There are three media gallery layouts you can choose from: Thumbnail below media, Thumbnail beside media, and Stacked media.
On desktop, thumbnails are smaller versions of your product’s additional media shown outside the main image. Thumbnail below media places them under the main image, while Thumbnail beside media displays them to the left. You can enable Show thumbnail arrows to add navigation arrows beside the thumbnails.
With Stacked media, all product media are shown in a single column, one on top of the other.
Use the Mobile layout option to adjust the main product image size on mobile to either full-width or 75%.
With Video style, you can set the video to autoplay silently or allow playback with sound, which begins only when the user clicks. When Video looping is enabled, the video will play on a continuous loop.
Customize product page blocks
Select and customize the individual blocks under the Product section.
There are no settings to customize for Quantity selector and Separator blocks. Click, hold, then drag the blocks to reorder their sequence and reposition them on the product page.
Buy buttons block
Enable the Show dynamic checkout button setting to allow customers to easily check out. They skip the cart and complete their payment with the checkout method displayed on the button.
Turn on the pickup availability feature to display if a product can be picked up in store. Enable Show recipient information form for gift card products to display recipient fields on gift card product pages.
Complementary products block
Use this block to show complementary products pulled from Shopify's Search & Discovery app.
Follow Shopify's guide for setting up Complementary products
Add a title for this block using the Heading field. You can adjust how many products appear by setting Max products to show and Number of products per slide. Choose the Pagination type (Dots or Arrow) and select the Product image style (Circle or Default).
Contact form block
Adds the contact form in a collapsible tab. Use the Heading field to add a title for this block. Activate the Add phone number option to add a phone number field to the contact us form.
Description block
Enable Show as tab to display the product description inside a collapsible tab.
HTML block
Use this block to insert custom code. This block supports Liquid, HTML, JavaScript, and CSS.
Inventory status block
This displays the availability status of the selected product or variant, including in stock or low inventory, and works directly with Shopify’s inventory tracking system.
Follow Shopify's guide for setting up product inventory
The Low inventory threshold determines the stock level at which the low inventory message appears. For example, if the threshold is set to 10, any product with fewer than 10 items remaining will display a low stock message like "Low stock – 5 items left."
If Show inventory transfer notice is enabled and a product or variant is out of stock with a pending inventory transfer, one of the following messages will appear:
- Back in stock {{ date }} – shown when an incoming transfer includes an expected date.
- Backordered, shipping soon – shown for out-of-stock variants with a pending transfer or when Continue selling when out of stock is enabled.
This notice only applies to products with inventory tracking enabled. Learn more about creating inventory transfers here.
Price block
When compare-at pricing is set up for a product in the admin, this block shows the sale price alongside the original price. If Saved amount is turned on in Theme settings > Products, the discount percentage or value will also be shown.
Product specs block
Shows product specifications configured through the instructions in this guide.
Product tags block
Displays product tags that were set up using the steps in this guide.
Sales point block
Adds an icon and supporting text to highlight key product details. The block includes 12 built-in icons to choose from, along with a text field for your message.
Share social media block
Shows the social sharing buttons that you’ve activated under Theme settings > Social media.
Size chart block
This block adds a size chart link to the product page. Select the page to display using the Size chart page setting. When customers click the link, the size chart opens in a popup.
If the Size chart block is placed above the Variant picker block, the link automatically appears beside the Size option group. The theme uses the size chart trigger from the language editor to identify which option group represents size. This trigger must match the size option name for the link to appear next to the option label.
Tab block
Displays content inside a collapsible tab. Use the Heading field for the tab title and Tab content for the text. You can also pull content from a page by selecting it in the Tab content from page setting.
Text block
Use this block to add text content within the product section.
Title block
Shows the product title, and you can adjust its size using the Heading size setting.
Show vendor displays the vendor name as a link, and Show SKU displays the product’s SKU. Both appear below the product title.
Trust badge block
Use this block to assign an image for your trust badge.
Variant picker block
You can choose to display product variants either as buttons or in a dropdown. Enabling Show variant labels displays the name of each option group.
When the Dynamic product options feature is turned on, sold-out variants are crossed out in the button layout and disabled in the dropdown.
Enable Color swatches to display visual swatches for variant buttons. For more information about color swatches, see this guide.
Additional product page sections
The product page template provides specialized sections that are exclusive to product pages. Select any of these sections to access and customize their individual settings.
Add more sections to your product page by selecting (+) Add section.
Add a Section to a Product Page
Full-width details
For products with longer descriptions, we recommend adding your Description and Tab blocks inside this section. Enable Optimize for readability to apply a maximum content width to this section, making the text easier to read.
Related products
Shows the related products you’ve set up through Shopify's Search & Discovery app.
Follow Shopify's guide for setting up Related products
Add a title for this section using the Heading field. Use Number of related products and Desktop products per row to set how many items are shown.
Recently viewed
The Recently viewed section shows products the customer has previously viewed. You can control how many items appear by adjusting the settings in Theme settings > Product tiles > Recently viewed.
Back to collection
Shows a “Back to collection” button on product pages that were accessed through a collection.
More from collection
Displays a list of products from the collection when the customer views a product after navigating from that collection. Use Desktop products per row to choose how many items appear in each row, and Maximum products to show to set the total number of products displayed.
More from vendor
Shows a list of products from the vendor assigned to the product. Adjust Desktop products per row to define how many items are shown per row, and use Maximum products to show to limit the total products displayed.
Product templates
Aside from the Default product template, Vino provides six additional templates designed to support different merchandising needs and give you more flexibility in how you present your products:
Follow Shopify's guide for assigning product templates to products
-
Brand story
This template puts your brand in focus by incorporating customer testimonials and related product sections.
-
Cross selling
Designed to encourage add-on purchases, this template emphasizes product recommendations and related items.
-
Gift card
This template is tailored for showcasing gift card products.
-
High variant
Use this template for products with a high number of variants (250+) or products that use the Combined Listings app. Learn more here.
-
Preorder
Ideal for products offered on preorder, this template displays a Preorder button instead of Add to cart, while still following the usual checkout process. Be sure to keep track of items assigned to this template so preorder orders can be fulfilled once inventory is available.
-
Product landing
A long-form layout suited for campaigns or single-product promotions, with room for rich content sections.