Image banner settings


Setting Description
Full width You can set the image to stretch across the entire width of the page.
Desktop content position

Select the vertical alignment of the content:

  • Top: Aligned with the top of the image (left, center, right).
  • Middle: Centered within the height of the image (left, center, right).
  • Bottom: Aligned with the bottom of the image (left, center, right, left to right).
Desktop content alignment

You have three alignment options to align content horizontally on desktop:

  • Left
  • Right
  • Center
Show container on desktop Show the container to display text with a colored background on desktop. This will apply to the heading, description, and button text.
Color scheme

You can apply different color schemes to your store:

  • After creating color schemes in the theme settings under the 'Colors' tab, you can assign them to different sections of your store.
  • In each template, section, or block, you'll find a 'Color Scheme' dropdown.
  • Simply select the appropriate color scheme to maintain consistency and align with your brand's identity.
Container color scheme Enable the “Show Container on Desktop” option, and apply a color scheme for the content container, including the background color, text color, and button color. These colors should be chosen to complement the background image and ensure good contrast and readability.

Image settings


Setting Description
First image

Choose the first image for your banner. Click on “Select Image” to access your media library, upload a new image, or explore free images. Also, you can connect a dynamic source by clicking the source button. Once an image is added, you can use the “Change” button to remove, replace, or delete it.

Note: If add only one image, it will be on the whole width of the section. If add two images, the images will be aligned vertically and placed next to each other.
Second image Select the second image for your banner. Select the second image for your banner and follow the same steps as described for the first image.
Banner height

Choose banner height from dropdown list:

  • Adapt to first image
  • Small
  • Medium
  • Large

For best results, use an image with a 3:2 aspect ratio. Learn more
Image overlay opacity The “Image overlay opacity” setting allows you to adjust the transparency of the overlay that is applied to images on your website. Use the slider to make changes.

Animations


Setting Description
Image behavior 

Choose how the image behaves:

  • None
  • Ambient movement: This creates a subtle, slow movement effect, making the image appear dynamic.
  • Fixed background position: Involves moving the background image in a visually appealing way while keeping it fixed relative to the viewport. This is often used for parallax effects or to create a dynamic visual background.
  • Zoom in on scroll: Gradually zooms in on the image as the user scrolls.

Mobile layout


Setting Description
First image Choose the first image for your banner. For mobile devices, this is important due to the limited screen size.
Second image

You can add a second image to the mobile device. The second image complements the first and provides additional context or visual interest.

Use a 3:2 aspect ratio to ensure the image displays correctly without distortion or cropping.
Banner height

Choose banner height for mobile from dropdown list:

  • Adapt to first image
  • Small
  • Medium
  • Large

For best results, use an image with a 3:2 aspect ratio. Learn more
Mobile content alignment

Choose the alignment of the content on mobile:

  • Left
  • Center
  • Right
  • Bottom left
  • Bottom center
  • Bottom right
Stack images on mobile If you enable this option and disable “Show Container on Mobile” the layout on mobile devices will display the first image, followed by text on the first image, and then the second image. However, if you enable “Stack Images on Mobile” and also enable “Show Container on Mobile” the layout will show the first image, followed by text within a container, and then the second image. If you disable “Stack images on mobile” the images will be displayed in a single column, aligned vertically, and placed next to each other.
Show container on mobile Enabling this option will display text within a container after the image on mobile screens. Disabling it will place the text directly on top of the image on mobile screens.

Section padding


Setting Description
Top padding The "Top padding" setting allows you to adjust the amount of space at the top of the section using a slider. 
Bottom padding The ''Bottom padding" setting functions similarly to the “Section top padding” setting, but controls the space at the bottom of the section. 
Top padding mobile The "Top padding mobile" setting allows you to adjust the amount of space at the top of the section specifically for mobile devices, using a slider.
Bottom padding mobile The "Bottom padding mobile" setting works similarly to the "Top padding mobile" setting but controls the space at the bottom of the section for mobile devices.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us