Vodoma Documentation
Search
⌃K
Comment on page

Powerful product block 2

Display the tabs of the product list. In each tab, a big product is displayed beside the small products.

Open the existing section

  1. 1.
    From your Shopify admin, go to Online Store > Themes.
  2. 2.
    Find the theme that you want to edit and click Customize.
  3. 3.
    Click the Powerful product block 2 section.

Add a powerful product block 2 section to your home page

  1. 1.
    From your Shopify admin, go to Online Store > Themes.
  2. 2.
    Find the theme that you want to edit and click Customize.
  3. 3.
    Click Add section > Powerful product block 2 > Add.
  4. 4.
    Use the settings to customize your Powerful product block 2 section.
  5. 5.
    Click Save.

Settings

Background

  • Enable: turn on/off the background.
  • Pick a color: choose a color to set the background color. If the background is empty, the background color will be displayed.
  • Background image: pick or upload your image to display it as the background image.
  • Background size: set the size of the background image.
  • Background style: set the style of the background image.

Section gutters

  • Enable top gutter: turn on/off the space distance on the top of the section.
  • Enable bottom gutter: turn on/off the space distance on the bottom of the section.

General settings

  • Heading: add the section title.
  • Subheading: add section subtitle.
  • Use lazy loading image: turn on/off the loading image by using the lazyload technique. Recommend turning on this setting.
  • Wide display: turn on/off displaying the section in the wider layout.

Add/Edit/Remove a tab item

Scroll down to the bottom, you will see an Add tab item button, click this button to add a new tab item. Or you can click one of the available tab items to edit/remove it and drag/drop items to rearrange them.
Settings in a tab item:

1. General settings:

  • Tab title: add your text to display it as a tab title. If there is only one tab item, the tab title will not be shown.
  • Layout style: set the layout to display a big product and small products. There are 3 values for this setting: layout 1, layout 2, and layout 3. Below are examples of each layout style.
Layout 1 - 1 big product and 4 small products ( from #1 to #4 )
Layout 2 - 1 big product and 6 small products ( from #1 to #6 )
Layout 3 - 1 big product and 8 small products ( from #1 to #8 )

2. Big product:

  • Pick a product: choose a product to display it as a big product.
  • Position: set the position. Left or right of small products.
  • Other product item settings: please refer to this guide for more details.

3. Small products:

  • 8 product pickers: pick products to display them as small products. Base on the chosen layout style, the number of small products will be shown.
Layout style
Shown Small products
1
from #1 to #4
2
from #1 to #6
3
from #1 to #8
  • Other product item settings: please refer to this guide for more details.
Previous
Powerful product block
Next
Powerful product columns
Last modified 3yr ago