Mastering the Emerge Theme: How to Add a Secondary Button to Your Shopify 'Image with Text' Section

Hey everyone! Your friendly Shopify expert here, diving into a really common and super useful customization request I saw pop up in the community forums recently. Hannahoreilly1 was looking to add a secondary button to the 'Image with Text' section in her third-party 'Emerge' theme, and let me tell you, this is a fantastic idea for boosting conversions and offering visitors more choices without cluttering your design. It's a question we hear often, and the community really rallied to provide some solid advice!

The 'Image with Text' section is a staple for so many stores – perfect for showcasing products, promotions, or key brand messages. But sometimes, one button just isn't enough. Maybe you want a 'Shop Now' and a 'Learn More', or a 'View Collection' and 'Our Story'. Having that second CTA can make a huge difference. Hannahoreilly1 was aiming for a look something like this:

Now, with third-party themes like Emerge, the exact steps can vary a bit from the standard Shopify themes. The consensus from the thread, particularly from experts like Hardeep, cuongnm_trooix, and ajaycodewiz, was that for Emerge, this isn't a one-file fix. It's a two-file job, because the 'Image with Text' section actually renders its content, including those buttons, through a separate snippet called featured-content.liquid. This is a pretty common theme development pattern for keeping things modular.

So, if you're ready to roll up your sleeves a little and get into some Liquid code (don't worry, we'll go step-by-step!), here's how you can add that secondary button to your Emerge theme:

Step 1: Always, Always Backup Your Theme!

Before you touch any code, head to your Shopify admin, go to Online Store > Themes. Find your current theme, click Actions > Duplicate. This creates a safe copy you can revert to if anything goes awry. Trust me, future you will thank me!

Step 2: Edit Your sections/image-with-text.liquid File

This file is where we'll tell your theme that you want new options for a second button in your theme customizer.

1. In your Shopify admin, go to Online Store > Themes.
2. Click Actions > Edit code on your duplicated theme.
3. Under the 'Sections' folder, find and open image-with-text.liquid.

4. Scroll down to the {% schema %} block (it's usually near the bottom). Look for the existing settings for "link-url" and "link-text". We're going to add our new settings right after them. Here's what you'll add:

   {
     "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."
   }

   Notice how we're using consistent hyphenated IDs like link-url-2 and link-text-2, as suggested by cuongnm_trooix, and also adding a link-style-2 for more flexibility, as Hardeep's initial complete code showed. This lets you choose if your second button is primary or secondary in style!

5. Now, scroll up in the same file to find the render 'featured-content' call. This is where your section passes all its settings to the featured-content snippet. You need to add your new button parameters to this list. Find the lines for link_text and link_url, and add the new ones right below them:

   link_text: section.settings.link-text,
   link_url: section.settings.link-url,
   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 ensures the featured-content snippet receives the data for your second button. This is what the new settings will look like in your theme editor once you've added them:

   

6. Click Save.

Step 3: Edit Your snippets/featured-content.liquid File

This is the file where the actual button HTML is generated. We need to duplicate the existing button structure and apply your new settings.

1. In the Edit code screen, navigate to the 'Snippets' folder and open featured-content.liquid.

2. Now, this is the trickiest part, as the exact code can vary. You'll need to find where the existing link_text and link_url are rendered. It will likely look something similar to this (though class names might differ):

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

3. To have both buttons appear side-by-side, you'll want to wrap them in a container that uses flexbox. Replace the original button code with something like this, incorporating your new link_text_2, link_url_2, and link_style_2:

   
     {% 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 %}
   

   The {{ link_style_2 }} part is super handy here because it will dynamically apply either button--primary or button--secondary based on your selection in the theme editor! You might need to add some basic CSS to your theme's theme.scss.liquid file (or similar) for the .button-group to ensure proper spacing between the buttons, for example:

   .button-group {
     display: flex;
     gap: 15px; /* Adjust spacing as needed */
     flex-wrap: wrap; /* Ensures buttons wrap on smaller screens */
   }

4. Click Save.

Step 4: Test in the Theme Customizer

Now, go back to your Shopify admin, navigate to Online Store > Themes, and click Customize on your duplicated theme. Find your 'Image with Text' section, and you should now see the new fields for 'Second link', 'Second button label', and 'Second button style'. Fill them out, save, and check how it looks on your store!

Alternative: Consider a Third-Party App

If diving into code feels a bit overwhelming, remember that there are apps out there designed to help with more complex page building and section customization. Ariyeh_Even_Hai in the thread mentioned 'Cloude MCP' as an option. While I always recommend learning a bit of Liquid, these apps can be a lifesaver if you need a quick, no-code solution or more advanced layout control.

A Final Thought on Third-Party Themes

One critical piece of advice, echoed by Steve_TopNewYork and Mustafa_Ali, is that because Emerge is a third-party theme, its developers might have specific documentation or even a built-in way to handle this. It's always worth checking their support resources or reaching out to them directly. This ensures you're making changes in the most theme-compatible way, especially for future updates.

Adding a secondary button is a fantastic way to enhance user experience and guide your customers more effectively through your store. It might seem like a small code tweak, but these kinds of thoughtful additions can really make your store stand out and perform better. If you're looking to start your own Shopify store, customizing your theme like this from the get-go can give you a significant advantage. Remember to always work on a duplicated theme, test thoroughly, and don't be afraid to ask for help in the community if you get stuck. Happy customizing!