How to Open Links in a New Tab on Dawn Theme

How to Open Links in a New Tab on Dawn Theme

In this tuturial, I’ll be showing you how to open external links in a new tab on the free shopify theme, Dawn.

External links are URLs that direct customers to different websites, such as the links included in social media icons.

This is a great fix for those social icons, such as facebook and instagram in your footer on the Dawn theme.

Currently these links are opening in the same tab, which means that they are over-riding your website. Best practice is to have these links open in a new tab so your visitors and customers can easily navigate back to your website.

*They’ll also find your website even easier if you have a favicon setup.

Note

This tutorial involves adding some code to your theme.

Let's add some code to your theme's JavaScript file

  1. From inside your Shopify admin, go to Online Store > Themes.
  2. Find the theme you want to edit, most likely the live theme and create a backup/copy, click Actions > Duplicate
  3. Now that your theme is safely backed up, find the theme you want to edit, and then click Actions > Edit code.
  4. Under the Assets directory, click on the global.js file
  5. Paste the following code at the bottom of the file:
    var links = document.links;
    for (let i = 0, linksLength = links.length ; i < linksLength ; i++) {
    if (links[i].hostname !== window.location.hostname) {
    links[i].target = ‘_blank’;
    links[i].rel = ‘noreferrer noopener’;
    }
    }
  6. Click Save

Now test an external link on your website to see if it works correctly!

Congratulations you're finished!


What is a Hero Banner?

What is a Hero Banner?

A Hero Banner is the term used to describe a large, mostly full-width image at the top of a website and is often the first thing users see when arriving on a website.

Using a hero banner on your site can help to establish trust among new visitors and even convert them into customers, by helping them understand your offering and the website’s direction.

In today’s world, we need two hero banner options. One for mobile, which is usually square or portrait to fit the layout of a mobile device, and of course the desktop version, traditionally a full-width landscape banner.

Ultimately, a Hero Banners job is to grab the user’s attention as soon as they land on a page and to help users identify the brand’s unique selling point (USP) and form an opinion about the brand as soon as the page loads.

What are the 3 main elements of a Hero Banner?

A Hero Banner should consist of at least these 3 things:

  • Image
  • Heading
  • Call-to-Action

1. High quality Imagery to showcase your product

  • Your hero banner should consist of high quality imagery to showcase your product/s. Its best is the image shows the product in use, or with a face or hand in shot.
  • Does the image you’ve selected actually add value?
  • he perfect hero image is supposed to complement your product images and core offering - that’s very hard to achieve with stock images.

2. A heading which contains a keyword and explains your offering.

  • A hero banner works best if you add a heading, the heading can contain your company’s unique selling point (USP)
  • Research shows that headings with old amounts of words (ie 7 or 9 words) engage & convert best.
  • Try and incorporate your main keyword for that page in your heading. As majority of hero banner headings are coded as H1 (Heading 1) a term google uses to understand the content of the page.

3. A strong call-to-action that tell user how to respond

  • Use strong contrasting brand colours to make your Call-To-Actions to stand out
  • Stop using boring phrases such as LEARN MORE and BUY NOW. Your Call-to-Action needs to relate to your benefit. Get creative...
  • Try using Time Sensitive Words eg: Quick! Start Shopping, Get your ........ today!
  • Use icons to create direction; eg arrows on buttons
  • Place your CTA in the Right Place

Conclusion

To create an effective hero banner remember these things:

  • Use only the highest quality images. But run them through TinyPNG to compress the file size.
  • Make sure your loading time is quick, just a few seconds too long to load will cost you your viewers.
  • Get the message and visuals aligned with your brand and add a clear value proposition.
  • Add a call to action that speaks to your users. Speak in your brands voice.
  • And lastly, make sure that your hero banner is in keeping inline with your brand identity.