To install the Product Differentiator app to Your Shopify Store, Visit the Shopify App Store.

Search the Product Differentiator App and click the Add app button to get the app.

Click here to install the Product Differentiator App to Your Store i.e.

• Go to Shopify App Store.
• Find the Product Differentiator App.
• Click on Add App button.

Approve the app Charges and add it to Your Shopify Store.
Choose any of the above ways to install the app.

As soon as You installs the app, You can view the same in the Apps section of Your Shopify Store.

Clicking the Product Differentiator app will redirect You to the app’s home page.

Here You will get all the menus to Configure the App.

Later in this Guide, You will get to know how to add Codes into liquid files to Configure App Frontend. First, Configure the App Backend.

Configuration

It will take just a few minutes of Yours.

From here, You can configure the labels, set a limit for products to be compared, enable/disable remove the button from the compare feature page on the frontend.

Default Features

These are the features applicable to all Your Products, by default.

All the default features added in the app will be visible in this section.

You can enable/disable the Default Features as well. The enabled features will be applicable to all Your Products added to the app.

Design

Choose the colors of Your Choice & manage the display design of Frontend.

The same will reflect like this on Frontend:

Also, You can change the Compare Page Feature Categories Color like this:

You are done with the App Configuration. Now, You can Proceed to Import the Products into the app that You want to be added for Comparison.

Import Products into the App.

You want to add feature values to the Products to be compared by your customers. So, firstly import the Products into the app.

Visit the Import Product section and choose any of the two methods to Import Products.

Method 1: Import by Date Range
You can choose a Date Span and Import Products via CSV file. Select From and To date Click on Import button.

Method 2: Import via CSV
You can Upload a CSV file of Products that You want to Import into the app. Once done, Click on Import button.

The Products imported from here can be viewed in the Products section of the app.

As You have added the Products to the app, let’s add Feature categories and default values to the features.

Feature Categories

In this section, You need to add Feature Categories first and then proceed to add default values to the categories for comparison.

So, Visit the Feature Category section and add Categories.

Clicking on the Add Feature Category button, You can add Category name and Category Position. Thus, You will be ended up adding a New Feature Category.

This way, Feature Categories can be added to the app.

You can edit, delete or enable/disable feature categories further if required.

Once You add feature Categories, let’s proceed to add default values to the these Categories. These feature values will be further assigned to imported products.

Default Features

From this section of the app, You can add default values to the added feature categories that will be applicable to all the products.
Go to Default Feature Section and add Features.

Click on the Add Default Feature button. Select the Feature Category that You have added previously and enter feature’s name & default value.

This way, default features can be added to the feature categories that can be edited, deleted, disabled anytime if required.

Assign Feature Value to Product

As You have added Feature Categories and default values, You can now proceed to assign Feature Values to the imported Products that are listed in the Products section.

Please refer to the below steps:

• Go to Products.
• Choose a Product and Click on Assign Feature Value.
• Enter the Values and Click on Save.

Click on the Assign Feature Value and enter the values of the added Feature Category for the Product.

This way, You can add feature values to Products. Also, You can enable/disable the Compare button for any of these Products.

Now, You can add these feature categories & values to the Collection in the app.

Collection

List of all Your Shopify Store Collections automatically added to the app.
View Assigned Features or Add New Features to Your Collection.

Click on Add Feature button to assign a new Feature to the Collection.

Select a Feature Category, enter a Feature Name & Feature Value.

This way, a new feature is assigned to the Collection.
To view the added Features in the Collection, click on View Feature button.

 In addition to it, You can also assign Features to Your Shopify Store Products directly from the Products section of Your Shopify Store. Just follow these simple steps:

Shopify Store Backend
Go to Products.
Click on the Product to which You want to add features.

This Product will be start getting reflected in the Products section of the App.

Clicking on the Assign Value button, You will be straightaway redirected to the Product section of the App.

You can now assign feature values to this Product.

As the admin has configured the app backend, let’s see how the customer will get the options to compare similar products.

In Order to display Product Differentiator Option on Frontend for the Customers, the admin needs to follow the below steps:

Login to Admin’s Shopify Store.
Click on Online Stores.
Go to the Themes Section.
Click on Edit Code in Action menu.

Copy the codes & Paste them to the following liquid files as given below:

Paste the Code to collection.liquid file:

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

Paste the Code to template/Product.liquid file:

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

Now, Paste the Code to index.liquid file:

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

Paste the Code to 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 the Code to template/Product.liquid file:

{% 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 %}

Please Follow the Instruction given on the Home Page & add the Codes accordingly. Still if, You need our help in adding the codes, feel free to connect.

As soon as You add the Products for comparison and paste the codes into their respective liquid files, Your Customers will see a Checkbox to compare the products.

Customer will check the checkbox for the Products that he/she wants to compare. Those Products will be listed separately above all the products.

Note:- Maximum Number of Products added for comparison can be decided by the admin while configuring the app.

Once all the Products to be Compared are added, Click on Compare button. Thus, all the features added for the products appear and Customer can easily choose the product of their choice.

This is how Your customers will have the choice to compare different products of Similar Category and choose the best product of their choice.

Refer to the Link to check the Demo of Product Differentiator App:

https://product-differentiator.myshopify.com/pages/demo

If You have any query/issue with the app, feel free to write to us at [email protected] or simply create a ticket at https://webkul.uvdesk.com/en/customer/create-ticket/