Unlock Dynamic Product Pages: How to Add Custom Feature Sections to Your Shopify Store (Smile Theme & Beyond)

Unlock Dynamic Product Pages: How to Add Custom Feature Sections to Your Shopify Store (Smile Theme & Beyond)

As a Shopify migration expert at Shopping Cart Mover, I consistently see merchants striving to differentiate their online stores and provide an exceptional shopping experience. A critical element in achieving this is a well-designed product page that clearly communicates value and benefits. One of the most effective ways to do this is by adding a clean, visually appealing section of product features or benefits, often presented as an icon-and-text list.

Recently, a compelling discussion unfolded in the Shopify community, highlighting this exact need. A store owner, saqlain1, using the popular Smile theme (a style of the Nexa theme), sought guidance on implementing such a feature section on their product page, specifically positioned right under the 'Add to Cart' button. This isn't a standard, out-of-the-box feature for most themes, including Smile, necessitating a touch of custom code. Fortunately, the community provided excellent, actionable solutions that we can expand upon.

If you're looking to start your own high-converting online store or migrate to a more robust platform, Shopify offers unparalleled flexibility and power. Let's dive into how you can leverage its customization capabilities to create stunning product feature sections.

Why Custom Product Feature Sections Matter

In today's competitive e-commerce landscape, simply listing product specifications isn't enough. Customers want to quickly grasp the core benefits and unique selling points. A dedicated feature section with icons and concise text:

• Enhances Readability: Breaks down complex information into digestible points.
• Boosts Conversion: Highlights key benefits, helping customers make informed decisions faster.
• Improves Aesthetics: Adds a professional, polished look to your product pages.
• Reinforces Branding: Allows for consistent visual communication of your brand's values.

The Challenge: Beyond Standard Theme Sections

While Shopify themes offer extensive customization through the theme editor, highly specific layouts like an icon-and-text grid often require custom development. The community thread provided two primary methods to achieve this, each with its own advantages.

Method 1: The Quick & Easy Approach (Custom Liquid Block)

This method is ideal for merchants who need to add static features to a few specific products or pages, or for those who prefer a simpler, direct approach without delving into metafields. It involves using Shopify's built-in 'Custom Liquid' section.

How to Implement with Custom Liquid:

1. Duplicate Your Theme: Always start by duplicating your live theme (Online Store > Themes > Actions > Duplicate) to create a backup. This allows you to experiment safely.
2. Navigate to Theme Customizer: From your Shopify admin, go to Online Store > Themes. Click 'Customize' on your duplicated theme.
3. Select Your Product Page: Use the drop-down menu at the top to navigate to 'Products' > 'Default product' (or the specific product template you wish to edit).
4. Add Custom Liquid Section: In the left sidebar, scroll down and click 'Add section'. Search for 'Custom Liquid' and select it.
5. Paste the Code: In the 'Custom Liquid' section settings, paste the following HTML and CSS code. This code creates a two-column grid on desktop and a single-column grid on mobile, with specific styling for your features.

 
☁️ Featherweight Serum
 
🔵 Anti-Inflammatory
 
🌬️ Breathable + Weightless
 
🧷 Non-Acnegenic
 
🕰️ 16-hr Long Wear
 
✨ Skin-Like Finish
 
🍃 Silicone-Free
 
👌 Medium-Buildable Cover

