Solved

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

monkthatsells
Tourist
8 0 3

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

Accepted Solution (1)
diego_ezfy
Shopify Partner
2967 571 900

This is an 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

View solution in original post

Replies 11 (11)

diego_ezfy
Shopify Partner
2967 571 900

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
Tourist
8 0 3

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
Tourist
8 0 3

Hi @diego_ezfy 

Can you help us?

diego_ezfy
Shopify Partner
2967 571 900

This is an 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É
Excursionist
29 0 8

Hello,

 

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

 

Thanks!

biibii
Visitor
2 0 0

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

clearoltd
Visitor
1 0 0

I have tried this code and it did not work.

christina412
Visitor
1 0 0

Thank you!

RepeatToFade
Visitor
1 0 0

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

TinyHustlr
Visitor
1 0 0

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
Visitor
1 0 0

After much searching this worked perfectly. Thanks for this.