Learn how to install Nosto on your SEOShop store in less than 5 minutes!

Before getting started, make sure you have a Nosto account and your accountID available. You can open up a new Nosto account by signing up on www.nosto.com

1) Start by logging in to your SEOShop admin panel. Navigate to menu General > Design and select Template editor

2) Add a new snippet by clicking add

3) Name the new snippet as nosto all in minor case.

4) Next, go to Github and copy the Nosto tagging snippet to your clipboard and paste the content into the new nosto.rain snippet. Keep the content intact, but replace the ACCOUNT-ID-HERE with your own Nosto accountID. Please make sure that the accountID is inside single quotes.

5) As the last step before connection between your site and Nosto is established go back to the template editor and look for layout file “Custom”. Open it in edit-mode.

6) Add a snippet below as the first segment in the body, in the example at row 28. This will then add the invisible and required Nosto javascript and tagging into your page template automatically.

7) That’s it! After that step you can see a live feed of traffic when you log-in to your Nosto admin panel.

Before Nosto is actually delivering any value to you and customers shopping on your site, you need to add recommendations to your site to preferred locations. This step requires moving between the Nosto admin panel and SEOShop’s template editor tools, hence we recommend to keep both open in your browser.

Nosto’s recommendations are populated on the site by adding Nosto placeholders to your SEOShop’s page templates. Technically, these placeholders then load the Nosto recommendation and styling from Nosto’s cloud when a page renders in a browser. In order to a recommendation to work, a placeholder code snippet needs to be present in your SEOShop’s page template.

Every new Nosto account comes with a ready set of recommendations known as recommendation slots, which basically means you only need to select which ones you would like to use. In the tutorial, we go through adding one recommendation into a product page. Simply repeat the steps for every recommendation you would like to add. Don’t worry if the title, design or contextual settings are not perfect. Nosto is not visible publicly when you add the recommendation and you can easily edit all the settings later. Read more about recommendation slots and how to get started.

8) Fetch the placeholder code from the Nosto admin by selecting the recommendation you would like to add and click Edit.

 9) Browse to the bottom of the page and look for snippet such as in the example. This is the placeholder snippet that needs to be present in your page template and which will load the recommendation. Recommendation’s settings i.e. what is displayed to the customer and how is controlled in the Nosto admin.

Copy the code snippet to your clipboard, in the example this is

10) Navigate back to your SEOShop’s template editor. The example is a recommendation for product detail pages so we need to select the page template for product page.

11) Add the code snippet to preferred location on the page. In the example, we added the Nosto element as the last element on the page, but above the footer.

12) Open your site in the Nosto debug-mode and see how the added recommendation looks like. In the top, a Nosto debug toolbar should show up. In the example at the bottom of the page a recommendation placeholder appears in the position where this has been added.

13) In case the recommendations don’t fit your site’s look & feel using the provided default templates, go to the Nosto admin panel and edit applied recommendation templates or create your own templates (design) to have a seamless integration with Nosto. A detailed getting started guide how to use on-site recommendations available here.

Repeat steps 8-12 and once everything looks good to you, go live by flipping the switch under Nosto account settings or by clicking activate in the menu when you log-in to Nosto.