Powerful product block

Display the tabs of the product list. In each tab, you can display the product list in the grid layout, slider, infinity scrolling,...

Open the existing section

1. From your Shopify admin, go to Online Store > Themes.

2. Find the theme that you want to edit and click Customize.

3. Click the Powerful product block section.

Add a powerful product block section to your home page

1. From your Shopify admin, go to Online Store > Themes.

2. Find the theme that you want to edit and click Customize.

3. Click Add section > Powerful product block > Add.

4. Use the settings to customize your Powerful product block section.

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.

• Load the first tab in ajax: by default, all tabs except the first tab load the product list in ajax. This setting helps you turn on/off to load the product list in the first tab in ajax or not. Recommend enable this setting.

Product item settings

Please refer to this guide for more details.

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. Collection settings:

• Collection: pick a collection to display its products.

• Tab Title: add your tab title. If there is only one tab item, the tab title will not be shown.

• Layout: specify the way to display products. There are 6 values for this setting:

  • Slider: display the products in a slider layout.

  • Slider + "View all" button: display the products in a slider layout and a "View all" button below the slider. Customers can click this button to go to a corresponding collection page.

  • Grid: display products in a grid layout.

  • Grid + "Load more" button: display the products in a grid layout and a "Load more" button. Customers can click this button to load more products in the specified collection. The "Limit" value is also the number of products in one time of loading.

  • Grid + "View all" button: display the products in a grid format and a "View all" button. Customers can click this button to go to a corresponding collection page.

  • Grid + infinite scroll: display the products in a grid format and a scrolling button. When this button appears in a customer's viewport, the site will load more products in the specified collection. The Limit value is also the number of products in one time of loading, the scrolling button will be hidden when your all products in the specified collection have been loaded. If your site has so many products, you can use this layout to display your all products.

View all, Load more, and scrolling buttons are only displayed if the number of products in the specified collection is greater than the Limit value.

• Limit: adjust the number of products that will be shown.

2. Slider settings:

These settings are only applied if the Layout setting is configured to Slider or Slider + "View all" button.

• Enable the center focus effect: display the product slider like the below image and the slider will be shown in one row with item size is Large.

• The number of rows: specify the number of rows in a slide. This setting will be ignored if you enable the center focus effect.

• Navigation type: specify the way to show the navigation slider. Dots or arrows.

3. Banner settings

These settings help you to display a banner and text beside the product list.

• Enable: show/hide the banner.

• Hide the banner on mobile: tick this checkbox to hide the banner on the mobile screen.

• Banner width: adjust the banner area. The width of the product list will be recalculated base on this setting.

• Position: specify the position that the banner is shown. Left or right of the product list.

• Image: pick or upload your image to show it as a banner.

• Heading text: add your text that is shown override the image.

• Heading text color: set the color for the heading text.

• Shop button text: add your text to display it in a button.

• Button URL: set the URL for the button.

• Button style: set the style of the button. You can configure the button style in Theme settings > Colors & font sizes > Style 1 button, Style 2 button, or Style 3 button.

• Text box alignment: specify the position that the text box ( include the heading text and button ) is shown in the image. There are 3 values: Top, Center, and Bottom.

• Use the background color for the text box: turn on/off the background color for the text box.

• Background color: pick a background color for the text box.

• Background opacity: adjust the background opacity for the text box.