Product Differentiator App for Shopify – [User Guide]

Product Differentiator for Shopify allows your users to choose the right product by comparing the features of the same category product, avoiding confusion, and getting the best product for all their needs. The app gives a facility to compare products in terms of the features you assign. So go ahead, assign features to products and let customers compare the products of your shop.

• Buyers can compare products.
• Admin can set features and default features for product comparison.
• Also, admin can assign features to the product
• Admin can also categorize features
• Also, get a dedicated comparison page
• Seamless Integration.
• Also, cross-browser compatible.
• Besides that, you can easily configure it as it is user-friendly.

Here is the Video Guide of Complete AppFlow:

Also, on Landing Page, you will find the “install” button. Enter the shop URL where you want to install the app.

After the installation, you need to buy the monthly plan available for this app. Once the payment is done for the plan, the App will be listed here:

Also, clicking on which you will redirect to Product Differentiator App straight-away.

On the home page itself, you will find few codes to paste in .liquid files of HTML/CSS to display the comparison bar on the frontend.

The configuration of the Product Differentiator is very simple and divided into 03 sections:

• Configuration
• Default Features
• Design

Configuration:

Here you have to enter your Shopify store URL and enter the value of the maximum number of products you want your buyer to be able to compare.

Default Feature:

In this section of the configuration, the admin will have to set the default features from here which will be applicable for all the products by default.

Design:

From this section of the app, the admin can manage the display design of the frontend by choosing the colors, button text, etc.

Completing these three steps will configure your Product Differentiator app.

Collection

This section shows all the collections of your Shopify store. From here, you can view the assigned features of a collection and even can add new features to any collection.
Moreover, clicking on Add feature button in front of each collection will enable you to add the feature by selecting Feature Category, Feature Name and Default Feature Value.

Clicking on view features button will redirect the user to the section from where that particular section can be enabled/disabled, edited or deleted.

Products

The product section of the app shows a list of products that are either imported from the Shopify store or imported for the “Import products” section of the app. Assign the feature values from here, and these features will be reflected at the front end.
Also, you can enable /disable to display or remove the add to compare button on the front end for any product any time by enabling or disabling the button given in front of each product in this section.
Search products with the help of the filters given as well.

Clicking on Assign Feature Value user will get redirected to the below page where it will require to enter the feature value.

Feature Categories

This section lists the feature categories added by you. You can edit, delete, enable/disable the feature categories from here. Please note that you are not allowed to delete the default feature categories, however, it can be edited, enabled or disabled.
The categories can be searched with the help of the filters given as well.

Moreover, clicking on the edit button will enable the user to edit the name and position.

Default Feature

This section lists the default features. A default feature is assigned to all the collections. The default features are added at the time of installation and can’t be deleted, however, they can be edited, enabled or disabled.

Clicking on the edit button of the default feature will allow the user to edit the default feature as well as to add a new default feature also.

Import Product

This section allows you to import your Shopify products to the app. You can pick a date span or import via a product CSV. Download the sample CSV and start adding your products. Hence It is divided into two parts- Import products by date or by uploading the CSV.

How to Display Product Differentiator on the front end

Moreover, to get Product Differentiator displayed on the front end for selected products, follow the below process:

• Click on Online Store
• Go To Themes
• Click on Customize Theme button on the top right

• Select Edit HTML/CSS button from the Theme Option on Top Left

Then paste the below-given codes in the files as stated below:

Paste the below-given code in the collection.liquid file

<div class="wk_compare_products_block"> </div>

Then, Paste the below-given code in the product.liquid file (Templates)

<div class="wk_compare_products_block"> </div>

Paste the below-given code in index.liquid file

<div class="wk_compare_products_block"> </div>

Paste the below-given code in product-loop.liquid file / product-list-item.liquid file

{% unless product.tags contains "atc_tag" %} 
<div class="wk_product_comparison"> <input class="wk_product_id" type="hidden" value="{{product.id}}"> </input> </div> 
{% endunless %}

Paste below given code in product.liquid file (Assets)

{% unless product.tags contains "atc_tag" %} 
<div class="wk_product_comparison"> <input class="wk_product_id" type="hidden" value="{{product.id}}"> </input> </div> 
{% endunless %}

And Once all the above codes are pasted in their respective files, the configuring part for the front end is done. The product Differentiator will get displayed at the front end when products will be added to compare.

*Also, only the same category products can be compared.

If you are using Online store 2.0 (Example- Dawn), you need to follow the steps to add the codes.

Copy the given code and paste it to file:

– main-product.liquid (below the line ”)
– main-collection-product-grid.liquid (above the line ‘<div class=”page-width collection-filters”‘)
– main-search.liquid (above the line ‘{%- if search.performed and search.results.size > 0 -%}’)

<div class="wk_compare_products_block"> </div>

Also, copy the given code and paste it to the file ‘product-card.liquid‘ (at the end of the file).

NOTE:- Replace ‘PRODUCT_ID’ with ‘product_card_product.id‘ (not the braces{{ }}) in the below code.

{% unless product.tags contains "atc_tag" %}
<div class="wk_product_comparison wk-text-left"> <input class="wk_product_id" type="hidden" value="{{PRODUCT_ID}}"> </input> </div>
{% endunless %}

Front End

With this app, only the same category products can be compared with each other and those products need to be imported on to the app as well.

Now, once all the code is pasted and the products are imported to the app, a checkbox of add to compare will appear all the page.

So, once the checkbox is check for compare then it will get added in the compare section just above and any other same category product can be added to compare.

Note: A maximum number of products to be compared at once will be set by the Store owner and only a maximum of that number can be compared at once.

Also, once all the products to be compared are added, click on compare and all the features will get displayed and the buyer can easily differentiate and choose the best as per the requirement.

This is how the product differentiator works on the front end.

Important Note

Also, for the products on which store owner wants to assign feature via product differentiator app, the store owner will have to visit that product from Shopify backend’s product section and have to click on Assign Feature by clicking on the three dots on the top right.
Now, once you select the assign feature, that product will reflect in the product section of the differentiator app and you can then configure from there.
For instance, refer to the image below:

CHECK THE COMPLETE WORKFLOW OF THE APP

Demo Details

In conclusion, check the demo of this app:

FrontEnd Demo: https://product-differentiator.myshopify.com

Support

Moreover, if you need any kind of support/consultancy then please raise a ticket at:

webkul.com/ticket or drop a mail at support@webkul.com

Thanks for reading this blog!!! 🙂