Food Theme

Resource strings:

food.allcategories - All categories

food.blog.readmore - Read more

food.gotoproduct - Go to product

food.picker.set - Set

food.sale - SALE

food.searchbox.tooltip - Search item

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.

Homepage banner

System name: homePromo

Example code: 

<div class="parallax-banner" data-selector=".layer" data-hover-only="true" data-relative-input="true" data-pointer-events="true">
        <div class="content layer" data-depth="0.1">
            <div class="title">
                <span class="up">SHOES</span>
                <span class="down">With coupon "SALE"</span>
            </div>
            <div class="promo">
                <div class="number">35</div>
                <div class="off">
                    <div>%</div>
                    <div>OFF</div>
                </div>
            </div>
<div><a href="#" class="btn btn-secondary mt-2">SHOP NOW</a></div>
        </div>
        <div class="img-container"><img src="/assets/images/uploaded/shoes1.png" class="layer" data-depth="0.3"></div>
    </div>

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 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