Image Banner

To update or set up the images and text for the Image Banner section:

Steps:

1. Access the Image Banner Section

   • Go to Online Store > Customize in your Shopify admin to open the theme editor.

   • Locate and select Image Banner under Template.

   • If this section is not already added, click Add section and add Image Banner.

2. Set up Images

   • First Image: Click Select image to upload or choose an image from your library for the main desktop display.

   • Mobile Image: Add a specific image for mobile view by selecting Mobile image to ensure optimized appearance on smaller screens.

   • Second Image (Optional): Add a Second image to display alongside the First image, creating a side-by-side layout if both images are uploaded.

3. Add a Link

   • In Image URL, paste a link if you want to make the banner clickable and direct users to a specific page, product, collection or external website.

4. Adjust Banner Height

   • Under Banner height, select from options such as Adapt to first image to let the banner height adjust based on the dimensions of your primary image.

5. Positioning and Alignment

   • Desktop Content Position: Choose where text and buttons appear on the banner, such as Top, Middle, or Bottom.

   • Desktop Content Alignment: Set alignment to Left, Center, or Right to control the horizontal layout.

6. Set Color Schemes

   • Color Scheme: Choose a color scheme that matches your brand under Color scheme for the entire banner.

   • Mobile Color Scheme: Optionally, set a different color scheme for mobile under Mobile color scheme.

7. Mobile Layout

   • Mobile Content Position: Position content specifically for mobile views.

   • Mobile Content Alignment: Align text to Left, Center, or Right on mobile.

   • Stack Images on Mobile: Enable this option to stack images vertically on smaller screens for better readability.

8. Animations and Overlays

   • Image Behavior: Select an animation effect, if desired, to make the banner more dynamic.

   • Image Overlay Opacity: Adjust the overlay opacity to control the visibility of the image and create a balanced contrast for any content placed over it.