Elevate Your Shopify Product Pages: Create Custom Highlight Sections with Popups (Smile Theme & Beyond!)

Hey everyone,

As a Shopify expert who spends a lot of time sifting through community discussions, I often come across merchants trying to add that extra "oomph" to their product pages. You know, those little details that really make a product shine and help customers quickly grasp its key benefits. Recently, I saw a great example of this in a thread started by @saqlain1, who was looking to create a specific kind of product highlight section for their "Smile" theme.

Saqlain1 had a clear vision: a section with distinct icons, titles, and clickable details that would pop up with more information, all while matching their brand's primary color, #0B283D. They even shared a screenshot of what they were aiming for – a really professional, branded look. It’s a common request, and for good reason! Highlighting key features visually can significantly improve conversion rates and customer understanding.

The Community Steps In: From Store URL to Universal Solution

Initially, some helpful folks like @websensepro and @Mustafa_Ali asked for the store URL. This is a super common first step, as seeing the live site helps developers understand the existing theme structure and potential conflicts. However, a real gem of a solution came from @alaattincagil, who pointed out that a store URL wasn't even necessary for this particular request.

Why? Because this kind of feature can be built as its own custom section, making it compatible with any Shopify 2.0 theme, including the "Smile" theme Saqlain1 was using. This is fantastic news because it means a solution like this isn't tied to one specific theme; you can build it once and potentially use it across different themes if you ever decide to switch!

Building Your Own Product Highlights Section: Step-by-Step

Alaattincagil's approach leverages Shopify's powerful Sections architecture, allowing you to create a reusable component that you can easily add and customize right from your theme editor. Here’s how you can implement this dynamic "Product highlights" section:

1. Access Your Theme Code: From your Shopify admin, go to Online Store > Themes. Find your current theme, click the ⋯ (three dots) button, and select Edit code.
2. Create a New Section: In the left sidebar, under the sections directory, click “Add a new section”.
3. Name Your Section: Name it product-highlights (make sure it's exactly that for consistency) and click "Done".
4. Replace the Code: Delete all the default code in the new product-highlights.liquid file and replace it with the code provided below. This code includes the HTML structure, the styling (CSS), and a small bit of JavaScript to handle the pop-up functionality.

  {% if section.settings.heading != blank %}
    
{{ section.settings.heading }}
  {% endif %}
  

    {% for block in section.blocks %}
      
        
          {% if block.settings.icon != blank %}
            {{ block.settings.icon | image_url: width: 120 | image_tag: loading: 'lazy', alt: '' }}
          {% endif %}
        
        {{ block.settings.title }}
        ›
      

      

        

          ×
          
            {% if block.settings.icon != blank %}
              {{ block.settings.icon | image_url: width: 160 | image_tag: loading: 'lazy', alt: '' }}
            {% endif %}
          
          
{{ block.settings.title }}
          
{{ block.settings.text }}
          {% if block.settings.link != blank %}
            {{ block.settings.link_label }}
          {% endif %}
        
      
    {% endfor %}
  






{% schema %}
{
  "name": "Product highlights",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "Highlights" },
    { "type": "color", "id": "brand_color", "label": "Brand color", "default": "#0B283D" },
    { "type": "color", "id": "icon_bg", "label": "Icon circle color", "default": "#E3ECF2" }
  ],
  "blocks": [
    {
      "type": "highlight",
      "name": "Highlight",
      "settings": [
        { "type": "image_picker", "id": "icon", "label": "Icon" },
        { "type": "text", "id": "title", "label": "Title", "default": "Clean Ingredients" },
        { "type": "richtext", "id": "text", "label": "Popup text", "default": "
Write a short explanation here.
" },
        { "type": "url", "id": "link", "label": "Button link" },
        { "type": "text", "id": "link_label", "label": "Button label", "default": "Learn more" }
      ]
    }
  ],
  "presets": [{ "name": "Product highlights" }]
}
{% endschema %}

5. Save Your Changes: Click "Save" in the top right corner.
6. Add to Your Product Template: Now, go back to your Shopify admin and navigate to Online Store > Themes. Click Customize on your current theme.
7. Select Product Template: In the theme editor, use the dropdown at the top to select Products > Default product (or whichever product template you want to add this section to).
8. Add the Section: In the left sidebar of the theme editor, click "Add section" and find "Product highlights" in the list.
9. Customize Your Highlights: Once added, you'll see options to add individual "Highlight" blocks. For each block, you can upload an icon (small, transparent PNG or SVG files work best for that clean circular look!), set a title, write the detailed pop-up text, and even add an optional "Learn more" link with its own label. You can also adjust the overall heading, brand color, and icon circle color for the entire section – perfect for matching Saqlain1's #0B283D brand color!

A big shout-out to alaattincagil for this clever solution! The pop-up functionality cleverly uses the browser's native