Reading list Switch to dark mode

    Product Flag for Shopify: Workflow

    Updated 26 February 2020

    Presentation Of Product Flag For Shopify Workflow

    Let’s see how the Admin can navigate through this application.

    Workflow From Admin’s End

    Admin needs to login to his Shopify Store

    Searching for a Shopify
    Headless solution ?
    Find out More

    Now, the Admin can install the Product Flag app by

    Visiting the Landing Page

    Enter your Shop URL & click on the Get This App button

    product flag

    After approving the app charges, the installed app will be listed in the Apps section of Shopify Backend

    product flag

    Clicking on the app, you will be redirected to the Homepage from where the Admin can navigate to different sections of the app i.e. Labelled Products, Collections, Configuration, All Flags/Labels & Label Rules.

    product flag

    Firstly, the Admin needs to Configure this app

    The configuration includes General, Product Page, Home Page & Collection Page Settings

    In General Settings, Admin needs to enter the Domain Name of his Shopify Store

    product flag

    In Product Page Settings, configure the position of the flag for the product description page

    product flag

    In Collection Page Settings, configure the position of the flag for the collection page

    product flag

    From home page settings, configure the position of the flag for the home page

    product flag

    This is all for configuration. Now, the Admin will move towards adding product flag

    Adding Product Flags

    For this, Admin needs to go to

    Shopify Backend >> Products >> All Products >> Click on the particular product

    product flag

    Click on the More Actions button & then click Manage Product Flag

    product flag

    Clicking on it, the Admin will be redirected to the product flag app, select the product label, select the page on which he wants the labels to be visible and save.

    product flag

    The product assigned with flags will be visible on the ‘Labelled Products’ page.

    Click on the ‘Labelled Products’ button.

    Here, the Admin will have a list of all the products with labels assigned to them. These can be edited/deleted from the same page.

    webkul blog

    If the Admin wishes to edit the assigned labels on the products then click on the edit icon in the Action column

    Edit the labeled product & save the settings.


    This is how the Admin can add product labels. Admin can also add labels/flags on a whole collection.

    For this, click on the ‘Collection’ menu

    Here, the Admin will have a list of all the collections added on his Shopify store, to assign labels to them, click on the ‘edit’ icon under Action column.


    product flag

    This is what you will get, select a label and save the setting.

    Now, the labels are added from both the products as well as the collections. To make them visible on the frontend, the Admin needs to do some code pasting.

    Paste the given codes in respective files

    product-template.liquid file

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

    collection-template.liquid file

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

    Where to find these files?

    Shopify backend >> Online Store >> Themes >> Actions >> Edit Code

    product flag

    Search for the file, paste the code and save.

    wallet app demo Themes Shopify

    This is the Frontend View after all the code pasting is done

    Hoe Page
    Product Description Page

    This is all about the label assigning.

    Now, if the Admin wishes to add custom labels of this own choice rather then using the default labels of this app, then he can do so by going to the ‘All Flags/Labels’ menu.

    Going to this page, the Admin needs to click on the ‘+’ icon to add a new label, as shown in the image below:

    product flag

    Enter the required details & save the ‘custom made label’.

    product flag

    These added labels will be listed in the ‘All Flags/Labels’ page as shown below:

    product flag

    If the Admin wishes to edit/delete/enable/disable these flag, he can do so from the same page.

    To edit the already added labels

    Click on the edit icon under the Action column, this is what you will get, edit the details and save.

    product flag

    One last thing the Admin can do with this app is that he can configure the Label Rules for assigning automatic labels

    For this, click on the ‘Label Rules’ menu, select the rules which you wish to apply and save.

    product label

    This is all about the workflow for this app.

    Product Flag Main Blog

    Main Blog

    Product Flag Demo

    Demo Details

    Contact Us

    Please send your queries at [email protected] or raise a ticket at Webkul-UVdesk

    . . .

    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