Some store owners have often enquired why wishlist button doesn’t load at the same time as other elements of page (e.g. Add to Cart button). The simple answer to this is that Add to cart button is core component of Shopify, while Wishlist button is a component of 3rd party App.
Our App is triggered by Shopify only after all synchronous elements (HTML, CSS, JS, Images, Fonts) of store have fully loaded. In layman term, as soon as the loading spinner of the browser stops, the App gets triggered and the Wishlist button gets displayed. The time gap between stopping of loading spinner and display of wishlist button is always less than 0.5 seconds. In fact, on average it is between 0.1-0.2 seconds. This may take little longer during the first visit of a user. For the remaining part of the browsing session and during subsequent visits, the App Cache takes over and the Wishlist button is displayed within 0.5 seconds.
Technically, this happens because our app is integrated using Script Tags, which is the Shopify recommended approach for frontend integration.
It has following benefits:
- This ensures that there is no conflict between scripts of apps and those of the theme, which in turn provides a more consistent UX across browsers and devices.
- This ensures that the app works on store without modifying the theme. So if the app is uninstalled in future, you don’t have to manually remove its traces from the theme.
- This ensures that the app works correctly with a consistent UX, across all themes installed on your store.
- This ensures that any error in the scripts of apps does not impact or halt the execution of scripts of the theme.
- This allows Apps to push update their scripts, without causing any trouble to the store or store owners.
Now, this is true for all apps which integrate on frontend using Script Tags. Imagine a scenario where your store has 5 apps on the frontend, all racing for execution while the page loads. It would produce a completely unpredictable user experience depending upon browser type, browser version, Operating System, Internet Speed, Firewall. Surely, you would want to avoid such a situation. The integration using Script Tags ensures that such a situation never occurs.
Also Read
Does Smart Wishlist increase load time of your Store?
Demonstration on a client store