How to Create a Featured Collection on Shopify with Some Code

Hey! Thinking about sprucing up your Shopify store with a featured collection that pops right at your customers? Solid choice! Whether you're gearing up for seasonal products or just want to spotlight bestsellers, setting this up can definitely nudge visitors towards hitting that buy button.

Now, you might be wondering, “Why would I want to tweak the code? Can’t I just set it up through the dashboard?” Sure, you can go through the Shopify interface and click a few options, but sometimes getting your hands slightly dirty with a bit of code can give you that perfect fit—like tailoring a suit to look just right.

Getting Started

First, let’s understand what a featured collection really is. It’s like that display window at a store showing the best or newest goods to lure you in. On Shopify, this means a specific collection of products you want to showcase prominently on your homepage or another key spot.

Why Code?

Using code lets you customize it beyond the standard settings. You can adjust sizes, spacing, add unique animations, or even integrate some interactive elements. The sky's (or well, your patience for code’s) the limit!

The Basics: Where to Insert Your Code

To kick things off, you need access to your Shopify theme’s code editor:

Go to Shopify Admin.
Click on 'Online Store' and then 'Themes'.
Find your active theme and click on 'Actions'.
Select 'Edit code'.

This will bring up your theme’s coding backbone, filled with HTML, CSS, JavaScript, and Liquid files. Liquid is Shopify’s templating language, by the way. It’s what connects your data (like product info) to your pages.

Add Your Featured Collection

Step 1: Create a New Section

You’ll need a self-contained piece of code that you can sprinkle wherever you like later on. In your theme code, look for the Sections directory.
Click on 'Add a new section' and name it something like ‘featured-collection.liquid’.

Step 2: Coding the Collection

Inside this new file, you’ll piece together a simple structure to load products from a specific collection.
Here’s a bare-bones setup:

{% if section.settings.collection_id %}
  <div class="featured-collection">
    {% assign collection = collections[section.settings.collection_id] %}
    {% for product in collection.products %}
      <div class="product-card">
        <a href="{{ product.url }}">
          <img src="{{ product.featured_image | img_url: '300x300' }}" alt="{{ product.title }}">
          <h3>{{ product.title }}</h3>
          <p>{{ product.price | money_with_currency }}</p>
        </a>
      </div>
    {% endfor %}
  </div>
{% endif %}

This chunk of code does the simple job of looping through each product in a chosen collection and displays its image, title, and price.

Step 3: Add Settings to Customize

To allow non-coders to tweak this section through the Shopify dashboard (like changing the collection), add some settings in your code:

{% schema %}
  {
    "name": "Featured Collection",
    "settings": [
      {
        "type": "collection",
        "id": "collection_id",
        "label": "Select Collection"
      }
    ]
  }
{% endschema %}

This snippet adds a dropdown in your theme editor where users can select which collection to feature.

Place It on Your Site

With your featured-collection.liquid ready, decide where it needs to go. A good spot is often on the homepage.

Navigate to Templates and then index.liquid or whatever template is your homepage.
Insert:

{% section 'featured-collection' %}

This line tells Shopify, “Hey, put my awesome featured collection right here!”

Styling Your Collection

The functional part is set, but it’s like serving a gourmet burger on a trash can lid if it looks terrible. Let's add some CSS to make it appealing.

In your theme’s assets directory, open theme.scss.liquid.
Add some simple styles:

.featured-collection {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.product-card {
  text-align: center;
}

.product-card img {
  max-width: 100%;
  height: auto;
}

Testing and Debugging

Before you wrap up, preview your changes by clicking 'Preview' in your theme editor. It’s like trying on clothes in the fitting room—check if everything sits just right. If something’s off, dive back in and tweak your code. Maybe you’ll adjust some margins here or change an image size there.

By slapping in a bit of code, you’ve tailored your Shopify store to serve up not just any old featured collection but YOUR featured collection, dressed just the way you envisioned.

Remember, coding is both a science and an art. It might take a couple of tries to get it perfect, but the satisfaction of nailing it is worth every comma and closing tag. Happy coding!