Sometimes a heart is used to display the wishlist link (a hyperlink to the Wishlist page) on Shopify stores. The heart is by default displayed using font awesome icons. However, due to lazy triggering of our app, there is an apparent delay in display of heart in the link. Despite it being a minor issue, some store owners get concerned over this.
Solution:
Here are two ways to fix this delayed icon display:
1. Load Font Awesome Synchronously:
This method forces your theme to load Font Awesome immediately, eliminating the delay.
- Step 1: Go to your Shopify theme editor.
- Step 2: Locate the theme.liquid file (or sometimes header.liquid). This file controls the <head> section of your store.
- Step 3: Paste the following code snippet inside the <head> tags:
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
2. Use an SVG Heart Icon:
This method replaces the Font Awesome icon with a lightweight SVG (Scalable Vector Graphic) that loads quickly.
- Step 1: Go to this GitHub Gist: https://gist.github.com/webmarked/fc7a7ab7448216cc3c4146b6ad1f0baf
- Step 2: Copy the HTML code provided.
- Step 3: In your theme’s code, find where the heart icon (<i>…</i>) for the Wishlist link is located.
- Step 4: Replace the <i>…</i> code with the SVG code you copied.
Explanation:
- Font Awesome: A popular icon library that provides scalable vector icons. However, loading it asynchronously (the default in many apps) can sometimes cause delays.
- Synchronous Loading: Forces the browser to load the Font Awesome stylesheet immediately before rendering the rest of the page, ensuring the icon appears on time.
- SVG: A lightweight image format perfect for simple icons. SVGs load quickly and are generally more performant than icon fonts.
By implementing either of these solutions, you’ll ensure your Wishlist heart icon appears instantly, providing a smoother user experience for your customers.