How to open a social media icon in a new tab using the Dawn theme?

[monkthatsells]

Hi, Can someone please help us open the social media icon in a new tab? We are using the dawn theme. Thanks

[diego_ezfy]

Hello @monkthatsells,

Please share:
- your store URL;
- page URL with the issue you mention;
- storefront password (if your store has one).

If the store is not online yet, please follow this quick tutorial to learn how to safely and temporarily share an offline/unpublished theme URL.

Kind regards,
Diego

[monkthatsells]

Hi  @diego_ezfy 

Here: www.chorder.co

Pass: hello2021

The social media icons (fb & ig) that are on the footer - When a user clicks on them they leave our website page and are redirected to the social media page. What we want to achieve is that when a user clicks on social media icon - a new tab should open. 

[monkthatsells]

Hi @diego_ezfy 

Can you help us?

[diego_ezfy · Accepted solution]

@monkthatsells,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

<script>
function addAnchorToIcons(){
var $icons = document.querySelectorAll(`.list-social__item a`);

if (!$icons){
return;
}

for (var each of $icons){
each.setAttribute("target", "_blank");
}

}

addAnchorToIcons();
</script>

Kind regards,
Diego

[CEDOUBLÉ]

Hello,

should the same thing apply to the Debut theme? Because I tried it and it unfortunately didn't work...

Thanks!

[biibii]

sa ne fonctionne pas du tout et puis je ne trouve pas ou est le body

[clearoltd]

I have tried this code and it did not work.

[christina412]

Thank you!

[RepeatToFade]

Thanks so much, worked for me (using 'Ride' theme)

[TinyHustlr]

Worked for me first go but I just updated all the JavaScript 'var' statements to the more modern 'let' statement. Both statements will work totally fine, it was largely for my code OCD rather than functionality. 😄

    <script>
    function addAnchorToIcons(){
    let $icons = document.querySelectorAll(`.list-social__item a`);
    if (!$icons){
    return;
    }
    for (let each of $icons){
    each.setAttribute("target", "_blank");
    }
    
    }
    addAnchorToIcons();
    </script>

[IWillWander]

After much searching this worked perfectly. Thanks for this.