How to find these settings...
- Online Store
- Customize (Theme Editor)
- Top, middle dropdown
- Products
- Default product
- Product tabs
- Left column, access content blocks using black arrow next 'Product tabs'
Recommended reading
In this section...
Tag Filters
Each Content Block can be 'assigned' to a specific product or products using tags. Example: If you want to display a Size Chart specifically for Female Tank Tops, you could tag each product 'Female Tank Top' and add 'Female Tank Top' to the filter input
Options
Content/Container width
The design is based on a 12 column, 1180px wide layout. Refer to the following table to reference content widths:
Setting
Content Width
Minimum Image Width
16.5%*
180px
580px
25%*
280px
580px
33%
380px
580px
50%
580px
580px
66%
780px
880px
75%
880px
880px
87.5%*
980px
1180px
100%*
1180px
1180px
* May not apply to all sections or templates
Section
Lazy load images *
Disable for "above the fold" images. Enable for any image that is not visible on the initial page load
Background color
Choose a custom color for the background
Background gradient
Choose a custom gradient for the background
MOBILE
Top padding
Add padding to the top of the section on screens less than 768px wide. Padding is applied to the inside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px
Bottom padding
Add padding to the bottom of the section on screens less than 768px wide. Padding is applied to the inside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px
Bottom margin
Add a margin to the bottom of the section on screens less than 768px wide. Margins are applied to the outside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px
DESKTOP
Top padding
Add padding to the top of the section on screens larger than 768px wide. Padding is applied to the inside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px
Bottom padding
Add padding to the bottom of the section on screens larger than 768px wide. Padding is applied to the inside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px
Bottom margin
Add a margin to the bottom of the section on screens larger than 768px wide. Margins are applied to the outside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px
Add a bottom border
A 1px border will be added between the 'Bottom padding' and the 'Bottom margin'
* May not be available in all Sections
Content Blocks
Common tabs like return or contact information can be added to ALL products, but if your products need to display unique information per product, read about the Product Pages Unique Tabs.
Description block
Add the product description as a tab. You may opt to add the description via a block above near the product form, so you can disable the description here by unchecking 'Include description before h6 content'. Now, the h6 tabs will remain
Text block
Title
Add a title for the tab
Text block
Use a text block for basic formatting including bold, italic & linked text
Tag filter
Assign to a product via an existing product tag
Page block
Display the formatted text from a set page
Title
Add a custom title for the tab, otherwise it will default to the page title
Page
Select a page to display the content
Tag filter
Assign to a product via an existing product tag
For the demo stores, the following HTML was added to a page:
Details
<div class="row">
<h4>Get it by tomorrow</h4>
<p>Expedited shipping is available! Check for the options during checkout.</p>
<h5>Questions?</h5>
<p>Contact us and we will respond within minutes to provide you the answer</p>
<div><a href="/pages/contact" title="Contact" class="btn outline">Contact us</a></div>
</div>
<p><small><a href="/pages/contact" title="Contact">Help us improve this page</a></small></p>
</div>
Size Chart
<table>
<tbody>
<tr>
<th>Size</th>
<th>Chest</th>
<th>Waist</th>
</tr>
<tr>
<td>XL</td>
<td>46/48</td>
<td>40/42</td>
</tr>
<tr>
<td>L</td>
<td>42/44</td>
<td>36/38</td>
</tr>
<tr>
<td>M</td>
<td>38/40</td>
<td>32/34</td>
</tr>
<tr>
<td>S</td>
<td>34/36</td>
<td>28/30</td>
</tr>
</tbody>
</table>
HTML block
Title
Add a title for the tab
Custom HTML
HTML for Review apps or similar can be added. You can also use the example above to add Size Charts
Tag filter
Assign to a product via an existing product tag
* NOTE: May not be available on all sections, blocks or templates