Product tabs
Last updated
Last updated
The Product tabs section offers an alternate layout for your product description and details. Add multiple tabs with additional information such as size or care guides, shipping and returns, or customer testimonials.
The default product template uses the Product tabs section. Use one of the alternate templates to display the product description and details in the product overview columns.
On mobile, product tabs display as collapsible rows for the most optimal layout.
The Product description tab displays the description of your product.
Customize the headings, text, and content width
To edit the product description, go to the product page in your Shopify admin.
Click Product description block to find settings
Tab heading
Change the Tab heading text from the default "Product description".
Heading size
Change the size of the heading to either Small, Medium, Large, or Extra large.
Text size
Change the size of the description to either Small, Medium, Large, or Extra large.
Content width
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 the (+) add block button and select one of three different types of product tabs: One column, Two column, or Three column.
Click a Tab block to add headings, text, and images to each column. You can also display optional Page content (eg. for a size guide).
Click Column tab block to find settings
Tab heading
Enter Tab heading text to title the tab content.
Text
Enter text to display in the tab. Alternatively, insert custom page content created in your Shopify admin.
Heading size
Change the size of the heading to either Small, Medium, Large, or Extra large.
Text size
Change the size of the text to either Small, Medium, Large, or Extra large.
Image
Upload an image for a column. There are no required dimenesions. We recommend an image with a minimum width of 100px.
Image width
Adjust the Image width between 50% to 100% of the column width.
Image position
Display the column images Above text or Below text.
Content width
For One Column tabs Select Full width to make the tab 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 vertical alignment
For Two and Three Column tabs Position tab text and images at the Top, Center, or Bottom.
Column spacing
For Two and Three Column tabs Increase the amount space for columns with longer headings and text.
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.
Pages are a Shopify feature. To learn more, see Shopify's Pages ↗ manual.
Click the Product tabs section to change the overall style and layout of the tabs.
Click Product tabs section to find settings
Tab alignment
Position the tab buttons to the Left or Center.
Tab spacing
Adjust the amount of space between the tab buttons.
Font
Use the Heading or Body font from your theme settings.
Text size
Set the text size between Small and Extra large.
Color
Set the colors for the tab background and text.
Enable animation
Choose whether to display visual effects when scrolling, hovering, or interacting with the section. See the Animation guide to learn more.
Padding
Add a margin of space around the section to either the Top and bottom, Top only, Bottom only, or set it to None.
Related links
