Back to Top

Webkul Product Label for Shopify

Updated 6 June 2023

With the help of the Webkul Product Label app for Shopify, the admin can assign flags to the products on various pages. Admin can even add new flags of one’s own choice and can assign them to different products.

Features

  • Admin can assign flags to the products.
  • Flags can be assigned to products on various pages, i.e., the home page, category page, and product page.
  • A lot of default labels to choose from.
  • He can also set the position of flag anywhere on the store as per the preference.
  • The Admin also can add new flags.
  • The buyer will easily come to know about the new offers on the products.
  • Admin can also create and upload his own custom label.
  • Also, Labels can be assigned to a whole collection.

Video Guide

Installation

On Landing Page, you will find the “Get this app” button. Enter your shop URL where you want to install the app.

Product Flag 1

Furthermore, now you need to install the app.

Product Flag 2

This way, the app can be installed.

Searching for a Shopify
Headless solution ?
Find out More

Workflow

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

product flag 3

The app will be listed here once the installation is completed:

product flag 5

Assigning flag to products:

Shopify backend >> Products >> All Products >> Edit the product on which you want to assign the flag.

product flag 11
product flag 12

Now click on “manage Webkul Product Label”, this action will take you to the page shown below. Also, here you will have four tabs from which you can choose where to assign a flag to the product, add a new flag, edit/delete the added flags or select the position of the flag on the page.

product Flag 3
product flag 33

Assigning flag to the product:

Configuring Webkul Product Label

Backend Configuration

Configuring the flag :

You also need to “configure” the assigned label as to where you want the label on the pages selected. Since we have selected the label for the home page and the product page, so it will be available on these two pages. [If you have any issues with the configuration, you can raise a ticket at https://webkul.com/ticket/ or email us at [email protected] We will help you in configuring the app]
Refer to the screenshots of the configuration procedure:

product Flag 5

Click on the Save button to save and now you will have to manage the flag settings on the pages.

Product Page settings:

product Flag 6

Collection Page settings:

product Flag 7

Home Page settings:

 Front-End Configuration

In order to display the product flag on the home page, product page or collection page, the admin needs to configure the front end of the app.

To display the label on the product description page, go to themes and paste the below code on the product.liquid file:

<div id='wk_product_label'></div>

To display the label on the home page and collection pages, go to themes and paste the below code on collection.liquid file:

<div class='wk_collection_label' data-idproduct={{ product.id }} data-idprohand={{ product.handle }} id="wk_col{{ product.id }}"></div>

All Flags/Labels

product Flag 9

This section will show the list of all the labels. You can enable, disable, add a new one, edit or delete the labels from this section.

Labeled Products

product Flag 10

This section will display all the products which have been assigned to the labels. And from here it can be edited or deleted.

product Flag 11

Similarly, from the collection section, all the collection lists will get displayed which had been assigned with a label. Also, assigning a label to a collection will be the same process as that for a product.

Label Rules

product Flag 12
product Flag 13
product Flag 14

There are three basic rules needs to be remembered and selected for the labels. There are few by default labels created, and the rules are made about their implications.
They are :
-Automatically assign a New label to all new products.

-Automatically assign Out of Stock label to all Out of Stock products.

-Also, automatically assign a Discount label to all products which have discounts.

As you can assign multiple labels to a single product, there are priorities of the label to be displayed on the frontend (most to least):

1. Label assigned to the product

2. Out of Stock Auto label

3. Discount Auto label

4. New Auto label

5. Label assigned to the collection

Now, you can view the assigned flag in the store. Moreover, refer to the screenshots:

product flag5

Also, assigning flags to the products will grab the buyer’s attention as the product will be highlighted.
Click here Product Flag to get the App.

Check the Demo of Shopify Product Flag

Moreover, check the demo of this app:

Frontend Demo Link- https://art-vendor-demo-shop.myshopify.com/

Support

Also, for any kind of technical assistance, just raise a ticket at:

http://webkul.uvdesk.com/ and for any doubt contact us at [email protected]

Moreover, check out Webkul Blogs for more!

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


Be the first to comment.

Back to Top

Message Sent!

If you have more details or questions, you can reply to the received confirmation email.

Back to Home

Table of Content