Color scheme
Use Color scheme when this product template needs a specific palette. Keep Follow global theme color scheme enabled when product pages should inherit the storewide default colors.
Product page
The product page is the main conversion template for the theme. It combines a large media gallery, variant selection, price and compare-at price messaging, quantity controls, add to cart, accelerated checkout, product description, detail tabs, breadcrumbs, support content, complementary products, and related products.
- Variant changes should update the price and the relevant media.
- Product media should be tested with images and video.
- The add-to-cart area should remain easy to reach on mobile.
Product template
Product page template
Open the Shopify theme editor and choose Default product from the page selector. The product template is built with the main Product Page section followed by product discovery sections such as Complementary products and Product Related. Merchants can reorder the discovery sections, while the Product Page section should stay at the top because it contains the purchase flow.
Best practice: Keep the main Product Page section first in the template. Add supporting
merchandising sections below it so customers can complete the purchase flow before browsing additional
recommendations.
Product section
Product Page section
The Product Page section is powered by Shopify product data and does not require merchants to choose a specific product manually. It uses the currently viewed product, selected variant, product media, collections, tags, inventory, selling plans, and gift card settings.
General and product form settings
Brand
Enable Show brand when the vendor helps customers compare products or when brand recognition is important for the catalog. Disable it for stores where vendor names are internal labels.
Accelerated checkout
Enable Show accelerated checkout buttons to display Shopify dynamic checkout buttons below the add-to-cart action when the selected variant can be purchased.
Gift cards
Enable Show gift card recipient form so gift card products can collect recipient details. This option appears only where Shopify's gift card product behavior applies.
Inventory details
Use Low stock threshold, Show SKU, Show inventory row, Show unit price, and Show product type in variant status to tune how much availability information is shown near the purchase form.
Product media
Gallery
The gallery displays the product media assigned in Shopify admin. It supports multiple product images and media items, thumbnail navigation, previous and next arrows, variant-linked media changes, and an optional zoom modal for closer inspection.
- Upload product images, videos, or 3D media in Shopify admin.
- Assign variant images where each option should open a specific product media item.
- In the Product Page section, choose whether to show gallery arrows and thumbnails.
- Select the main media shape and thumbnail size based on the store's product photography.
Best practice: Use consistent image crops across a product whenever possible. Mixed image
ratios are supported, but consistent crops make the gallery feel calmer and help customers compare variants.
Product content
Product information
Product information settings control the description area, details tab, variant metadata, tags, and typography. These options let merchants decide how much catalog data should appear on the product page without editing Liquid.
Description
Enable Show product description when the product's Shopify description should appear in the product information tabs. Keep descriptions structured with short paragraphs, lists, and clear sizing or care notes.
Details tab
Enable Show product details tab to show structured product metadata. The details tab can include product type, variant count, collection, and tags depending on the enabled settings.
Tags and limits
Enable Show tags in details when tags are customer-friendly. Use Details tag limit to prevent long tag lists from overwhelming the details tab.
Typography
Enable Product font override only when product pages need a different type style from the global theme typography. Choose Product content font to control the product page heading, form, and supporting content typography.
Navigation
Breadcrumbs
Breadcrumbs help customers understand where the product sits in the catalog. Enable Show breadcrumbs to display a path above the product layout. The section can use the current collection, the product's first collection, or up to two selected breadcrumb collections.
- Enable Show breadcrumbs in the Product Page section.
- Optional: choose up to two Breadcrumb collections to build a more specific hierarchy.
- Use dynamic sources for breadcrumb collections when each product needs its own category path.
Best practice: Use breadcrumb collections that are visible and useful to shoppers. Avoid
internal merchandising collections that customers would not understand as navigation.
Product blocks
Blocks
The Product Page section supports app blocks, custom Liquid, support cards, and custom accordions. Blocks are useful for product-specific services, delivery promises, care instructions, warranty notes, sizing guidance, or app-powered content.
Support card
Use Support card blocks for short reassurance points such as dispatch time, secure checkout, returns, or warranty coverage. The section supports up to four support cards.
Custom accordion
Use Custom accordion blocks for expandable information. Each block can use rich text or pull content from a selected page, which keeps repeated policies easier to maintain.
App and custom Liquid
Use app blocks for Shopify apps that need to appear in the product purchase flow. Use Custom liquid only for small trusted additions that cannot be handled by theme settings or app blocks.
Product recommendations
Product discovery
The default product template includes Complementary products and Product Related sections below the main Product Page section. Use these areas to help customers continue shopping after they understand the current product.
Product recommendations
Complementary products
The Complementary products section shows Shopify product recommendations with the complementary intent. It is best for accessories, add-ons, bundles, refills, matching pieces, or products that complete the item a customer is viewing.
Section style
Use Color scheme to style this recommendation row. Keep Follow global theme color scheme enabled when complementary products should use the same palette as the rest of the product template.
Typography
Enable Section font override only when this row needs its own typography. Use Section font to match the recommendation heading and cards to a campaign or product family.
Recommendations
Enable Show complementary products, then set Complementary products count between two and eight products. The section uses Shopify's complementary recommendation data for the current product.
Product card options
Enable Show brand in complementary products when vendor names help customers compare items. Use Enable quick add or Enable quick buy only when the recommended products are simple enough to buy from a card.
Heading and eyebrow
Set Complementary products heading and Complementary products eyebrow to explain why these items belong together. Short labels such as Pairs well with or Complete the set work best.
Spacing
Adjust Top padding and Bottom padding to control how tightly the row sits below the main product section or nearby recommendation sections.
Best practice: Keep quick add disabled when complementary products have many variants or
require careful selection. A clean product card link is often better than a rushed add-to-cart action.
Product recommendations
Product related
The Product Related section displays alternatives from the product's active or primary collection. It helps customers continue browsing similar items when the current product is not the perfect fit.
Section style
Use Color scheme for the related products row. Keep Follow global theme color scheme enabled when the row should match the product page's global color treatment.
Typography
Enable Section font override and choose a Section font only when the related products row needs a distinct text style from the main product page.
Related products
Enable Show related products and set Related products count between two and eight products. The section appears only when the current product has a collection with more products to show.
Product card options
Enable Show brand in related products when brand names are useful in comparison. Enable quick add supports faster cart additions, while Enable quick buy is useful when direct checkout makes sense for the catalog.
Heading and eyebrow
Use Related products eyebrow for a small contextual label. Use Related products heading for the main row title, such as You may also like.
Spacing
Adjust Top padding and Bottom padding to create enough separation from complementary products, reviews, or other product-template sections.
Best practice: Related products should feel like helpful alternatives, not a random grid.
Make sure products are assigned to useful collections so this row can surface relevant choices.