Shopify : Use Native Product Card
This guide outlines the integration of Shopify's card-product.liquid template into Klevu Search, Category Merchandising, and Recommendations. One of the use cases is to accurately display B2B prices within these features.
The concept is simple; Use a placeholder within the Klevu result Template JS and populate it with the markup from the native card-product.liquid file within the Shopify theme.
The following example is for guidance only, you will want to adapt the code as necessary to fit your theme and strategy, but it is based on the Dawn Theme.
This is a common step for Klevu Search, Category Merchandising, and Recommendations. The name of the file will be used in the Klevu result rendering function to fetch the card-product.liquid template via the use of Shopify’s ability to render alternate templates via a URL parameter. Specifically, Shopify allows you to call a product’s URL with a different template other than the one that is assigned to it. For example, a product might have the default product template assigned to it, but we want to use this new template we will create one instead. So within Edit Code and the list of Templates, let's create a new Template by clicking add a new template. Choose product from the Template Type dropdown, select Liquid, and let’s call this new template klevu-template. This will create a new template for us to use.
In this file, we are simply referencing the current card-product-card liquid file e.g.
Use layout none to omit extraneous template data and keep it to the product card markup only.
You will want to adhere to your current theme’s card-product template name as well as any required data objects to be passed (e.g. for showing the secondary image you will pass show_secondary_image: true).
Once this action is completed, below are further steps based on the solution you want to implement.
Below are the steps to implement the product native tile on Search & Category Merchandising:
Similar to the instructions described above when creating a template, this time we will go to the Snippets section and click add new snippet to create the snippet. The name of the file will be used to include the script in the core Klevu flow where necessary
e.g.
Snippets > klevu-customizations.liquid
There are five elements to this file:
- Include the default card-product CSS from the Dawn theme
- setTemplate override to assign our new productBlock placeholder
- afterTemplateRender to fetch the data from the new product.klevu-template.liquid created above
- template/klevu script block for the new productBlock placeholder
- <style> block for any fine-tuning based on your current theme CSS
Please reference the comments in the code example below for details on the functional steps.
The following example is for guidance only, you will want to adapt the code as necessary to fit your theme and strategy.
e.g.
This may vary depending on how you have integrated Klevu. We would recommend to put file in Layout > theme.liquid before head closing tag.
Place the render include below the Klevu core and configurations section
e.g.
Below are the steps to implement the product native tile on Recommendations:
To create a new template in the KMC you will need to go to Recommendations > Templates and click ‘New Template’.
To show the products using the same look & feel as the current Shopify theme we need to create a new template that has the same fundamental elements from the existing template. This may mean that a lot of the elements from the existing related products or featured products liquid templates will need to be taken. Whilst we are aiming to achieve the same look & feel of the existing template we also want to make sure we are capturing the necessary analytics using the Klevu classes from the original template.
The following example is for guidance only, you will want to adapt the code as necessary to fit your theme and strategy.
In the above example you can see:
- We have kept the fundamental Klevu functionality to get the correct page.
- We have kept the fundamental Klevu functionality to get the recommendations list.
- We have kept the fundamental Klevu classes for the elements to make sure we are tracking all analytical data.
- We have inputted the classes from the theme to make the recommendations have the same look & feel as those in the theme.
Here we are creating a script to render the product card for each of the products that are part of the recommendation block being created. We are referencing the function found here.
The following example is for guidance only, you will want to adapt the code as necessary to fit your theme and strategy.
e.g.
Here you can see that we are checking for the specific recommendation product ID and inputting the code block for this product in the div related to that product.
Once you have done this you are free to create a new recommendation block, assign the new template you have created, and get the code that is spat out as a result.
You can use this code to set up recommendations using the steps given in the section Smart Recommendations of the guide.
Another option is to handle it manually.
e.g.
You can drop this into a custom liquid block on the page you’d like to show the recommendations e.g. the home page, product page, or category page.
You may need to make some CSS changes to the custom liquid block to show certain elements correctly.
When utilizing this method, it's important to note a couple of considerations:
- If prices differ from what was synchronized with the Klevu backend (such as in a Shopify B2B system), it may affect the functionality of the price facet and sort by options on search/category pages. It will not impact the Recommendation though.
- The load more feature (infinite scrolling) might not be compatible with the aforementioned approach.
