Product Differentiator App is dedicated to help Your customers in choosing a product of their choice by comparing two or more products of the same category. Thus, avoid confusion and get the best product of their choice.
Here is the Guide to help You with the App Installation & Configuration.
Please Have a look at the Complete Workflow of both Admin & Customer End.
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.
Workflow: ADMIN END
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.
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.
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.
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.
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.
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.
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.
How to display Product Differentiator on Frontend?
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:
Paste the Code to template/Product.liquid file:
Now, Paste the Code to index.liquid file:
Paste the Code to product-loop.liquid file / product-list-item.liquid file: