Demos

Product Flag for Shopify

With the help of Product Flag app for Shopify, 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, ie. home page, category page, and product page.
  • A lot of default labels to choose from.
  • Admin can set the position of flag anywhere on the store as per the preference.
  • Admin can add new flags.
  • Buyer will easily come to know about the new offers on the products.
  • Admin can create and upload his own custom label.
  • 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.

Now you need to install the app.

This way, the app can be installed.

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:

 

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

Assigning flag to products :

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

Now click on “manage product flag”, this action will take you to the page shown below. 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.

Assigning flag to the product:

Configuring Product Flag

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 support@webkul.com We will help you in configuring the app]
Refer to the screenshots of the configuration procedure:

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

Product Page settings:

Collection Page settings:

Home Page settings:


 FrontEnd Configuration

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

To display the label on the product description page, go to themes and paste the below code on 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

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.

Labelled Products

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

Similarly, from the collection section, all the collection list 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

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.

-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 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. Refer the screenshots:

 

Assigning flag to the products will grab the buyers attention as the product will be highlighted.
Click here Product Flag to get the App.

Check the Demo from here:

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

Username: johndoe@webkul.com
Password: demowebkul

Support

For any kind of technical assistance, just raise a http://webkul.uvdesk.com/ and for any doubt contact us at support@webkul.com

. . .

Comment

Add Your Comment

Be the first to comment.

css.php
Hire Us!
Brief us about your requirements and we'll get back to you.
Woo! Hooy!
We have just recieved your project brief and our expert will contact you shortly.
Send Again
Close

Index