How do I add featured products to the homepage of my store?

Listing collections can be used to group products together and display them on specified pages.

Install

Run this command at the root of your project

composer require aerocargo/listing-collections

Create your section

Create the file;

your_theme_name/resources/sections/listing-collection.twig

Add the loop;

{% set collection = listings([{
    "tag_name.en": id
}], 8) %}

{% component "listings" with {listings: collection} csr %}
    <div class="aero-listing-collection">
        <h3 class="aero-listing-collection__title">{{ title }}</h3>
        <ul class="aero-listings grid grid-cols-4">
            <li v-for="listing in listings.data" class="aero-listing">
                {% snippet "listing-card" %}
            </li>
        </ul>
    </div>
{% endcomponent %}

Reference your section where you'd like it to display and pass through the variables, here we'll use the tag name best-sellers this will be referenced in the next step.

{% section "listing-collection" with {
    id: 'best-sellers',
    title: 'Best sellers',
} %}

Tag some products

In the admin create a tag which matches the tag name set previously and tag your products.

Add Swiper to create a carousel (optional)

There's no need to add SwiperJS as the files are included in the boilerplate theme.

Reference the css at the top of your section:

We use the once tag so that swiperjs will not be added to the page multiple times if we have more than one instance of the section

{% css %}
    {% once 'swipercss' %}
        {{ theme_css('swiper.min.css') }}
    {% endonce %}
{% endcss %}

Add the relevant classes to your collection:

{% component "listings" with {listings: collection} csr %}
    <div class="aero-listing-collection">
        <h3 class="aero-listing-collection__title">{{ title }}</h3>
        <div class="aero-listing-collection__carousel swiper-container" id="{{ id }}">
            <ul class="aero-listings swiper-wrapper">
                <li v-for="listing in listings.data" class="aero-listing swiper-slide">
                    {% snippet "listing-card" %}
                </li>
            </ul>
        </div>
    </div>
{% endcomponent %}

Add your JS to the bottom of your section:

We use the once tag so that swiperjs will not be added to the page multiple times if we have more than one instance of the section

{% js %}
    {% once 'swiperjs' %}
        <script src="{{ theme_asset('swiper.min.js') }}"></script>
    {% endonce %}
    <script>
        function initSwiper{{ id | replace({'-':''}) }}(){
            new Swiper('#{{ id }}', {
                slidesPerView: 2,
                slidesPerGroup: 2,
                spaceBetween: 16,
                longSwipesRatio: 0,
                loop: false,
                allowTouchMove: true,
                watchOverflow: true,
                breakpoints: {
                    // @screen lg
                    1024: {
                        slidesPerView: 3,
                        slidesPerGroup: 3,
                        spaceBetween: 16,
                        allowTouchMove: true,
                        pagination: {
                            clickable: true,
                        },
                    },
                    // @screen xl
                    1280: {
                        slidesPerView: 4,
                        slidesPerGroup: 4,
                        spaceBetween: 24,
                        allowTouchMove: true,
                        pagination: {
                            clickable: true,
                        },
                    },
                }
            });
        }
    </script>
{% endjs %}