I’d like button actions that have a link to another website, open in a new window rather than take the viewer away from my shop. I’d appreciate some help finding and adding/editing the code to enable this.
Hopefully someone can help me.
Topic summary
A Shopify store owner wants external links on their site to open in new browser tabs instead of navigating users away from the shop. The solution involves adding target="_blank" attribute to anchor tags in the theme code.
Technical guidance provided:
- Access theme code editor via the three dots next to the customizer button
- Locate the relevant section files (e.g.,
image-with-text.liquidorrich-text.liquid) - Find
<a>tags and addtarget="_blank"attribute - Example:
<a href="url.com" target="_blank">Link text</a>
Specific case:
The store owner shared their site (tedknitsuk.co.uk) with two buttons needing modification:
- “Buy your tickets” button (in image-with-text section)
- “Click here to see the patterns” button (in rich text section)
One responder offered to provide specific code if given more details, while another offered hands-on help with collaborator access. The discussion remains open as the store owner seeks precise instructions for their particular sections.
1 Like
The buttons that have a link are built with a tags with an href attribute pointing to the destination url. All you need to do is add to those buttons inside the a tag an attribute of target.
Ex:
<a href=“google.com” “target=_blank”>Go to Google
This “target=_blank” property takes the user to the new url opening on a new tab.
Hi, Thanks for this.
I’ve read that this is the case and the “target=_blank” needs to be added to the code, but I don’t know where the correct section of the theme is to add this code. Where will I find the correct section of code to add this?
Thanks.
So open your theme code editor. You will find that by clicking the 3 dots beside the customizer button.
Click on three dots and click on edit code, this will open the theme code editor.
Now check the name of your section for which you want to edit code and search for the same name in the theme code editor.
So for eg, if you looking to edit image with text section, search for image-with-text.liquid. Open the file and look for any a tag like the example provided earlier and add the target property on them.
Could feel overwhelming if you haven’t done this before but honestly not that tough to do, will also be a learning experience once you know to navigate the code editor.
Anyways if you still need help, you can always reach out from personal links down below in the signature. Will need Collab access to your store if you want me to do it.
1 Like
Please share the link to your store and which link so you want to open in a new window so I can give you the code to do that.
1 Like
Hi Dan,
thanks for your reply.
Here is my store https://tedknitsuk.co.uk
and here are the buttons with links to external websites that I would like to open in a new window. The ‘Buy your tickets’ here button is in a text with image section and the ‘Click here to see the patterns’ button is in a rich text section.
If you can tell me where I can find the code I need to edit and what I need to add, I’m pretty confident that I’d be able to do it.
Thanks so much.
Ted
