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
↓
Now, the Admin can install the Product Flag app by
↓
Enter your Shop URL & click on the Get This App button
↓
After approving the app charges, the installed app will be listed in the Apps section of Shopify Backend
↓
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.
↓
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
↓
In Product Page Settings, configure the position of the flag for the product description page
↓
In Collection Page Settings, configure the position of the flag for the collection page
↓
From home page settings, configure the position of the flag for the home page
↓
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
↓
Click on the More Actions button & then click Manage 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.
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.
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.
↓
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={{ product.id }} data-idprohand={{ product.handle }} id="wk_col{{ product.id }}"></div>
↓
Where to find these files?
Shopify backend >> Online Store >> Themes >> Actions >> Edit Code
↓
Search for the file, paste the code and save.
↓
This is the Frontend View after all the code pasting is done
↓
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:
↓
Enter the required details & save the ‘custom made label’.
These added labels will be listed in the ‘All Flags/Labels’ page as shown below:
↓
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.
↓
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.
This is all about the workflow for this app.
Product Flag Main Blog
Product Flag Demo
Contact Us
Please send your queries at [email protected] or raise a ticket at Webkul-UVdesk
