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

The recommended way to add featured products to the homepage of your store is to use the aerocargo/listing-collections package.

Install

Run this command in the root of your project:

composer require aerocargo/listing-collections

Create a section

1. Create the file:

themes/acme/resources/sections/best-sellers.twig

Replace acme with the name of your theme.

2. Add the twig:

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

{% component "listings" with { listings: collection } csr %}
    <div class="aero-listing-collection">
        <h3 class="aero-listing-collection__title">Best Sellers</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 %}

Use the section

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 "best-sellers" %}

Now products tagged with best-sellers will be rendered wherever our section is used.

See more info in the aerocargo/listing-collections docs.