Motion Theme - Add Icon to header beside cart

Shopify Discussion
1

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?

Screenshot 2023-03-07 130559.png
Screenshot 2023-03-07 130559.png283×175 25.6 KB

2

  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 = '';
  
  // Add the icon HTML to the header
  $('.site-header__icons').prepend(iconHtml);
});

  1. Replace “ICON_URL” and “PAGE_URL” with the URL of your desired icon and page, respectively.

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

3

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!

4

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

5

Hi,

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