Unlock Dynamic Product Features on Your Shopify Smile Theme: A Community Guide

Hey there, fellow store owners! It's your Shopify expert here, fresh off a deep dive into the community forums. You know, one of the best things about Shopify is its flexibility, but sometimes, getting that exact look or functionality you envision requires a little custom magic. That's precisely what came up in a recent thread where a merchant, saqlain1, was looking to add a stylish, two-column list of product features – complete with emojis – to their Shopify Smile theme.

This isn't just about a pretty list; it's about clearly communicating product benefits right where it matters most: on the product page, often right below that crucial "Add to Cart" button. It's a common need, and the community really stepped up with some fantastic solutions. Let's break down the discussion and give you the actionable insights to implement this on your own store.

The Challenge: Custom Product Features on the Smile Theme

Saqlain1 was using the Smile theme (which, as some pointed out, is often a style of the Nexa theme) and wanted to display a concise list of product features. They shared a screenshot showing something like this:

The general consensus from experts like Mustafa_Ali and devcoders was clear: this isn't a built-in feature, so it needs a custom section. The good news? There are a couple of great ways to achieve it, depending on how dynamic you need your features to be.

Option 1: The Quick & Simple Custom Liquid Block

For those who want a fast, straightforward solution, v.marychenka offered a fantastic, ready-to-use HTML and CSS snippet. This method is perfect if your product features are largely static or you don't mind a quick dive into the theme customizer to update them manually. It uses Shopify's Custom Liquid section, which is a powerful tool for injecting custom code without directly editing core theme files.

How to Implement the Custom Liquid Block:

Step 1: Duplicate Your Theme (Crucial!)
Before making any code changes, always, always, always duplicate your live theme. Go to Online Store > Themes, find your current theme, click "Actions" > "Duplicate." This creates a safe backup, so you can easily revert if anything goes wrong. Shopify Support generally can't help with custom code issues unless you're on Shopify Plus.

Step 2: Add the Custom Liquid Section

  1. From your Shopify admin, go to Online Store > Themes.
  2. Click Customize on your duplicated theme.
  3. Navigate to a Product template (you might need to select it from the dropdown at the top of the Customizer).
  4. In the left sidebar, click Add section.
  5. Search for and select Custom Liquid.
  6. Clear any existing code in the Custom Liquid block.
  7. Paste the following code into the Custom Liquid input field:

☁️ Featherweight Serum

🔵 Anti-Inflammatory

🌬️ Breathable + Weightless

🧷 Non-Acnegenic

🕰️ 16-hr Long Wear

✨ Skin-Like Finish

🍃 Silicone-Free

👌 Medium-Buildable Cover

  1. Click Save.

Step 3: Customize Emojis, Text, and Styling
The beauty of this code is how easy it is to change. V.marychenka and VikashJ offered some great tips here:

  • Changing Emojis: You can simply select the old emoji in the code and paste a new one over it. On Windows, use Windows key + Period (.). On Mac, use Fn/Globe + E or Edit > Emoji & Symbols.
  • Matching Your Theme's Font: VikashJ wisely suggested that instead of hardcoding a font, let the CSS inherit from your theme. The provided code already does this by not specifying font-family, which is great for consistency.
  • Exact Color Match: The code uses #8b2c2c for the red text. If you want an exact match to other colors on your site, use your browser's developer tools color picker to grab the hex code from existing elements.
  • Emoji Sizing: For better control over emoji size, VikashJ recommended wrapping each emoji in its own tag and giving it a slightly larger font size (e.g., font-size: 24px;) than the surrounding text. This prevents them from looking tiny next to the 22px text.

Option 2: The Pro-Level Dynamic Section with Metafields

While the Custom Liquid approach is great for quick setups, devcoders presented a more advanced, scalable solution that leverages Shopify's metafields. This is what you want if you have many products, and each product needs its own unique set of features that you can easily manage from the product admin without touching any code after the initial setup. It creates a proper Shopify section that can be added and configured right within the theme customizer.

How to Implement the Dynamic Product Features Section:

Step 1: Create a New Section File

  1. From your Shopify admin, go to Online Store > Themes.
  2. Click Actions > Edit code on your duplicated theme.
  3. In the left sidebar, under the Sections directory, click Add a new section.
  4. Name the file product-features.liquid (or any descriptive name you prefer).
  5. Paste the following code into the new file, replacing any default content:
{% 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 %}
  1. Click Save.

Step 2: Add the New Section to Your Product Template

  1. Go to Online Store > Themes.
  2. Click Customize on your duplicated theme.
  3. Navigate to a Product template.
  4. In the left sidebar, click Add section.
  5. You will now see "Product Features" as an option. Select it.
  6. Drag and drop the "Product Features" section to your desired location (saqlain1 wanted it "product page under cta").
  7. Click Save.

Step 3: Define Your Product Metafields
This is where the magic of dynamic content happens. For each product where you want to display features:

  1. From your Shopify admin, go to Products and select a product.
  2. Scroll down to the Metafields section. If you don't see it, you might need to enable custom metafields in Settings > Custom data.
  3. You'll need to create custom metafields for each feature. The code is set up to look for up to 8 features:
    • custom.feature_1_icon (for the emoji or icon)
    • custom.feature_1_text (for the feature description)
    • ... up to custom.feature_8_icon and custom.feature_8_text
  4. For each feature, add the appropriate icon (an emoji works great here!) and text.
  5. Click Save on the product page.

Now, when you view that product page, your custom features will appear, pulling directly from the metafields you just set up!

Which Option is Right for You?

Both methods are valid, and the "best" one really depends on your specific needs:

  • If you only have a few products, or your features are universal across many products, the Custom Liquid Block is a super-fast way to get started. Just remember you'll need to edit the code directly if you want to change the features.
  • If you manage a large inventory, or each product has distinct features, the Dynamic Section with Metafields is the clear winner. It's more work upfront to set up the section and metafields, but the long-term benefit of managing content directly from the product page (without touching code) is invaluable. It makes your store much more scalable and easier to maintain for you or your team. This is often the preferred route for a professional Shopify store owner looking to build a robust online business.

No matter which path you choose, remember the golden rule: always test on a duplicated theme first! The Shopify community is a fantastic resource for these kinds of challenges, showing just how much you can customize your store with a little expert guidance. Happy building!

Share:

Start with the tools

Explore migration tools

See options, compare methods, and pick the path that fits your store.

Explore migration tools