Image banner

Steps to add Image banner section:

1. In your Shopify admin dashboard, go to Online Store > Themes.
2. Choose the theme you want to edit and click on the Customize button.
3. Click on the arrow down next to Home page↓and select a template you want your Image banner section to add to. 
4. Click on + Add section which can be found in your left sidebar or directly in the live editor. 
5. Scroll down, or search for Testimonials, then click on Image banner. 
6. Click and hold the drag-and-drop handles ⋮⋮  to re-order your sections.

Congrats! 👏 You just added your Image banner section.

After you've successfully added the image banner section following the steps above you can customize the section by adjusting your Section controls. If you don't see the customization options, click on your Image banner section.

Image banner controls

1. Check the Enable narrow width box to add space to left and right of your section.
2. Image control gives you ability to add an image to the section by clicking Select image or Explore free images if you want to choose an image from Shopify's library. Optionally, upload a Mobile image if you wish for a different image to appear on mobile screens. Recommended dimensions are 768x1024 pixels.
3. Set the Desktop image height by using the drop-down menu options are:
• Adapt to first image - Sets the height of the section to the height of the first image.
• Small - Desktop: 420 px, mobile: 280 px
• Medium (default) - Desktop: 560 px, mobile: 340 px
• Large - Desktop: 720 px, mobile: 390 px
4. Image focal point - You can set a focal point to ensure that a key part of an image won't get cropped. Choose Top, Middle, or Bottom Image focal point.
5. Image overlay opacity adds an overlay to the banner images. Use the slider to set the opacity of the overlay. Defaults to 0%.
6. Link - You can make the entire banner clickable by adding a link. Paste an url or select one of the options. Also, you can connect a dynamic source

Content controls

1. Section max-width - Specify the maximum width for the content section that may contain the heading, text, button, etc.
2. Content position - Choose where, relative to the image, you want to display your content block. Available options include Top left, Middle Right, Bottom Left, etc.
3. Text alignment - Set the alignment of the image banner text for desktop computers. Choose between right, left, or center.
4. Color scheme - It controls the background color of your content block, the text color, etc. Click Change to pick a different color scheme. Remember that you can Edit the existing scheme or add a new one ↗ in Theme settings.
5. Enable Gradient - If marked, this will bring the text to the bottom and add a gradient to the image.

Mobile Layout

1. Check the Stack content if you wish to display the content block under the image rather than in the image itself.

Section padding

1. You can change both top and bottom section padding (the empty space above and below the section) and set it anywhere from 0px to 100px.
2. Read more about Custom CSS ↗.

Steps

1. Find the Image banner section you added and customized following the steps above.
2. Click + Add block underneath and choose one of the options. Our theme has a few blocks you can display: heading, subheading, text, and a button.
3. Once you add a desired block, click on it to see additional block customization options.
4. (Optional) Click and hold the drag-and-drop handles ⋮⋮  to re-order your blocks.

Heading block - Large text for the title of the text box.

1. Insert the copy to the Heading box.
2. Choose the size under Heading size. Choose between small, medium, large, or extra large.
3. (Optional) Click Select collection to add a collection and display a product count next to your heading.

Subheading block

1. Enter a copy to the Subheading box.
2. Choose a Subheading size between Small and Medium.

Text block

1. Enter the text you want to display in Description field.

Button block

1. Button label - The text that displays on the first button. Leave the link blank to hide the button.
2. Button link - The URL that you want the first button to link to. Alternatively, choose one of the suggested options (Products, Collection, Page, etc.).
3. Second button label - The text that displays on the second button.
4. Second button link - The URL that you want the second button to link to. Alternatively, choose one of the suggested options (Products, Collection, Page, etc.).
5. Button style - Adjusts the button styling to be an outline of a button instead of having a solid background.