Product Tab
To add this section, please follow below steps:
From your Shopify admin, go to Online Store -> Themes.
Find the theme that you want to edit, and then click Customize.
Click Add section and choose "Product Tab".
Section Settings
| Setting | Description |
|---|---|
Layout | Select the width layout of the section to be either default to the body's width, 1170px, 1770px or full screen width. |
Padding Container Full Width | Determine the spacing of the left and right sides if the layout 'fullwidth' is selected. |
Spacing top - Desktop / Tablet / Mobile | Determine the spacing of the section from the top on Desktop, Tablet and Mobile. |
Spacing bottom - Desktop / Tablet / Mobile | Determine the spacing of the section from the bottom on Desktop, Tablet and Mobile. |
Layout | Select the layout for the items of the product block to be either Grid or Slider |
Title | Enter the title for the section. |
Enable Title Border? | Turn on the title border. |
Title Font Size | Determine the font size of the section title on Desktop ranging from 10px to 50px. |
Title Font Size Mobile | Determine the font size of the section title on Mobile ranging from 10px to 50px. |
Title Margin Bottom | Determine the spacing of the title from the bottom. |
Title Margin Bottom Mobile | Determine the spacing of the title from the bottom on Mobile. |
Enable Title Border | Enable the title border |
Title Border Color | Set the color of the title border. |
Enable Title Border 2 | Enable the title border style 2 if there is a banner block. |
Border Color Title 2 | Set the color for the title border style 2. |
Title Color | Set the title color for the section. |
Alignment | Select the position of the title to the left, right or center. |
Maximum Products To Show | Limit the maximum number of products to fetch. |
SETTINGS FOR GRID LAYOUT
The settings below are for grid layout only.
| Setting | Description |
|---|---|
Products Per Row | Select the number of products to show per row. |
Button Width | Fill in the desired width of the load more button. |
SETTINGS FOR SLIDER LAYOUT
The settings below are the slider layout only.
| Setting | Description |
|---|---|
Show Dots | Enable to show pagination dots. |
Show Arrows | Enable to show navigation arrows of the slider. |
Products Per Row | Select the number of products to show at a time. |
SETTINGS FOR BLOCK BANNER
| Setting | Description |
|---|---|
Position On | Select the position of the banner to the Left or to the Right of the block. |
Width | Determine the width of the banner in percentage relative to the block width. |
SETTINGS TAB
| Setting | Description |
|---|---|
Style Tab Title | Select the style of the tab title to be either: Style 1 (Tab title with background) or Style 2 (plain tab title) |
Title Spacing Bottom | Determine the spacing of the title from the bottom. |
Select Font Type | Select the font family of the title. |
Enable Separation Tab Title? | Show the separation between tab titles. |
Icon Separation With | Select the separation icon between '|' and '/' |
Color Separation | Set the color for the separation icon. |
Enable Scroll Tab Title Mobile? | Enable the tab titles to be scrollable on mobile if the width is larger than the viewport. |
Tab Font Size | Determine the font size for the tab title. |
Tab Font Size Mobile | Determine the font size for the tab title on Mobile. |
Font Weight | Select the font weight for the tab title. |
Font Weight Active | Select the font weight for the active tab title. |
Spacing Between Tab Title | Determine the spacing between the tab titles. |
Line Height | Determine the line height of the tab title. |
Line Height Mobile | Determine the line height of the tab title on Mobile. |
Border Radius | Round the title tab corners. |
Min Width Tab Item | Determine the minimum width of title tab. |
Border Width | Specify the thickness of the tab border. |
Tab Color - Tab Border Color - Tab Background | Set the text color, border color, background for the tab title. |
Last updated
