SectionAI is free + 20K tokens if you're a The4 customer, Free plan is available Install App  

Header background

Gecko - Banner

Mie Tran

Written by Mie Tran

Last updated

551 views

On this page


Here is an amazing section that will help you design the Banners creatively and professionally. It has never been easier to create a banner.

Untitled 2.gif

From Theme section sidebar -> Add section -> Banner Section

1. Banner content

1.1. Banner item (Parent)

11.gif

Each image represents one banner. In this block, you can adjust your Banner with many options below:

  • Use custom height for many devices: Desktop, Tablet, Mobile

  • Add image item and config the image size, image position

  • Choose an effect when hover image and banner

  • Item width: Choose a different width for the banner. With each different width, you will get different banner display results. You can refer to this video:

Untitled 3.gif
  • Content aligns: 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.

1.2. Other blocks (Child)

  • Text: You can add a text to the banner image and you can adjust text with many options like Font family, Font size, color, etc.

  • Button: This block allows you to create a button for the banner, you can customize this button with many options like add a link, style, effect, color, etc.

  • HTML: You can add HTML codes to the banner.

  • Image (Child): With this block, you can add a Image(child) inside the Image(parent) and you can adjust the Image(child) more creatively.

  • Countdown timer: This block helps you add the countdown timer and set it very easily just by adding the date countdown.

  • Newsletter: You can add a subscription form here.

  • Space HTML: This block allows you to create a separator line for this section.

You can refer to this video to learn more about these blocks:

2. How to configure the Banner Section?

2.1. HEADING OPTIONS

You can enter the Heading and Subheading, choose the design for the heading, also can choose text-align: center.

2023-01-02_17-14-46.gif

2.2. GENERAL OPTIONS

  • Space horizontal/vertical items: You can set the space between items by horizontal/vertical. Moreover, you can choose different spaces for many devices: Desktop, Tablet, Mobile.

2023-01-03_10-15-52.gif

About Design options, please follow this guideline to config Layout, Background, and Margin/Padding for the section.

🎁 Exclusive Deals for The4 Customers

SectionAI

🤖 SectionAI – Build Sections with AI

Generate Shopify sections from text or wireframes.
The4 users get +20,000 bonus tokens when verifying their theme license.

  • ✅ No-code section builder
  • ✅ Works with your The4 theme
  • ✅ Build FAQs, banners, product grids & more
🚀 Try Free – Claim Tokens
EComposer

🎉 EComposer – Free 6-Month Plan

Build landing pages, sales funnels, and more with drag & drop.
The4 users get 6 months free (save $114).

  • ✅ 100+ templates ready to use
  • ✅ Build any Shopify page
  • ✅ No coding required
🔓 Get 6 Months Free

Enjoy a free 3-day trial. Then get your first month for $1. Try Now

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