Image Banner
The Image Banner section allows you to display a large visual banner with customizable text and a call-to-action button. This section is ideal for promoting collections, seasonal campaigns, brand messages, or featured products. With flexible layout options and responsive images for desktop and mobile devices, the Image Banner helps create a visually engaging introduction for your store pages.
1. How to Add the Image Banner Section
- Log in to your Shopify Admin.
- Go to Online Store >> Themes.
- Click Customize on the Emoll-Apario theme.
- In the Theme Editor, select the page where you want to add the section.
- Click Add Section.
- Select Image Banner from the section list.
- Click Save to apply the changes.
2. Image Banner Settings
- Color Scheme: Select a color scheme to control the background and text colors used in the banner.
- Select Video: Instead of a static image, you can upload a video to create a dynamic banner background.
- Select Image (Desktop): Upload the main banner image that will appear on desktop screens.
- Select Image (Mobile): Upload a mobile-optimized image to ensure the banner displays correctly on smaller devices.
- Image Overlay: Adjust the overlay level to darken or tint the banner image for better text visibility.
- Image Height: Choose how tall the banner should appear.
- Banner Width:Select the width of the banner (e.g., Full Width, Container width).
- Subheading: Add a small introductory line above the main heading.
- Heading: Enter the main title displayed on the banner.
- Heading Size: Choose the heading size that best fits your layout.
- Heading Display: Choose between default or uppercase text styling.
- Text: Add supporting text such as promotional messages or collection descriptions.
- Button Label: Enter the call-to-action button text (for example: "Shop Now").
- Button Link: Select the page, product, or collection where the button should redirect visitors.
- Content Max Width: Adjust the maximum width of the content block to keep the text readable.
- Content Position: Choose where the text content appears within the banner.
- Text Alignment: Select how the text inside the banner should align (Left, Center, or Right).
Pro Tips
- Use high-resolution images to maintain a professional look.
- Keep banner text short and clear for better readability.
- Add a strong call-to-action button to encourage customers to explore your store.
- Use mobile-optimized images to ensure the banner looks good on all devices.