Hero Image

The Hero image section allows you to highlight important information about your store or your most recent promotions or launches.

Frame

Set up section

You have the option to add an image, heading, description, and/or button in the Hero Image section.

  1. Select a Template to edit from the dropdown menu in the top bar.
  2. In the side panel, click (+) Add section and select Hero image.
  3. If desired, you can change the order the section by using the drag and drop handles ⋮⋮
  4. Click the Hero image tab to open its settings.
  5. On the Image field, click Select image and use the file selector to select an image from your library or upload a new image.
    1. Use the Image ratio selector to change the proportion of the image. Frame provides two options: 16:9 and 5:4.
    2. To force the image to always fill the entire width, check Full screen width.
    3. To force the image to fill the full height of the screen, check Full screen height. If enabled, this setting will override any image ratio selected.
  6. Use the Text alignment selector to align your title, description, and button. Frame offers three options: left, center, and right.
  7. Use the Vertical content position slider to vertically position your content over the hero image. This setting only applies on desktops and laptops.
  8. Use the Horizontal content position slider to horizontally position your content across the hero image. This setting only applies on desktops and laptops.
  9. If it is difficult to read your text when it is on top of your hero image, enable the Use text protection layer setting. This setting will add an semi-transparent layer between your image and content, thus making the content more legible.
    1. If enabled, use the Text protection layer slider to change the lightness or darkness of the protection layer. Keep the slider at 0 to darken your image or slide to lighten your image. To remove, uncheck Use text protection layer.
  10. Click Save.


Honey

Set up section

You have the option to add a background image, secondary image, heading, description, and/or button in the Hero Image section.

  1. Select a Template to edit from the dropdown menu in the top bar.
  2. In the side panel, click (+) Add section and select Hero image.
  3. If desired, you can change the order the section by using the drag and drop handles ⋮⋮
  4. Click Hero image tab to open its settings.
  5. If desired, you may show a default background in this section. Use the Select a background option to select the background you desire. Select 'None' to hide the background image.
    1. You may also upload your own Custom background. Use the selector provided and click Select image to open the image selector and select a custom background image from your library or upload a new image.
    2. This image will appear as a background image behind the section contents. We recommend a landscape image with a size of 2500 x 900px.
  6. Use the Minimum image height on mobile slider to set a minimum section height on mobile devices. The actual height is based on the screen size of each mobile device.
    1. Note: if your content is larger then your image, the height of your image will increase to ensure all of your content is visible. We recommend viewing this section on several different devices to understand how it will appear to different customers.
  7. If it is difficult to read your text when it is on top of your hero image, enable the Use text protection layer setting. This setting will add an semi-transparent layer between your image and content, thus making the content more legible.
    1. If enabled, use the Text protection layer slider to change the lightness or darkness of the protection layer. Keep the slider at 0 to darken your image or slide to lighten your image. To remove, uncheck Use text protection layer.
  8. If desired, you can add Background animation. Select 'None' to remove all animations.
  9. To allow your Header to overlap your Hero Image, enable the Allow transparent header setting. This setting only applies when the Hero Image section is the first one on the page.
  10. If desired, you can add a Secondary image. This image will appear over your background image. You can use the settings below to position the secondary image inside the section. For an example of how to use the Secondary image feature, please visit our Treasure Demo Store.
    1. Use the selector provided and click Select image to open the image selector and select an image from your library or upload a new image.
    2. Use the Image width slider to adjust the width of your image. The size is based on a percentage of your original image size.
      1. Note: We recommend using an image that is double your desired display size for optimal viewing on retina screens.
    3. Use the Vertical position dropdown to position your image vertically within the section.
      1. Note: If the Heading or Button blocks are active, your secondary image will be pushed below this content on small screens.
      2. If you want to float the image below the section, select the Position below section option, this will allow your image to slightly overlay the section below.
    4. Use the Horizontal position slider to adjust the placement of your image horizontally across the section.
      1. Note: This setting does not apply to small screens.
    5. If it is difficult to read your text when it is on top of your secondary image, enable the Use text protection layer setting. This setting will add an semi-transparent layer between your image and content, thus making the content more legible.
      1. If enabled, use the Text protection layer slider to change the lightness or darkness of the protection layer. Keep the slider at 0 to darken your image or slide to lighten your image. To remove, uncheck Use text protection layer.
  11. If the Heading or Button blocks are active:
    1. Use the Text alignment selector to align your title, description, and button. Honey offers three options: left, center, and right.
    2. Use the Vertical content position slider to vertically position your content over the section. This setting only applies on desktops and laptops.
    3. Use the Horizontal content position slider to horizontally position your content across the section. This setting only applies on desktops and laptops.
  12. Click Save.

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