In this article, you will learn how to add the Personalized Recommendations widget by Loopclub onto your PageFly pages. The Personalized Recommendations app helps you to increase sales by showing product recommendations that are suited to you based on your browsing habits. You can use it for cross-selling and increasing your conversion rate.
You’ll need to install the Personalized Recommendations app via the Shopify App Store and configure all settings to best suit your needs. You can refer to the Personalized Recommendations help center for more details.
Step 1: Add the HTML/ Liquid element to the editor
In the PageFly editor, you need to add the HTML/Liquid element to the editor. This element will dictate the position of the Personalized Recommendations widget on your website.
Choose the section of the HTML/Liquid element on the breadcrumb. Then go to the General tab and scroll down to the ATTRIBUTE parameter, add an ID for this section. You can see this in action in the image below.
In this example, we set an ID is “rk-similar-products”. And then, Save your page to go to configure settings in the Personalized Recommendations app.
Step 2: Add a new widget
Now, go to the Personalized Recommendations app in your Shopify app admin.
In the Personalized Recommendations app, go to the Dashboard and click on the Add New Widget button as demonstrated below.
Choose the Widget you want to add. All the widgets are listed in the image below
Depending on the widget you choose, you’ll have different choices of how it looks on your website. This is so that they can be displayed on many page types such as your homepage, product pages, collection pages, blog page, and so on.
In this example, we chose the Similar Product widget. This widget gives us three options: Product page, AJAX Cart, and Cart page. You can choose all of them. In this case, we chose the Product Page.
After making your selection, click on the Create Widget button.
You will be brought to the Similar Products page – choose the Design & Location section. Scroll down to see the WIDGET LOCATION and you need to add the ID that you set before for the section of the HTML/ Liquid element in the PageFly editor. In this case, this ID is “rk-similar-products”.
Remember to save the configuration.
Configure the available widget
If you have various available widgets and you want to add one of them into a PageFly page, you just need to choose the Configure button in the widget you want and then configure it.
In this example, we want to configure the settings for the Similar Products widget, you just need to click the Configure button – as shown in the image below – and configure similarly to the previous step.
Step 3: Publish your product page
Now, you need to go back to the PageFly editor and publish the product page that you set up in step 1.
Then go to the live view to see the result. That’s it. Simples!