We know how important it is for your Shopify store to sometimes set up custom pages to promote new launches, deals, discounts and sales. But getting the most out of these pages is what we wanted to enable.
Our app, Wiser for product recommendations now integrates with a popular page builder app for Shopify stores, GemPages.
This will enable you to display our product recommendation widgets, like similar products, related items, frequently bought together products, top-selling items, and more, on the new pages you set up.
Before you start, you need to ensure you have both the apps enabled:
Add a Wiser Widget Using Custom Code
Step 1: Open GemPages
Open the page you want to edit in GemPages.
Step 2: Add the Custom Code Element
From the GemPages editor, find the Custom Code element and drag it to the location where you want the Wiser widget to appear.
Step 3: Add the Wiser Widget Code
Paste the appropriate Wiser widget code into the Custom Code element.
You can use the following codes depending on the type of recommendation widget you want to display.
Related Products
<div class="evm-related-product ws_inr_main_wgt" data-wiser-widget="related_products"></div>
Recently Viewed Products
<div class="recently-viewed ws_inr_main_wgt" data-wiser-widget="recently_products"></div>
Manual Recommendation Products
<div class="evm-recommended-products ws_inr_main_wgt" data-wiser-widget="recommended_products"></div>
Most Popular Products
<div class="evm-most-popular-products ws_inr_main_wgt" data-wiser-widget="top_selling"></div>
Trending Products
<div class="trending-products ws_inr_main_wgt" data-wiser-widget="trending_products"></div>
Featured Collections
<div class="evm-featured-collections-product ws_inr_main_wgt" data-wiser-widget="featured_collections"></div>
Inspired by User's Browsing History
<div class="evm-related-viewed-browsing ws_inr_main_wgt" data-wiser-widget="recently_related_products"></div>
Frequently Bought Together
<div class="evm-also-bought-products ws_fbt_inr_main_wgt" data-wiser-widget="alsobought"></div>
New Arrivals
<div class="evm-new-arrivals-product ws_inr_main_wgt" data-wiser-widget="new_arrival"></div>
Step 4: Save and Preview
After adding the code, save your changes and preview the page.
The Wiser widget should load in the location where you added the Custom Code element.
Important Notes
Make sure you use the correct code for the Wiser widget you want to display.
The widget must be enabled and configured in your Wiser dashboard.
You can move the Custom Code element to change where the widget appears on the page.
If the widget does not appear after adding the code, make sure the Wiser widget is active and the page has been saved and published.
Avoid modifying the
data-wiser-widgetvalue, as it identifies which Wiser widget should be loaded.
If you need help adding a Wiser widget to your GemPages page, contact the Wiser Support Team.
To know more about the GemPages and Wiser integration and how it benefits your Shopify store, read our blog here.