Home Hero

Home Hero



The following steps can be done by going to Design › Edit Theme › Pages › Home Page › Hero in your eCom back office.

Please Note: In order to use Carousel format, you will first need to set Hero option to 'Carousel' at Pages > Home Page > Hero > Hero Option

Choose the hero layout



Denver gives you three options at the home hero layout:

       
  • Single (text overlay) – this displays the primary hero image full width across the screen
  • Double banner – this displays both the primary hero image and a secondary banner, which can be used to promote anything you choose (product, category, sale, event, etc.).
  • Carousel – this allows a rotating carousel of up to 4 hero images. The carousel options can be customized by going to the section, Carousel in the theme settings. (See Note above)

Home hero settings

In addition to the layout, there are several options in the Theme Settings that give you full control over how to display them. 



Recommended image sizes: Primary – 1600x800px / Secondary – 1000x1000px / Mobile – 800x800p
  • Hero full width (Hero & Carousel) – Turn on to have the hero banner stretch to the full width of the screen.
  • Activate mobile images (Hero & Carousel) – Turn on to activate the alternate mobile images that can be uploaded to better fit smaller screens
  • Hero banner overlay (Hero & Carousel) – Add a dark overlay beneath the banner content to improve legibility, if needed
  • Hero image (Set for each banner in the carousel) – Upload a banner image
  • Hero mobile image (Set for each banner in the carousel)  – Upload a banner image that is optimally sized for mobile devices. This will be show on smaller screens in place of the primary banner image.
  • Hero align (Set for each banner in the carousel)  – Choose the positioning of the banner content (left, right, center)
  • Hero text align (Set for each banner in the carousel)  – Choose the alignment of the banner text (left, right, center)
  • Hero color profile (Set for each banner in the carousel)  – Choose weather you want the text to be dark (recommended for lighter background images) or light (recommended for darker background images)
  • Hero heading (Set for each banner in the carousel)  – Enter the heading text you want to use for each banner
  • Hero subtext (Set for each banner in the carousel)  – Enter the subtext you want to use for each banner
  • Hero overlay (Set for all but the first banner in the carousel)  – Turn this setting ON to use a transparent overlay over the additional banner’s background image. This helps the content be more legible if your background image doesn’t provide enough contrast
  • Hero overlay color – Choose what color you want the overlay to be
  • URL (Set for each banner in the carousel) – Enter the URL that you want each banner to link to (ex: you can either put /collection or https://yourwebsite.com/collection)
  • First hero button (Set for the first banner in the carousel) – This is the button text that you want displayed on the main call to action in the Primary hero banner


You can add up to 4 hero slides. 


    • Related Articles

    • Home Hero

      New release: On March 19, 2020, we published a new release that included improved settings for the home hero and a carousel option. Details on how to activate that update for your store are below. The following steps can be done by going to Design › ...

    • Home Hero

      Gehen Sie zu Design ›Theme-Einstellungen› 6.1 Home: Hero in Ihrem eCom-Back-Office. Wähle das Heldenlayout Double banner home hero layout Austin bietet Ihnen zwei Optionen für das Layout des Heim-Helden: Einzeln (volle Breite) - Hier wird das primäre ...

    • Home Hero (NL)

      De volgende stappen kunnen worden uitgevoerd door naar Ontwerp > Thema-instellingen > 6.1 Home: hero in uw eCom-backoffice te gaan. Kies de layout van de held Double banner home hero layout Austin geeft je twee opties bij de home hero indeling: ...

    • How do I change the style of my Homepage Hero Banner?

      In your theme settings (Design -> Edit Theme), navigate to the Homepage Hero settings via Pages -> Homepage -> Hero.  After choosing your Hero style, you will find additional customization settings that include:  Full width Add an overlay  Text ...

    • Change Section Order

      The following steps can be done by going to Design › Edit Theme › Pages › Home page › Home Content Order in your eCom back office. Denver allows you to customize your home page with up to 10 different content sections. You can choose which content is ...