Froggy theme

Resource strings:

froggy.blog.readmore - Read More

froggy.browse.categories - All Categories

froggy.nomore.products - No more products...

froggy.picker.set - Set

froggy.sale - SALE

froggy.showmore - Show more

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 the first submenu

1. On the main category edition page add new User Fields:

- Key: gallery, Value: true

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

- Key: showImage, Value: true

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

Header banner

System name: topHeaderInfo_Froggy

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>

Icons

1. To unlock the full icon list (https://bootstrap-vue.org/docs/icons) go to Head.cshtml and change the line with bootstrap-vue-icons-slim.min.js to bootstrap-vue-icons.min.js.

2. Now you can use all icons from above-mentioned list, for example to category.

3. Now, in the admin panel go to a category and fill field named icons with the chosen icon name.

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