How to add Feature Icons on Shopify?

Feature icons are a great way to visually communicate your store’s benefits, like free shipping or secure payments, building trust with customers. In this guide, we’ll show you how to add feature icons to your Shopify store using custom Liquid code.

Why Add Feature Icons?

• Build Trust: Highlight key benefits like free shipping or secure checkout.
• Visual Appeal: Icons make your store more engaging and professional.
• No Apps Needed: Use Shopify’s theme editor for a cost-effective solution.

‍

Step 1: Access Your Shopify Theme Editor

1. Log in to your Shopify admin panel.
2. Navigate to Online Store > Themes.
3. Click Customize on your active theme, then select Edit Code.

‍

Step 2: Add the Custom Liquid Code

We’ll add a section for feature icons below the header on your homepage.

1. In the theme editor, locate the sections folder and create a new file called feature-icons.liquid.
2. Add the following code:

<div class="feature-icons">
  <div class="feature-item">
    <span class="feature-icon">🚚</span>
    <p>Free Shipping</p>
  </div>
  <div class="feature-item">
    <span class="feature-icon">🔒</span>
    <p>Secure Payments</p>
  </div>
  <div class="feature-item">
    <span class="feature-icon">⭐</span>
    <p>5-Star Rated</p>
  </div>
  <div class="feature-item">
    <span class="feature-icon">↩️</span>
    <p>Easy Returns</p>
  </div>
</div>

<style>
  .feature-icons {
    display: flex;
    justify-content: space-around;
    padding: 20px 0;
    background-color: #f5f5f5;
    flex-wrap: wrap;
  }

  .feature-item {
    text-align: center;
    margin: 10px;
  }

  .feature-icon {
    font-size: 30px;
    display: block;
    margin-bottom: 5px;
  }

  .feature-item p {
    margin: 0;
    font-size: 14px;
    color: #333;
  }
</style>

3. Save the file.

‍

Step 3: Add the Section to Your Homepage

1. In the theme editor, go to the Customize panel.
2. Add a new section to your homepage and select Custom Liquid.
3. In the Custom Liquid field, add:

{% section 'feature-icons' %}

4. Save your changes.

‍

Step 4: Customize the Feature Icons

• Change Icons: Replace the emoji icons (🚚, 🔒, etc.) with your preferred Unicode emojis or use an icon font like Font Awesome.
• Update Text: Modify the <p> tag content to reflect your store’s features.
• Adjust Styling: Tweak the background-color, font-size, or padding in the <style> section to fit your design.

‍

Step 5: Test Your Store

Preview your homepage to ensure the feature icons display correctly. Check responsiveness on mobile devices to confirm they stack properly.

‍

Conclusion

Feature icons are a simple yet powerful way to boost customer trust on your Shopify store. With this custom Liquid code, you can highlight your store’s benefits in a visually appealing way, all without relying on third-party apps.