Install #1 Page Builder App for FREE and get deal 6 months of Standard Plan. Hurry up! See Detail  

Header background

Kalles - Products with banner

Maria Do

Written by Maria Do

Last updated


On this page

This section allows you to show the products with banner and you can choose a grid, carousel layout for the products.


You can go to Theme sections > Add section > add Products With Banner to configure it.

1. Products with banner content

1.1. Banner Item (parent)


You can freely add the banner for the section and customize it with many design options.

  • Upload different images for desktop and mobile versions

  • Banner link and Open link in

  • Choose an effect when hover image and banner

  • Content align: You can align content to Left, Center or Right.

  • Content vertical/horizontal position: choose the position for the content inside.

  • Content padding: You can set the padding for Block content on desktop or mobile devices.

  • Background content, Border content: You can set color, opacity, style, padding for background and border content.

You can check this video:

1.2. Other blocks (Child)

This section provides you with many blocks such as: Text, HTML, Image (Child), Button, Countdown timer, Form Newsletter, Space HTML.

You can check this video to know more:

2. Product With Banner 2 settings


  • Collection position: choose position left or right for the product items

  • You can select a collection, product item design and decide to show product vendors, product countdown for the product item in the section or not.


It helps you configure the image collections with options for Image ratio, Image size and Image position, Product content align, Maximum products to show, Items per row (both on Desktop, Tablet and Mobile devices), Space horizontal items, Space vertical items

Please check this video to know more:


  • You can select Layout design for the section.

  • Turn on the Enable loop when using a carousel layout and then you can also set the Autoplay speed in second and Pause autoplay on hover

  • Turn on the Use prev next button option and you can configure the prev/next button

  • Turn on the Use page dots option and you can configure the section for the dots

Please check video below to know more:


Please follow this guideline to config Layout, Background, Margin/Padding for the section.

[Private Offer] EComposer Partner Plan

Exclusively for The4 users, when you bougth any theme from us, you can get Ecomposer - Theme Partner Plan for ZERO and start making beautiful, high-converting store pages today:

  • FREE 100% EComposer Standard plan for 6 months (save you $114)
  • Build ANY Shopify pages: Landing page, Sale Funnel page, Lead pages, & other custom pages tailored for your marketing campaigns.
  • Create advanced sections & add to your theme with ease
  • 100+ professtional, stunning designer-made templates
  • Build pages with a love drag-drop editor, no coding required

How to claim offer. Install EComposer HERE. Then open chatbox icon in EComposer dashboard and leave a message with subject "Theme name+EComposer" to upgrade for free

Cheers, The4.

We uses cookies to ensure you get the best experience on our website.