Shopify Featured Products

About this module

A featured products section that renders a collection grid of product cards with hover effects.

Installation

1. 1

   Open Shopify Admin

   Go to Online Store → Themes.

2. 2

   Edit code

   Click the ellipsis (⋯) next to your theme and choose Edit Code.

3. 3

   Create the section

   In the Sections folder, click Add a new section, name it mh-featured-products, and replace the contents with the Liquid source below.

4. 4

   Save

   Save the file. The section now appears in the Theme Customizer.

5. 5

   Add it to the page

   Open the Theme Customizer, click Add section, search for it and add it where you like.

Usage

1. 1

   Paste the section

   Create `mh-featured-products` under Sections and paste the source.

   {{ 'styles.css' | asset_url | stylesheet_tag }}
   <section class="mh-featured">
     <div class="mh-featured-head">
       {% if section.settings.heading != blank %}
         <h2 class="mh-featured-title">{{ section.settings.heading }}</h2>
       {% endif %}
     </div>
     {%- assign collection = section.settings.collection -%}
     {% if collection != blank %}
       <div class="mh-featured-grid" style="--mh-cols: {{ section.settings.products_per_row }}">
         {% for product in collection.products limit: section.settings.max_products %}
           <a href="{{ product.url }}" class="mh-featured-item">
             {% if product.featured_image %}
               <img class="mh-featured-img" src="{{ product.featured_image | image_url: width: 600 }}" alt="{{ product.featured_image.alt | escape }}" loading="lazy" width="600" height="600" />
             {% endif %}
             <span class="mh-featured-name">{{ product.title }}</span>
             <span class="mh-featured-price">{{ product.price | money }}</span>
           </a>
         {% endfor %}
       </div>
     {% else %}
       <p class="mh-featured-empty">Pick a collection in the Theme Customizer to preview this section.</p>
     {% endif %}
   </section>
   
   {% schema %}
   {
     "name": "MH Featured Products",
     "tag": "section",
     "settings": [
       { "type": "text", "id": "heading", "label": "Heading", "default": "Featured products" },
       { "type": "collection", "id": "collection", "label": "Collection" },
       { "type": "range", "id": "products_per_row", "label": "Products per row", "min": 2, "max": 4, "step": 1, "default": 3 },
       { "type": "range", "id": "max_products", "label": "Max products", "min": 2, "max": 12, "step": 1, "default": 6 }
     ],
     "presets": [{ "name": "MH Featured Products", "category": "ModuleHarbor" }]
   }
   {% endschema %}

2. 2

   Configure in the customizer

   Adjust the settings that ship with the section schema.