The Product page is where customers view product information, including the product name, images, variants, and other details. Expanse provides seven product page templates for customizing the product page layout.
All products are assigned to the Default product template in Expanse unless a different template is selected.
Additional product page templates can be created through the theme editor.
Customize the default product template
In the page selector, open Products, then select the Default product template.
Product page settings
In the left sidebar, click Product to view the general settings for the template.
Use Media position to place the product image gallery on the left or right side of the product page on desktop. Size controls the overall size of the main product media. Force image size lets you display images at their natural size or crop them to a square, portrait, or landscape aspect ratio.
Enable Image zoom to let customers view high-quality product images in greater detail.
There are two media gallery layouts you can choose from: Next to media and Below media.
On desktop, thumbnails show smaller versions of additional product media outside the main image. Selecting Below media places thumbnails beneath the main image, while Next to media positions them to the left. You can enable Show thumbnail arrows to display navigation arrows. When Next to media is selected, the Thumbnail height can be set to Fixed or Flexible.
Use the Mobile layout option to set 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.
Click, hold, then drag the blocks to reorder their sequence and reposition them on the product page. Click on (+) Add block to insert additional product blocks.
There are no settings to customize for Quantity selector and Separator blocks.
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 (Default or Circle).
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 block 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. Learn more here.
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.
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 on social 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
This block displays the product title. 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
This block lets you assign an image for a trust badge, but it can also be used to display other images.
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 sections designed specifically for 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.
Full-width details
Use this section if you want product blocks to span the full page width. For products with longer descriptions, we recommend placing the Description and Tab blocks in this section. Turn on Optimize for readability to limit the content width and make the text easier to read.
Supported blocks include Description, Text, Tab, Share on social, Separator, and HTML.
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.
Use Color scheme to customize the section’s background and text colors. Color schemes are managed in Theme settings > Colors.
More from collection
Shows products from the same collection when a customer views a product they accessed 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
Along with the Default product template, Expanse provides additional templates designed to support different merchandising needs:
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. More details here.
-
Product landing
A long-form layout suited for campaigns or single-product promotions, with room for rich content sections.