Shopify
  • Personalization for Shopify
  • Installing
  • Tracking & Session Management
    • Standard Shopify Storefronts
    • Custom Storefronts (Hydrogen, Headless & more)
  • Shopify International (Markets)
    • Front End addition
  • Recommendation Extensions
  • Guides
    • Quicker loading times
    • Granting Access to your Store
    • Adding/Moving Recommendations
    • Customizing Product Metadata
    • How Nosto modifies your theme
    • Version Controlled Themes
    • Implementing enhanced conversion tracking
  • Features
    • Variations (Configurable Products)
    • Managing the Cart
    • Supplier Cost & Inventory Level
    • Restore Cart Link
    • Ratings & Reviews
    • Multi Currency Support
    • Shopify Flow
    • Shopify Hydrogen
    • Marketing permission and GDPR compatibility
    • Online Store 2.0
    • Shopify Sections
    • Dynamic Bundle Discounts
    • Customer Reference
  • Integrations
    • Using Yotpo
    • Using Stamped.IO
    • Using Judge.Me
    • Using Okendo
  • Articles
    • Article: Leveraging Margin Data
  • FAQ
  • Uninstalling
  • Visit Nosto
  • Issues
  • Releases
Powered by GitBook
On this page

Was this helpful?

  1. Guides

Quicker loading times

This documentation walks you through the steps for setting up nostojs client script on your theme with higher priority, which aims to loading Nosto faster.

Approach

Please follow the steps outlined below for setting up your theme:

  1. Place the below content inside the head section of theme.liquid file, above the line that says {{ content_for_header }}.

     <script type="text/javascript">
         (() => {window.nostojs=window.nostojs||(cb => {(window.nostojs.q=window.nostojs.q||[]).push(cb);});})();
     </script>
     <script type="text/javascript">
         nostojs(api => api.setAutoLoad(false));
     </script>

    This accomplishes two results: i. Initializes nostojs JavaScript api ii. Stops Nosto from loading recommendations by default\

  2. Place the following snippet, in the theme liquid template files that contains nosto_element elements, below all the nosto_element snippets:

        <script type="text/javascript">nostojs(api => api.loadRecommendations())</script>

    This line will make sure Nosto loads recommendations on after the nosto_element elements are loaded.

PreviousGuidesNextGranting Access to your Store

Last updated 6 months ago

Was this helpful?