How to Change Featured Products in Shopify

If you’re planning broader design updates, check out our guide: How to Customize a Shopify Website – A Complete and Easy

What Are Featured Products in Shopify?

Featured products are special items you display on your store’s homepage or in specific theme sections. Depending on your theme, this section might be named Featured Products, Featured Collection, Product Recommendations, or Handpicked Products. You can fully customize these sections to showcase the products you want your customers to notice most.

Methods for Changing Featured Products in Shopify

There are different methods for changing the featured products in Shopify. Some of these are given below.

1. Change Featured Products from the Shopify Theme Editor
2. Change Featured Products using Custom Coding

Method 1: Change Featured Products from the Shopify Theme Editor

You can easily update your featured products right from the Shopify Theme Editor. Simply open your theme settings, find the featured products or featured collection section, and select the products or collection you want to display with no coding required. Follow these steps to add Featured products to your Shopify Store using the Shopify Theme Editor.

Step 1: Navigate to Online Store > Themes > Customize.

Step 2: Click on the Add section button or select the pre-existing featured collection or featured product section.

Step 3: Select the collection that you want to show here.

Step 4: Save the changes.

Step 5: To change which products appear, you need to edit that collection. Navigate to Products > Collections.

Step 6: Select the collection attached to the Featured collection section, for example, Clothing.

Step 7: Add, remove, or rearrange the products according to need.

Step 8: Save the changes.

For other theme adjustments without touching too much code, you might also find How to Change View Cart Color in Shopify helpful.

Method 2: Change Featured Products using Custom Coding

You can also update featured products by editing your theme’s code. This method gives you more flexibility to display specific products or collections beyond the default theme settings. You’ll need to edit the Liquid files (for example, feature-collection.liquid or the homepage section file) and replace the existing collection or product references with the ones you want to feature.

This approach is best if you’re comfortable working with Shopify’s Liquid code and want a fully customized layout or product selection. Here is the final result. Check the GIF below to see how it will look before we go through the steps.

Step 1: Navigate to Online Store > Themes > Edit code.

Step 2: Create a new Section in the Sections directory, name it something like custom-featured-collection.liquid

Step 3: Add this code to your section.

  
    <section class="featured-collection">
      <div class="container">
        {% if section.settings.heading != blank %}
          <h2 class="featured-collection__heading">{{ section.settings.heading }}</h2>
        {% endif %}

        {% assign featured_collection = collections[section.settings.collection] %}
        {% if featured_collection != blank %}
          <div class="featured-collection__grid">
            {% for product in featured_collection.products limit: section.settings.product_limit %}
              <div class="featured-collection__item">
                <a href="{{ product.url | within: featured_collection }}">
                  {% if product.featured_image %}
                    <img src="{{ product.featured_image | img_url: '600x' }}" alt="{{ product.title }}" loading="lazy">
                  {% else %}
                    <div class="no-image">No image</div>
                  {% endif %}
                  <h3 class="product-title">{{ product.title }}</h3>
                  <span class="product-price">
                    {{ product.price | money }}
                    {% if product.compare_at_price > product.price %}
                      <span class="compare-price">{{ product.compare_at_price | money }}</span>
                    {% endif %}
                  </span>
                </a>
              </div>
            {% endfor %}
          </div>
        {% else %}
          <p>No products found in this collection.</p>
        {% endif %}
      </div>
    </section>
    {% stylesheet %}
        .featured-collection {
            padding: 50px 0;
            text-align: center;
        }
        .featured-collection a {
            color: inherit;
            text-decoration: none;
        }
        .featured-collection__heading {
            font-size: 2rem;
            margin-bottom: 2rem;
            font-weight: 600;
        }
        .featured-collection__grid {
            display: grid;
            gap: 20px;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        }
        .featured-collection__item {
            border: 1px solid #e5e5e5;
            border-radius: 8px;
            padding: 15px;
            transition: box-shadow 0.3s ease;
        }
        .featured-collection__item:hover {
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        .featured-collection__item img {
            max-width: 100%;
            height: auto;
            margin-bottom: 10px;
        }
        .product-title {
            font-size: 1.1rem;
            margin: 0 0 5px;
        }
        .product-price {
            display: block;
            font-weight: 600;
            color: #333;
        }
        .compare-price {
            text-decoration: line-through;
            color: #999;
            margin-left: 8px;
        }
    {% endstylesheet %}
    {% schema %}
        {
        "name": "Custom Featured Products",
        "settings": [
            {
            "type": "text",
            "id": "heading",
            "label": "Section Heading",
            "default": "Featured Collection"
            },
            {
            "type": "collection",
            "id": "collection",
            "label": "Select Collection"
            },
            {
            "type": "range",
            "id": "product_limit",
            "label": "Number of Products",
            "min": 2,
            "max": 12,
            "step": 1,
            "default": 4
            }
        ],
        "presets": [
            {
            "name": "Custom Featured Products",
            "category": "Collection"
            }
        ]
        }
    {% endschema %}
  

Step 4: Save the changes.

Step 5: Navigate to Online Store > Themes > Customize.

Step 6: Click on the Add section button.

Step 7: Include this section in your theme.

Step 8: Select the collection, adjust other settings, and save the changes.