Motion Theme - Add Icon to header beside cart

[DannyOhh77]

I would like to add an icon in my header (in line with my search and cart icons) that links to a page on my Shopify site. Can this be done in the Motion theme? 

 

[Ignelis]

1. Click on the Actions button next to the Motion theme and select Edit code.

2. In the left-hand menu, navigate to the Assets folder and click on Add a new asset.

3. Name the new asset "custom.js" and select JavaScript as the file type.

4. Open the newly created custom.js file and paste the following code:

jQuery(document).ready(function($) {
  // Replace "ICON_URL" and "PAGE_URL" with your desired icon and page URLs
  var iconHtml = '<a href="PAGE_URL"><img src="ICON_URL" alt="Icon"></a>';
  
  // Add the icon HTML to the header
  $('.site-header__icons').prepend(iconHtml);
});

5. Replace "ICON_URL" and "PAGE_URL" with the URL of your desired icon and page, respectively.

6. Save the custom.js file and refresh your website to see the new icon in the header.

[DannyOhh77]

I tried the code, but didn't see any change to the site, unless I did something wrong. Is there anything I should do besides create the asset above and fill in the appropriate URLs? Thank you!

[Ignelis]

Hey. Did you change the parts that you were supposed to change? For example PAGE_URL , ICON_URL and etc.?

[DannyOhh77]

Hi,

Yes, I changed PAGE_URL to the website's url and ICON_URL to the images URL. Is this correct? Thank you!