Elevate Your Shopify Product Pages: Custom Feature Sections for the Smile Theme

Hey there, fellow store owners! As a Shopify migration expert, I often see merchants looking to make their product pages truly stand out. One common request, and a fantastic way to highlight key benefits, is adding a clean, visually appealing section of features or benefits. Think those neat icon-and-text lists you see on high-converting product pages.

Recently, I was following a great discussion in the Shopify community where a store owner, saqlain1, using the popular Smile theme (a style of the Nexa theme), asked for help implementing exactly this kind of feature section on their product page, specifically right under the 'Add to Cart' button. They even shared a screenshot of what they were aiming for:

This isn't a built-in feature in most themes, including Smile, so it requires a bit of custom code. But don't worry, the community came through with some fantastic, actionable solutions. Let's break down the two main approaches discussed, so you can pick the one that best fits your needs.

Option 1: Quick & Simple with a Custom Liquid Section (Static Content)

If your product features are generally the same across all or many of your products, or you just need a quick, straightforward solution without diving too deep into theme code files, this is a great starting point. v.marychenka provided a super easy-to-implement snippet that uses the "Custom Liquid" section built into Shopify's theme customizer.

How to Add a Static Feature Section:

First things first: always duplicate your theme before making any code changes! Go to Online Store > Themes, find your current theme, click Actions > Duplicate. This way, if anything goes awry, you can simply revert to your duplicated version.

1. From your Shopify admin, go to Online Store > Themes.
2. Click Customize next to your live theme.
3. In the theme editor, use the drop-down menu at the top to navigate to a Product page template (e.g., "Default product").
4. In the left sidebar, click Add section.
5. Search for and select Custom Liquid.
6. Clear any existing content in the Custom Liquid block and paste the following code:

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

7. Click Save. You can then drag this section to position it where saqlain1 wanted it – "under cta" (Call To Action), which usually means below the add-to-cart button.

This code creates a neat two-column grid on desktop and collapses to a single column on mobile, just like the example. It uses a specific red color (#8b2c2c) and a font size of 22px. Remember, you can easily swap out the emojis, text, and even the color code (just update #8b2c2c in the {% schema %} { "name": "Product Features", "tag": "section", "class": "product-features-section-wrapper", "settings": [], "presets": [ { "name": "Product Features" } ] } {% endschema %}

Click Save.

Now, go back to the theme customizer: Online Store > Themes > Customize.

Navigate to a Product page template.

In the left sidebar, click Add section, and you'll now see your new Product Features section available. Add it and position it as desired.

Setting Up Product Metafields:

For this dynamic section to work, you'll need to define metafields for your products. This is where you'll input the icon (emoji or text) and the feature description for each product.

1. From your Shopify admin, go to Settings > Custom data.
2. Click on Products.
3. Click Add definition.
4. For each feature you want to display (up to 8 in the provided code), you'll need two metafields: one for the icon and one for the text.
• Name: Feature X Icon (e.g., "Feature 1 Icon")
• Namespace and key: custom.feature_X_icon (e.g., "custom.feature_1_icon")
• Content type: Select Text > Single line text.
• Repeat for Feature X Text (e.g., "Feature 1 Text"), with namespace and key custom.feature_X_text, and Content type: Text > Single line text.
5. Once defined, go to any product in your Shopify admin, scroll down to the Metafields section, and you'll see your new fields ready for input!

This setup means you can easily update product features without touching any code, making it incredibly flexible for a growing store.

Expert Refinements & Best Practices

VikashJ from Apploy offered some excellent refinements that apply to both methods, ensuring your custom section looks polished and integrates seamlessly with your existing theme style:

• Font Inheritance: Instead of hardcoding a font in the CSS, it's generally best to let the text inherit your theme's default font. This ensures consistency across your site. The provided code snippets do a good job of this by not specifying a font-family, but it's a good principle to remember for any custom CSS.
• Color Matching: For an exact brand match, use your browser's developer tools (right-click > Inspect) to grab the hex code of any existing brand colors on your site. This ensures your new feature section's colors, like the red text (currently #8b2c2c or #8b1616 in the examples), perfectly align with your brand.
• Emoji Sizing: Emojis can sometimes render inconsistently or appear too small next to larger text. VikashJ suggested wrapping each emoji in its own tag and giving it a slightly larger font-size (e.g., 24-26px) than the accompanying text. The dynamic code from devcoders already implements this by wrapping the icon in a , which you can then style with specific font-size and other properties.

So there you have it! Whether you need a static list of features for all your products or a dynamic, product-specific showcase, the Shopify community has provided robust solutions for enhancing your Smile theme. Remember to always work on a duplicated theme, test thoroughly, and enjoy seeing your product pages shine with these custom touches!