Supercharge Your Shopify Store: Adding a Secondary Button to Emerge Theme's 'Image with Text' Section

Hey there, fellow store owners! Ever found yourself staring at a beautiful theme section, wishing it just had one more little tweak to make it perfect? Maybe an extra call-to-action to guide your customers exactly where you want them to go?

That's exactly what hannahoreilly1 ran into recently in the Shopify Community. She was using the third-party Emerge theme and wanted to add a secondary button to her 'Image with Text' section. You know, that versatile section where you pair a compelling image with some engaging copy and a button to drive action. But what if you need two buttons?

It's a common scenario: one button for "Shop New Arrivals" and another for "Learn More," or "Shop Men's" and "Shop Women's." The single button just doesn't always cut it. And as hannahoreilly1 discovered, out-of-the-box, the Emerge theme's 'Image with Text' section typically only offers one.

Here's what she was aiming for:

The Community Weighs In: A Two-File Solution

The good news? The Shopify community quickly rallied around hannahoreilly1, and the consensus from experts like Hardeep, ajaycodewiz, cuongnm_trooix, and others was clear: this is totally achievable, but it's going to require a little dive into your theme's Liquid code.

The core insight? Your 'Image with Text' section in the Emerge theme, like many modern Shopify themes, actually leverages two files to display its content:

• sections/image-with-text.liquid: This file defines the overall structure of the section and, crucially, contains the {% schema %} block where you define all the settings that appear in your Theme Customizer.
• snippets/featured-content.liquid: This is a reusable piece of code (a "snippet") that the image-with-text.liquid section renders. It's where the actual HTML markup for things like your heading, description, image, and critically, your buttons, lives.

So, to add a second button, you need to make changes in both places.

Step-by-Step: Adding Your Secondary Button

Before You Start: Backup Your Theme!

Seriously, this is non-negotiable. Anytime you're editing theme code, always duplicate your live theme first. That way, if anything goes awry, you can revert to a working version instantly. Go to Online Store > Themes, find your current theme, click Actions > Duplicate.

Step 1: Locate Your Theme Files

In your Shopify admin, navigate to Online Store > Themes. Click Actions > Edit Code for your duplicated theme. You'll be looking for these two files:

• sections/image-with-text.liquid
• snippets/featured-content.liquid

Step 2: Update sections/image-with-text.liquid

This is where you'll tell your theme that you want new settings for a second button to appear in the Theme Customizer. You'll also pass these new settings to the featured-content snippet.

A. Add New Settings to the Schema

Scroll down in sections/image-with-text.liquid until you find the {% schema %} block. Inside the "settings": [...] array, look for where your existing link-url and link-text settings are defined. Hardeep suggested adding a new header for clarity, which is a great idea.

Add the following code snippet after your existing link-text setting, or in a logical place within the schema:

{
  "type": "header",
  "content": "Second button"
},
{
  "id": "link-url-2",
  "label": "Second link",
  "type": "url"
},
{
  "id": "link-text-2",
  "label": "Second button label",
  "type": "text",
  "default": "Shop all"
},
{
  "id": "link-style-2",
  "label": "Second button style",
  "type": "select",
  "options": [
    { "label": "Primary", "value": "button--primary" },
    { "label": "Secondary", "value": "button--secondary" }
  ],
  "default": "button--secondary",
  "info": "Only used if your featured-content snippet is updated to render this setting."
}

As cuongnm_trooix pointed out, it's good practice to keep your IDs consistent with the existing hyphenated format (e.g., link-url-2 rather than button_link_2). This snippet adheres to that.

B. Pass New Settings to the featured-content Render Call

Now, find the line where your section renders the featured-content snippet. It will look something like this:

{%-
  render 'featured-content',
  description: section.settings.description,
  fetchpriority: fetchpriority,
  full_width: full_width,
  heading_type: section.settings.heading-type,
  highlight_color: section.settings.highlight-color,
  highlight_text: section.settings.highlight-text,
  highlight_type: section.settings.highlight-type,
  id: section.id,
  image: section.settings.image,
  image_display_type: display_type,
  image_aspect_ratio: aspect_ratio,
  link_text: section.settings.link-text,
  link_url: section.settings.link-url,
  loading: loading,
  mobile_full_width: mobile_full_width,
  mobile_hide_description: section.settings.mobile-hide-description,
  mobile_image: section.settings.mobile-image,
  mobile_image_display_type: mobile_display_type,
  mobile_image_aspect_ratio: mobile_aspect_ratio,
  mobile_text_alignment: section.settings.mobile-text-alignment,
  mobile_overlay: section.settings.mobile-overlay,
  overlap: overlap,
  overlay_style: section.settings.overlay-style,
  overline: section.settings.overline,
  parallax_enabled: section.settings.parallax-enabled,
  sizes: sizes,
  text_style: section.settings.text-style,
  text_bg_color: text_bg_color,
  text_position: text_position,
  text_width: section.settings.text-width,
  title: section.settings.title,
  text_x_alignment: section.settings.text-horizontal-alignment,
  text_y_alignment: section.settings.text-vertical-alignment,
  white_text: section.settings.white-text
-%}

You need to add the new button settings as parameters to this render call. Locate the existing link_text and link_url lines, and then add these three new lines right after them, as shown in Hardeep's updated code:

link_text_2: section.settings.link-text-2,
link_url_2: section.settings.link-url-2,
link_style_2: section.settings.link-style-2,

This passes the values from your new section settings into the featured-content snippet, where they can actually be used to build the button.

After these changes, your theme customizer for the 'Image with Text' section should look something like this (courtesy of Hardeep's screenshot):

Step 3: Edit snippets/featured-content.liquid

This is the final, crucial step. In this file, you'll find the actual HTML markup that renders your content, including the existing button. You need to duplicate that button logic for your new secondary button.

Open snippets/featured-content.liquid. Search for where the existing link_text and link_url are used to create an tag (your button). It might look similar to this:

{% if link_text != blank and link_url != blank %}
  
    {{ link_text }}
  
{% endif %}

To ensure both buttons display nicely, especially side-by-side, it's a good idea to wrap them in a container. Here's how you might modify that section, building on the community's advice (like ajaycodewiz's suggestion for a flex container):

  {% if link_text != blank and link_url != blank %}
    
      {{ link_text }}
    
  {% endif %}

  {% if link_text_2 != blank and link_url_2 != blank %}
    
      {{ link_text_2 }}
    
  {% endif %}

This code block does a few things:

• It checks if link_text_2 and link_url_2 (your new settings) are not blank.
• If they're filled, it creates a new tag, using the link_url_2 for the destination and link_text_2 for the button label.
• It uses link_style_2 to apply a class like button--secondary (or button--primary if you choose), ensuring your second button matches your theme's styling.
• The outer
  uses inline flexbox styling to place the buttons side-by-side with a little space between them. You might want to move this styling to your theme's CSS file for better practice, but this gets you started!