Update This template was added in v1.5.0 on Oct 27, 2022.See our Changelog and theme update guide to learn more.
The Product tabs template offers an alternate product page layout with a separate section for your product description and other information. Add multiple tabs to include product details such as size or care guides, shipping and returns, or customer testimonials.
This guide explains how to set up the with-tabs template using theme sections, with recommendations to get you started.
Quick setup
You can customize the with-tabs template in the theme editor. Start by editing the product tabs style and layout, then set up the content of the tabs.
When your template is ready, you can assign the template in the Shopify admin to make it live.
Shopify | Products are created and edited in your Shopify admin. See Shopify's Products manual ↗ to learn add and manage products.
Set up product tabs style
In the with-tabs product template, change the overall style and layout of the tabs.
Tab alignment and spacing
Font
Color
Section style
STEPS
In your theme editor (Customize):
Use the Templates selector to open Products > with-tabs.
Click on the Product tabs section to open the settings.
Set the Tab alignment to the Left or Center of the product page.
Increase or decrease the Tab spacing using the slider.
Set the Font to the Heading or Body font as selected in your theme settings.
Select the Text size of the Tab headings: either Small, Medium, Large, or Extra large.
Use the color selector to change the Background and Text color.
Choose whether to Enable animation to show visual effects when scrolling, hovering, or interacting with the section.
Select a Padding option to add space around the section to either the Top and bottom, Top only, Bottom only, or set it to None.
Click Save.
Set up product description tab
The Product description tab displays the description of your product saved in your Shopify admin. Click on the block to customize the Heading, Text size, and Content width.
STEPS
In your theme editor (Customize):
Use the Templates selector to open Products > with-tabs.
Click on the Product description block to open the settings.
(Optional.) Change the Tab heading text from the default "Product description".
Enter Heading text to display a title above the product description within the tab.
Select a Heading size: either Small, Medium, Large, or Extra large.
Select the Text size of the product description: either Small, Medium, Large, or Extra large.
To edit the product description, go to the product page in your Shopify admin.
Choose the Content width for the product description.
Select Full width to make the product description text span the width of the page.
Select Custom and adjust the Max width of text to control the width and line-breaks of the product description.
Click Save.
Add product tabs
You can add three different types of product tabs: One column, Two column, or Three column. Each Product tab includes custom headings and text, optional Page content (eg. for a size guide), and block image.
STEPS
In your theme editor (Customize):
Click on a Product tab block ("One Column", "Two Column", or "Three column") to open the settings.
Click (+) Add block to add more product tabs with 1 - 3 columns.
Enter the Tab heading text for the title of the tab (eg. "Size guide").
We recommend a short heading of 1 to 3 words.
Enter Heading text to display a title above the text within the tab.
Select a Heading size: either Small, Medium, Large, or Extra large.
Select the Text size: either Small, Medium, Large, or Extra large.
(For One Column tabs.) Choose the Content width for the tab heading and text.
Select Full width to make the text content span the width of the page.
Select Custom and adjust the Max width of text to control the width and line-breaks of the text content.
(For Two and Three Column tabs.) Set the Content vertical alignment and adjust the Column spacing.
Column spacing may need to be increase for longer tab headings and text.
Under Image, click Select image to upload an image or icon.
Adjust the Image width between 50% to 100% of the column width.
Select the Image position to display it Above text or Below text.
(Optional.) Click and hold the drag handles ⋮⋮ to rearrange the blocks:
Click Remove block in the block settings to delete a block.
Click the Eye icon to hide or unhide a block.
Click Save.
Use custom page content
Create a page for your tab content in your Shopify admin using the rich text editor. You can add tables, images, links, and other rich text to display in the product tab. Custom page content is perfect for displaying a size chart.
Shopify | Pages are a Shopify feature. To learn more, see Shopify's Pages ↗ manual.
STEPS
In your theme editor (Customize):
Click on a Product tab block to open the settings.
To display different page content (eg. different size charts) for specific products, add metafields and insert dynamic sources.
Use the Select page button to find the page you created in the Shopify admin.
Click Save.
Assign product with-tabs template
In your Shopify admin, you need to assign the with-tabs template to publish your changes to your live store. Follow the steps when you're done customizing the template.
STEPS
In your Shopify admin:
Click Products.
Click to open the product that you want to use the with-tabs template.
Click the Theme template menu and select landing to assign the template to your page.
Note: Templates can't be assigned on unpublished themes. Your changes to templates will be saved and can be assigned when you buy and publish the theme.
