Overview
This guide explains how to add a custom icon to your Online Store menu bar and configure it to trigger Loyalty Link.
The implementation is done by inserting a custom icon element into the relevant Liquid file of your theme and assigning the appropriate Deep Link behavior.
Step-by-Step Implementation Guide
Step 1: Identify the Target Insertion Location
Before editing theme code, determine where the icon should appear (this guide uses the header as an example).
a. Identify Nearby Elements
Open your Online Store in a browser.
Locate the area where you want to insert the icon (e.g., next to an existing menu item or icon).
b. Open Browser Developer Tools
Use your browser’s developer tools to inspect the page.
If you're using Chrome:
Right-click on your storefront and select Inspect
Or press
F12(Windows/Linux) orFn + F12(Mac) to open DevTools
If you're using Safari:
Open Safari > Settings (or Preferences)
Go to the Advanced tab and enable “Show Develop menu in menu bar”
Open your site and select Develop > Show Web Inspector
c. Inspect Element Attributes
Inspect the elements adjacent to the desired location.
Take note of identifying attributes such as:
classid
Copy these attributes for use when locating the corresponding code in the theme files.
Step 2: Open the Theme Code Editor
Go to Shopify Admin.
Navigate to Online Store → Themes.
Click “Edit code” on the active theme.
Step 3: Locate the Relevant Theme File
Use the search function in the code editor.
Search for the
classoridyou identified in Step 1 (for example,header__icon--acount).Open the corresponding Liquid file (commonly a file related to
header,navigation, ormenu).
Step 4: Customize and Insert the Icon
a. Upload the Icon Asset
Upload the icon image to the assets directory.
You can do this by copying and pasting the image file into the assets folder.
b. Insert the Icon Code
Add the following code at the target location in the Liquid file.
Make sure the icon file name exactly matches the one uploaded to your assets, and double-check the file name (for example, diamond-white.webp).
<a href="javascript:void(0);" onclick="history.replaceState(null,null, ' '); window.location.hash = 'loloyal-home';" class="trustoo-loyalty-icon tap-area sm:block" style="display:flex;align-items:center;"> <img src="{{ 'diamond-white.webp' | asset_url }}" width="22" height="22"> </a>Notes: You may adjust the class, width, or height values to match your theme’s design and spacing.
Final Checks
Save the changes.
Refresh your Online Store.
Confirm that:
The icon is displayed correctly.
Clicking the icon triggers the expected Deep Link behavior.
The layout remains consistent across desktop and mobile views.