Hero Theme

Resource strings:

hero.gotoproduct - Go to product

hero.sale - Sale

New Products slider

1. On the product details page check option "Mark as new" and set the Start date of a new product.

2. Go to Settings -> Catalog and check "Show 'New products' on the home page"

3. Set the number of products to display on the home page

Megamenu gallery

* only for first sub menu

1. On main category add User Fields

- Key: gallery, Value: true

- Key: cols_num, Value: 4

* cols_num means the number of columns in gallery menu, for default is 1 (max. 5).

2. On "Main Subcategories" (first categories in each gallery menu columns) add Generic Attribues:

- Key: showImage, Value: true*

* Use that option if you want to show images of that subcategories.

Contact banner

System name: ContactBannerHero

Example code: 

<div class="contact-banner">
<div class="icon">
<span class="lnr linearicons-telephone"></span>
</div>
<div class="content">
<div class="title">CALL TO US</div>
<div class="number-phone">+48 661 65 82</div>
</div>
</div>

Top header banner

System name: topHeaderInfo_Hero

Example code: 

<swiper-slide>
    <div class="top-header-info">
        <a href="/chairs">
            <strong>40% OFF</strong>
            <span>For all armchairs collection!</span>
        </a>
    </div>
</swiper-slide>
<swiper-slide>
    <div class="top-header-info">
        <a href="/sport">
            <strong>35% OFF</strong>
            <span>Get for all sports products!</span>
        </a>
    </div>
</swiper-slide>
<swiper-slide>
    <div class="top-header-info">
        <a href="/electronics">
            <strong>15% OFF</strong>
            <span>Only today for electronics products!</span>
        </a>
    </div>
</swiper-slide>

Homepage banner

System name: HomePromo1_Hero

Example code: 

<swiper-slide>
<div class="home-promo">
<div class="top-promo animate__animated" data-animation="animate__flipInY" data-delay="animate__delay-05s">
<div class="top">Sale</div>
<div class="bottom">Sport</div>
</div>
<div class="promo-middle animate__animated" data-animation="animate__zoomIn" data-delay="animate__delay-05s">
<div class="left">45</div>
<div class="right">
<div class="top">%</div>
<div class="bottom">OFF</div>
</div>
</div>
<div class="promo-bottom animate__animated" data-animation="animate__fadeIn" data-delay="animate__delay-1s">
Nothing is difficult
<br>
Keep going and you will succeed
</div>
</div>
</swiper-slide>
<swiper-slide>
<div class="home-promo">
<div class="top-promo animate__animated" style="background: #E8D272;color:#000;" data-animation="animate__flipInY" data-delay="animate__delay-05s">
<div class="top">SUPER</div>
<div class="bottom">Lamps</div>
</div>
<div class="promo-middle animate__animated" data-animation="animate__zoomIn" data-delay="animate__delay-05s">
<div class="left">35</div>
<div class="right">
<div class="top">%</div>
<div class="bottom">OFF</div>
</div>
</div>
<div class="promo-bottom animate__animated" data-animation="animate__fadeIn" data-delay="animate__delay-1s">A Better Way Of Lighting
<br>
 Its way of New Lighting
</div>
</div>
</swiper-slide>
<swiper-slide>
<div class="home-promo">
<div class="top-promo animate__animated" style="background: #EF5350;" data-animation="animate__flipInY" data-delay="animate__delay-05s">
<div class="top">GREAT</div>
<div class="bottom">Chairs</div>
</div>
<div class="promo-middle animate__animated" data-animation="animate__zoomIn" data-delay="animate__delay-05s">
<div class="left">25</div>
<div class="right">
<div class="top">%</div>
<div class="bottom">OFF</div>
</div>
</div>
<div class="promo-bottom animate__animated" data-animation="animate__fadeIn" data-delay="animate__delay-1s">Relax like a boss
<br>
Bring in your own comfort
</div>
</div>
</swiper-slide>

Swiper Slider Slide

First Slide:

Header: 

<span class="top text-gray">A BETTER WAY OF LIGHTNING</span>
<span class="bottom">Lamps Collections</span>

Body:

maybe lighing?

Footer: 

<a href="#" class="slider-button">SEE MORE</a>.

Product Flags

1. Go to the Product details page -> General tab -> Fill the Flag field like in this example:

<span class="danger">AUCTION</span>

Badge background-color List:

- danger (#dc3545)

- success (rgb(169, 204, 0))

- warning (#ffc107)

- dark (#212529)

- purple (#673AB7)

- teal (#50b890)

- green (#4CAF50)

- orange (#EF6C00)

- indigo (#3F51B5)

* You can use different classes like danger, orange, success. If a product has old price, "SALE" flag will be added automatically

Color picker

1. In the admin panel go to the Customers -> Customer groups -> Administrators > User Fields and set

Key: showPicker, Value: true

Key: usePicker, Value: true

* if you want to disable set values to false