Making a button URL that uses a metafield open in new tab

Store Design
,

Topic summary

A Shopify store owner using the Woodstock theme wants product page buttons—populated from metafield URLs linking to files hosted in Shopify—to open in new tabs instead of the current tab.

Technical Solution:

  • Add target="_blank" attribute to the <a> tag rendering the button
  • The challenge: URLs come from product metafields rather than hardcoded links, complicating direct code modification

Implementation Steps:

  1. Access theme code editor
  2. Locate the file rendering the buttons (likely multicolumn.liquid or similar section file)
  3. Use Ctrl+F to search for the class name multicolumn-card__link
  4. Add target="_blank" to the corresponding <a> tag

Current Status:

  • The original poster struggled to locate the exact code snippet in their paid theme files
  • One community member successfully applied this solution to their own store
  • Discussion remains open as the original poster may need additional guidance on identifying the correct file/code location for their specific theme structure
Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

Hi, I am using Woodstock theme.

On a product template, I’m using the promotions card section that pulls a URL from a product metafield to populate the CTA. Not all products have them but this one does.

Screenshot 2024-12-11 140311.png
Screenshot 2024-12-11 140311.png1156×229 9.36 KB

The metafield URLs are links to files that sit inside Shopify, so not technically an external link I don’t think. I’d love these buttons to open in a new tab but I can’t figure out how to do that.

Any help would be great! Thanks

2

This is simple. Just open your code editor and open the file that is rendering the buttons. The button are a tag, inside the a tag just add this attribute target=“blank”. This will open the file on a new tab

3

Thanks, I’m not a pro with coding. Do you mind providing a bit more info on where I would find the file with buttons in it? And what the button tag looks like?

4

This is what it will look like

Shadab_dev_0-1733887876240.png

You are using a paid theme so to tell you the exact file or see it myself i will need access. If it was a free theme by shopify i could have told you the file name. You can check for file names like multi-column.liquid that renders the molticolumn section

1 Like
5

Hi @Franrulzok

I hope you are well.

When clicking on a link to open it in a new tab, the tag should include the attribute target=“_blank”, like this: Example screenshot.

For instance, in this case, the tag does not have the target=“_blank” attribute: Example screenshot. As a result, clicking the link redirects the user to the current tab instead of opening a new one.

You should find tag and adjust target="_blank"then it will work properly.

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.
6

So I’m not coding in a URL, otherwise this solution would work. I’m adding a URL to a product metafield and the section on the product page is populated based on the metafield.

Any other ideas on how to acheive this?

7

I found the multicolumn.liquid but that code you’ve copied isn’t in there. If I search button, many instances come up but not that specific code.

8

Hi @Franrulzok

Could you please share the screenshot of the code you are referring to? And also the meta field setting from your end.

Thank you so much!

Best,

Daisy - Avada Support Team.

9

Try searching with the class name with ctrl + f. Click inside the code editor and press ctrl + f a search bar will appear down below then paste this multicolumn-card__link.

10

Thank you @Shadab_dev , that helped me when I was trying to achieve the same thing!

11

Great to hear that. Its interesting how you can reach multiple people from a single post :blush:

1 Like