With Shopify, it’s never been easier to set up a beautiful and user-friendly e-commerce experience. You can add products, themes, plugins, and search capabilities to easily get your site up-and-running seamlessly. This is incredibly helpful for the average business owner with limited time, especially those that don’t want to fiddle around with complex technical concepts like hosting sites and coding website layouts.
Staying true to this easy-to-use experience, Algolia has introduced Algolia Recommend capabilities that can be added to your store pages through the existing Algolia integration. Algolia Recommend uses artificial intelligence (AI) to generate product recommendations for shoppers. Recommend has a few different types of models, some based on existing user interaction to surface the most popular products, and others solely based on attributes such as photos to identify similar products shoppers might enjoy.
With Algolia Recommend and Shopify, you can create a powerful experience that boosts conversion, improves click through rates, and increases order value to help you (and your clients) get the most out of your e-commerce experience.
In this article, we’ll walk through how to get started with adding in Recommendations to your Shopify store (don’t worry, it’s super quick and no code is involved!). ✨
Once you have a Shopify and Algolia account set up, we can start adding in data and personalization to prepare for adding in Recommendations!
In this section, we’ll:
If you already have product data populated in Shopify as well as your Shopify site already set up, feel free to skip ahead to the next section!
Upload Product Data to Shopify
In order to recommend items to buyers, we need to first make sure we have items listed in our Shopify store! It’d be a good idea to have at least 20 products added to your store to really show what Recommend would do.
To add an individual product, go to the Products page on your admin dashboard and click the “Add Products” button. From there, you can fill out a form to add individual products with information like images, price, title, description, and more.
If you’d like to bulk upload products, you can instead go to the Products page and click the “Import” button where you can upload a CSV file with product information. If you have products in mind but need a guide on how to structure the CSV, you can check out an example CSV download here.
To make this demo easy, I uploaded a pre-generated CSV of apparel data from the Shopify Partners GitHub to save some time in generating data.
Set up Shopify Online Store
To display our products, we’ll now need to build out our Shopify shop and set up a theme to start attracting customers! On your Shopify admin dashboard, navigate to the sidebar and select “Online Store” under the Sales Channel heading. If you don’t have an Online Store added to your account yet, follow this guide to manually add one.
Once the Online Store is selected, navigate to “Themes” and browse through the free themes provided to select one that matches your store’s vibe. In this demo, we’ll be using Dawn since it has an easy, intuitive layout that easily displays products.
Once you find a theme you like, install it to your online store!
With your online store set up and products added, we are now all set on the Shopify side! ✨
At this point, you should have data in Algolia and Shopify and a site set up with an intuitive theme for folks to shop until they drop! If you’ve made it to this point, congratulations, and read on for the quick and easy steps to add Algolia Recommendations to your Shopify site!
Install Algolia Shopify Integration
Now for the fun part – combining Algolia and Shopify’s superpowers to create an intelligent and helpful shopping experience!
For ease of installation, make sure you’re logged into your Algolia account in the same browser window as your Shopify before proceeding with the steps below.
You can install the Algolia Shopify extension in two ways:
With both flows, you’ll encounter a view that explains what data and permissions the Algolia app will need in relation to your Shopify account.
Click “Install” to add the app to your account. Once installed, you’ll be taken to a page where you can set up the specific Algolia index you’re planning to use. If it doesn’t redirect, you can also access this page in your Shopify Admin panel by going to the sidebar and clicking on “Algolia Search and Discovery” under the Apps section.
When you’ve reached the Algolia app dashboard on Shopify, you can then click Get Started to hook up your data.
When getting started, you might be asked to log into Algolia if you’re not currently logged in. If you are already logged in, you’ll be asked to provide some information, such as the Application you’d like to connect and also the index naming prefix you’d like to append to the indices made by Algolia. These indices are created to be used by the Algolia app within Shopify and map directly to the products you have uploaded to your store – no need to upload anything to Algolia!
Once you have successfully added your credentials and submitted them, your Algolia app dashboard in Shopify should look something like this:
This is looking good and our Algolia and Shopify accounts are officially connected and speaking to each other. Now, onwards to the final step! 🤺
Add Recommendations Widget to Shopify Store
The last leg of the journey is here – in this step, we’ll be training an Algolia Recommendations model and then adding it as a widget into our store.
To begin, in the Algolia app settings within Shopify, navigate to the “Recommend” tab at the top of the page. Then, scroll down to the “Get Started” heading. Select the “Select Model” button, which will launch the recommendations page in Algolia.
On this page, you have the option of selecting a few different type of recommendation models based on interactions (events) with items in your index. Most of the listed models (complementary recommendations, alternative recommendations, trending facets value, trending items) do require a minimum number of events, either logged within the index through Algolia Insights or manually uploaded as a CSV. If you have this data, you can select one of those models.
However, if you don’t yet have any event data, you can select the “Looking similar” model, which provides visual similarity recommendations to other products. “Looking similar” allows you to create a model based off of an index and any attributes of records in the index that contain images.
To configure the model, make sure you select your Shopify index (denoted by the selected index prefix rom above – mine is shopify_your_fav_store
).
Once your index is selected, you can choose object attributes that contain images to help the model know what properties to consider when looking for visual similarities. For my test dataset, I’m using the product_image
and image
attributes to train the model.
Once you’ve entered your data source and at least one image attribute, click “Start training” at the bottom of the page to start training your model. At this point, you’re free to navigate away and you can check the progress of your existing models at any point under the Recommend tab on your Algolia dashboard.
Any models that are still building will have an In Progress
badge. Those that are completed will have the Trained
badge under Status. Note that this might take anywhere from a few minutes to several hours – I left mine overnight to give it time to breathe on its own.
When the model you’d like to use on Shopify is sporting its gorgeous green Trained
badge, we can then proceed to adding it to our Shopify site! From your Shopify admin dashboard, click back into your Online Store in the sidebar, then select “Customize” on the page that pops up. It’ll launch a drag-and-drop website builder where you can customize the layout, colors, content, and more of your site.
Depending on the model you use, you may want to put your Algolia Recommend widget on different parts of your site. For the “Looking Similar” model, we want to add it to individual product pages so that when shoppers access the product pages, they are also given visually similar merchandise to the selected product.
You can navigate to product-specific pages by using the header navigation bar and selecting “Products”, then “Default Products”. This will take you to a preview of what each product page on your site will look like, using your default, or first product, as a reference for the page.
To add the Algolia Recommend widget, expand the “Apps” section in the page sidebar, then click “Add block”. In the window that comes up, select the “Apps” tab and click “Algolia Recommend”.
On the right, a sidebar menu will pop up with form fields to configure the widget. Label the heading as you’d like, and make sure you select your trained model (in my case, “Looking Similar”) from the Model dropdown. As soon as you select a model, it should render the section at the bottom of your store page, above the footer.
You can customize other settings in this menu also. For example, you can adjust maximums and minimums of how many products show as well as what recommendations surface based on how high the level of confidence is between the item and its recommendations.
And with that, you’ve done it! You should now have a widget on your site with Algolia Recommendations – don’t forget to click save to preserve your hard work!
Congratulations for making it through and exploring the world of Algolia and Shopify with me! 🙌By combining these two powerful products, we have created a seamless shopping experience that allows users to get the most out of their browsing. On the merchant end, adding this simple Algolia widget increases user engagement and can even increase average sale totals by introducing users to products they may have never discovered otherwise – how sweet!
If you’d like to learn more about Algolia and Shopify’s capabilities together, you can view the documentation quickstart. For specifics on Algolia Recommend with Shopify, you can view the related guide here.
Ashley Huynh
Freelance Writer at Authors CollectivePowered by Algolia AI Recommendations
Ivana Ivanovic
Senior Content StrategistCatherine Dee
Search and Discovery writerLouise Vollaire
Product Marketing ManagerValeriia Pierzinski
Product Marketing Manager, AlgoliaPeter Nguyen
Sr. Product Marketing Manager, Algolia