# 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 %}

```