6. Customize and Save: Adjust the emojis, text, and the color code (#8b2c2c) to match your brand. Click 'Save'.

Pros & Cons of Custom Liquid Block:

• Pros: Quick to implement, no file editing required, good for static content.
• Cons: Not dynamic (same features for all products), harder to manage for many products, limited reusability.

Method 2: The Robust & Dynamic Solution (Custom Section with Metafields)

For a scalable, maintainable, and truly dynamic solution, creating a dedicated Shopify section file that pulls data from product metafields is the superior approach. This allows each product to have its unique set of features, managed directly from the product editor.

How to Implement with Custom Section & Metafields:

1. Duplicate Your Theme: As always, start by duplicating your live theme.
2. Create a New Section File:
   • Go to Online Store > Themes > Actions > Edit code (on your duplicated theme).
   • In the 'Sections' directory, click 'Add a new section'.
   • Name it product-features.liquid and click 'Done'.
   • Paste the following code into the new file:

{% comment %}
  Product Features Section
  Dynamic product metafields:
  custom.feature_1_icon
  custom.feature_1_text
  ...
  custom.feature_8_icon
  custom.feature_8_text
{% endcomment %}


  


    {% for i in (1..8) %}
      {% assign ic | append: i | append: '_icon' %}
      {% assign text_key = 'feature_' | append: i | append: '_text' %}

      {% assign icon = product.metafields.custom[icon_key].value %}
      {% assign text = product.metafields.custom[text_key].value %}

      {% if text != blank %}
        


          {% if icon != blank %}
            
              {{ icon }}
            
          {% endif %}

          
            {{ text }}
          

        
      {% endif %}

    {% endfor %}

  




{% schema %}
{
  "name": "Product Features",
  "tag": "section",
  "class": "product-features-section-wrapper",
  "settings": [],
  "presets": [
    {
      "name": "Product Features"
    }
  ]
}
{% endschema %}

3. Create Product Metafields:
   • Go to your Shopify admin > Settings > Custom data.
   • Click on 'Products' > 'Add definition'.
   • Create 8 metafield definitions for icons and 8 for text, following this naming convention:
   • Name: Feature 1 Icon, Namespace and key: custom.feature_1_icon, Content type: 'Single line text'.
   • Name: Feature 1 Text, Namespace and key: custom.feature_1_text, Content type: 'Single line text'.
   • Repeat for feature_2_icon, feature_2_text, up to feature_8_icon, feature_8_text.
   • Ensure 'Access options' allows 'Storefronts' to read the values.
4. Add Data to Product Metafields:
   • Go to a specific product (e.g., Products > All products > [Your Product]).
   • Scroll down to the 'Metafields' section.
   • You will now see your newly created metafields. Enter an emoji for the icon (e.g., ☁️) and the feature text (e.g., Featherweight Serum) for each feature you want to display.
   • Save the product.
5. Add the Section to Your Product Template:
   • Go back to Online Store > Themes > Customize (on your duplicated theme).
   • Navigate to 'Products' > 'Default product'.
   • In the left sidebar, click 'Add section'. You will now see 'Product Features' listed. Select it.
   • Drag and drop the 'Product Features' section to your desired location (e.g., below the 'Buy buttons').
   • Click 'Save'.

Pros & Cons of Custom Section with Metafields:

• Pros: Highly dynamic (unique features per product), easy content management from product editor, scalable, reusable across templates, cleaner theme code.
• Cons: Requires initial setup of metafields and section file, slightly more complex for beginners.

Best Practices and Refinements

• Emoji Sourcing: For emojis, Windows users can press Windows key + Period (.), Mac users Fn/Globe + E. Copy and paste them directly into your metafields or code.
• Styling Consistency: The provided CSS ensures responsive behavior. For fonts, avoid hardcoding font-family in the CSS; let it inherit from your theme's body font for seamless integration. Adjust colors (e.g., #8b1616) to match your brand's palette using a color picker tool.
• Testing: Always test your changes thoroughly on different devices (desktop, tablet, mobile) to ensure responsiveness and functionality before publishing your duplicated theme.

Conclusion

Adding custom product feature sections is a powerful way to elevate your Shopify store, improve user experience, and drive conversions. Whether you opt for the quick 'Custom Liquid' block or the more robust 'Custom Section with Metafields', these techniques empower you to go beyond standard theme limitations. At Shopping Cart Mover, we specialize in helping businesses like yours achieve advanced customizations and seamless migrations, ensuring your e-commerce platform perfectly aligns with your vision. Don't hesitate to reach out if you need assistance in transforming your Shopify store.