Tab Products
Last updated
Last updated
Viola theme provides a section, namely "Tab products" in this section, you can show the tab products as a slideshow. You can display a maximum of 12 products in this section.
Color scheme
In this section, you can change the background color of the section using the color scheme:
Accent 1
Accent 2
Accent 3
Background 1
Background 2
Heading
Enter text to display as a title on the section.
Heading size
Following is the font size customization of the heading of the section:
Small
Medium
Large
Heading alignment
Customization of "Heading alignment" as follows:
Left
Center
Tab heading style
Enable the "View all button" the if collection has more products than shown
Button style:
Link
Outline button
Solid button
Tab position
Customization of "Tab position" as follows:
Top
Left
Enable collection tab
Enable this settings to show collection tab as a collection image with name.
Collection tab image size
Enable the "Collection tab image size" as follows:
Small
Large
Collection tab text alignment
Customization of "Collection tab text alignment" as follows:
Left
Center
Left tab content heading
Enter text to display as a left tab content heading in the section.
Left tab content description
Enter text to display as a left tab descrition in the section.
Content alignment
Customization of "Left tab content alignmnent" is as follows:
Left
Center
Right
Content position
Customization of "Content position" is as follows:
Top
Bottom
Content width
Customization of "Content width" is as follows:
35% 65%
50% 50%
Button label
Enter text to display as a left tab content button label in the section.
Button link
Enter link to display as a left tab content button link in the section.
Button style
Customization of "Left tab content button style" is as follows:
Link
Outline button
Solid button
Rows
"Maximum Row to show" is to specify how many products to show in a section. You can show a minimum of “1” and a maximum of “4” products Row.
Number of columns on desktop
"Number of columns on desktop" is to customize the column on the desktop screen. You can show a minimum of “1” and a maximum of “5” products.
Make products full width
Use "Enable Make products full width on desktop" to show the Make products full width on the desktop screen.
Enable carousel on desktop
Use "Enable carousel on desktop" to show the slider carousel on the desktop screen.
Enable arrow text
Use "EnEnable arrow text" to show the slider carousel arrow style is as follows:
Link
Outline button
Solid button
Enable arrow text
Enable checkbox for show collection slider arrow with text.
Image ratio
Product image customizations in a section are as follows:
Adapt to image
Portrait
Square
Show product type
Enable this checkbox to display the product’s "Product type."
Show product rating
Enable this checkbox to display "Product rating."
Show second image on hover
By enabling this checkbox you can “Show the second image on hover.”
Show vendor
By enabling this checkbox you can display the “Product vendor.”
Add to cart button style on desktop
Customization of the "Button style" in the Tab products section is as follows:
Link
Outline button
Solid button
Enable quick view button
Enable this checkbox to display the "Quick view button."
Display buttons inline
Enable this checkbox to display the "Buttons inline."
Quick view position on desktop
Customization of the "Quick view position" in the Tab products section is as follows:
Top right
Bottom left
Bottom right
Quick view icon
Customization of the "Quick view icon" in the Tab products section is as follows:
First icon
Second icon
Spacing around quick view on desktop
"Number of quick view on desktop" is to customize the Spacing on the quick. You can show a minimum of “0” and a maximum of “10” products.
Show color/size variants
Enabling this checkbox will show the "Show color/size variants."
Type
Enable this checkbox shows the product color and size variant.
If the type is "Dropdown," then the variant would be dropdown. And if the type is "Pills," then the variant would be Pills. The variant types are as follows:
Type:
Dropdown
Pills
Disable sold out variant
By enabling this checkbox will disabled the "Sold out variant."
Enable color swatches
By enabling this checkbox will show the "Variant color."
Number of columns on mobile
"Number of columns on mobile" is used for the customization of product columns in Mobile devices.
1 Column
2 Columns
Enable swipe on mobile
The product slides when the checkbox is activated and the product does not slide when the checkbox is not active.
To add collection to the Tab products section, click on the 'Add collection'. There are many options available , as you can see in the below points and screenshot.
Tab name
Type the name you want to display in Tab products.
Collection
Select a collection to display collection in the section.
Maximum products to show
"Maximum products to show" is to specify how many products to show in a section. You can show a minimum of “2” and a maximum of “12” products to show.
Enable "View all button" if collection has more products than shown
Enable "View all button" if collection has more products than shown.
"View all" style
Customization of the "View all" in the Tab products section is as follows:
Link
Outline button
Solid button