Image banner

The Image Banner Section allows you to display high-quality images with text overlays, making it ideal for showcasing promotions, brand messages, or featured collections.

1. Go to Shopify Admin > Online Store > Themes.

2. Click Customize on the active theme.

3. In the Theme Editor, click Add Section > Image Banner.

4. First Image: Upload the primary banner image.

5. Second Image: Upload an alternate banner image (optional).

6. Image Overlay Opacity: Adjust transparency to enhance text readability.

7. Banner Height: Choose Small, Medium, or Large as per requirement of the theme.

8. Desktop Content Position : Set the content position (Top, Middle ,Bottom).

9. Show container on desktop : Enable or disable toggle to structure the content in a container.

10. Desktop content alignment : Set the desktop content position with the alignment of (Left, Center, Right).

11. Color scheme: You can customize the section’s appearance by changing the text color, background color, and more using preset color options.

12. Filter container on desktop : Enable or disable filter container on desktop.

13. Card corner radius : Adjust card corner radius.

14. Mobile content alignment: Adjust content placement for mobile users. (Left, Right, Center).

15. Stack Images on Mobile: Enable to stack images vertically instead of side by side.

16. Show Container on Mobile: Display structured content on mobile screens.

17. Custom CSS: The Shopify allows you to apply unique CSS styles to specific sections, blocks, or elements within your theme.

18. Heading Block: Set a custom title and can Choose for size Small, Medium, or Large.

19. Text Block: You can add subtitles & descriptions then choose a style.

20. Buttons: Button Label Add text (e.g., "Shop Now") & Button Link Set the URL destination.

21. Use Outline Button style: Change the button to an outlined style.