Display key product features on collection page - IMPACT THEME

Store Design
1

Hey everyone :waving_hand:

I’m using the Impact theme and I’d like to display key product features directly on the collection pages, not just on the product page.

Here’s an example of what I mean from SHARP’s site:
:backhand_index_pointing_right: https://www.sharpconsumer.com/electronics/audio/soundbars/?web_filter_aud_features%5B%5D=Dolby+Atmos

And here’s my current store preview:
:backhand_index_pointing_right: https://tdvaj7pjwbpsi0vv-70823051420.shopifypreview.com (password : sharp)

I’d like to show a few main specs (e.g., material, size, technology) under each product thumbnail in the collection grid — similar to how SHARP displays “Dolby Atmos” or “HDMI eARC.”

Has anyone implemented this in Impact?

  • Did you use metafields, tags, or an app?

  • Any tips to keep it clean and fast on mobile?

Appreciate any advice or code examples!

1 Like
3

Hi :waving_hand:

I’ve worked extensively with the Impact theme and can help you add product feature highlights directly on your collection pages, just like the SHARP example you shared.

Here’s how I’ll handle it:

  • Use product metafields or tags to pull dynamic features (e.g., “Dolby Atmos”, “HDMI eARC”, etc.).

  • Insert them neatly under each product thumbnail within the collection grid.

  • Maintain fast load speed, clean styling, and full mobile responsiveness.

  • Provide a short how-to guide so you can easily edit or add features later.

I can deliver a fully functional setup within 2 days and ensure it blends perfectly with your Impact theme design.

Would you like me to show you a quick demo snippet before we start?

4

Hi @Mcfly692900

Step 1: Create Product Metafields

  1. Go to your Shopify admin → Settings → Custom data → Products.
  2. Click Add definition.
  3. Create metafields for the key features you want to show. For example:
  • Name: Material | Namespace/key: specs.material | Content type: Single line text
  • Name: Size | Namespace/key: specs.size | Content type: Single line text
  • Name: Technology | Namespace/key: specs.technology | Content type: Single line text
  1. Save the definitions.
  2. Go to your products and fill in these metafields for each product.

Step 2: Edit the Collection Product Card

In the Impact theme:

  1. Go to Online Store → Themes → Edit Code.
  2. Open the file that renders collection products:
sections/collection-template.liquid

or, if using OS 2.0, check:

sections/collection-listing.liquid
snippets/product-card.liquid
  1. Find the block that outputs the product title or price, usually something like:
<div class="card__content">
  {{ product.title }}
  {{ product.price | money }}
</div>

Step 3: Output Metafields Below Product Title

Add the following inside the product card container (under the title or price):

<div class="product-specs">
  {% if product.metafields.specs.material != blank %}
    <span class="spec-item">{{ product.metafields.specs.material }}</span>
  {% endif %}
  {% if product.metafields.specs.size != blank %}
    <span class="spec-item">{{ product.metafields.specs.size }}</span>
  {% endif %}
  {% if product.metafields.specs.technology != blank %}
    <span class="spec-item">{{ product.metafields.specs.technology }}</span>
  {% endif %}
</div>

Step 4: Add CSS for Clean Display

In assets/component-collection.css (or base.css), add:

.product-specs {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.875rem; /* adjust as needed */
  color: #555555;
}

.product-specs .spec-item {
  background-color: #f0f0f0;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

Best regards,
Devcoder :laptop:

5

Thanks every one for answer, and is it possible to insert small logo too (like dolby…) instead of text ?