Product Labels app allow Merchants can setup labels for products in thier store, it helps Merchants can create and customize labels in thier store, They can create label for products like Hot, Sale, Descount, New...
Merchants can create and customzie lable for:
- Create Nornally Label like Hot, New, Sale, Discount...
- Create Label For Sale (the label only display in sale product in a same page)
- Create Label to Show Discount Number for proudct automatically. (For example: Product A: Discount 5%, Product: Discount 15%)
- Create Label to show Sold Out Product (Label will apply for sold out prouducts only)
You can Can create new Label by Upload your lable from PC
- In the App Left menu, Click to Manage Labels
- On the Grid Items, Click to Add Label Button On the Top right corner
- You can Add category and assign labels or templates to it, it helps you easy manage labels or templates items
- Go to Manage Categories by click to Manage Categories on left Sidebar menu:
- Add Category Button On top Right Corner
- Enter Category information to the form and Click Save
You can Edit, Update Categories in the Category Grid Items
Merchants can upload thier Fonts to use for Custom text in Custom Template
Go to Manage Fonts by click to Manage Fonts on Left Sidebar Memu
Click To Add Font Button on Top Right Corner
Enter information and browser font From your PC and click Save
You can Edit, Update, Delete Fonts on Manage Fonts Gird Items
Merchants can upload thier Background to use for Custom text in Custom Label
Go to Manage Backgrounds by click to Manage Backgrounds on Left Sidebar Memu
Click To Add Background Button on Top Right Corner
Enter information and browser font From your PC and click Save
You can Edit, Update, Delete Backgrounds on Manage Backgrounds Gird Items
Merchants can add template to use for Custom Label
Go to Manage Templates by click to Manage Templates on Left Sidebar Memu
Click To Add Template Button on Top Right Corner
Enter information To the form and click Next Button
In the Template Design area, You can select Background, Add text or Upload Custom image for Template
Select Background:
Add Text and Custom Font, Size, Color, and text style
Upload and Add Custom Image:
After complete Design, Click Save To Save template
You can Edit, Update, Or Delete In Grid Template items
You can assign label to products, collection, tags( in Premium Plan), You can use your label, your tempates, sample label or sample templates
Click to APB Product Labels => Assign Labels To Products
Select Product, Collection Or Tag
Click To Icon Edit
Select Position for label (Top left, Top Right, Botton Left, Button Right, Custom)
Select Label, You Can select Label from:
Each Label You can Will include options: (You can see preview label on Main Right Image)
Option For Special Label: (Only available on Premium Plan)
After Assigning label for product, You can click save
To display Lable in the fontend, You have to Enable App embed blocks, Go To Online Store => Themes => Customize => App embeds => Product Label Configure
Enable Label In Product Page: Select Yes
Enter Product Image Class
After enabling embeds Block, Label will show product page
For product Class, You can check in Product page in theme, You can find parent class of product images or gallery images
If you need support how to get class for the configure, you can contact to [email protected]
Go to Online Store => Themes => Customize => Collection => Default Collection
Find Product Grid Click to Add Selection => App => Main Collection Block (APB product Labels)
Move to Label App Block before Product Grid
You can access Collection page in the frontend and see labels are showing on it
To get more detail how to configure the app's selection with your theme, you can Click here
Go to Online Store => Themes => Customize => Home Page
Are you can see, You can show products collection ( Feature Collection) or Product ( Feature Product) in Home Page, I will introduce how to configure for each case:
- For Products Collection All ( Feature Collection) Selection
Find Product Grid Click to Add Selection => App => Label Collection (APB product Labels)
Move to Label App Block before Product Collection Selection
You can check labels in the frontend
You can see more how to configure Label Collection Selection with theme Here
- For Products separate collection
Click to Add Selection Apps => Label Feature Collection Selection (APB product Labels)
Move Label block before Feature Collection Selection
Click to Apps => Label Feature Collection => Select Collection
You can check labels in the frontend
You can check more about configure for Label Feature Collection Selection with your theme Here
- Display Labels for Feature Product
Click Add Selection => Apps => Label Feature Product Selection (APB product Labels)
More Label Feature Product Selection (APB product Labels) before Feature Product
Click To Apps => Label Feature Product Selection => Select Product (Product is same for product and feature product block)
You can check labels in the frontend
You can check more about configure for Label Feature Product Selection with your theme Here
Go to Online Store => Themes => Customize => Products => Default Product
Click to Add Selection => App => Label Product Related (APB product Labels)
Move to Label App Label Product Related before Related products Selection
You can check label Related product in the frontend
Go to Online Store => Themes => Customize => Search
Click to Add Selection => App => Label Product Search (APB product Labels)
Move Label Product Search before Search Result Selection
You can check labels in search page
You can see more how to to configure Label Search Product Selection in Here
To display labels in other page, You can add label selection and move to before Feature Collection Or Feature Product Selection
For example: I have added Feature Collection to Contact Page, To Display Label for the Feature Seletion, I Create Label Feature Colletion Selection and Move it before Feature Collection
Our app is working fine with block in Nornally theme, but if you use different theme, may use need configure for app's selection to display label in feauter collection.
To configure our app with your feature colletion in the theme, check and enter class from your selections to our app
The Configure are applied for our app's selections: Label Feature Collection, Label Main Collection, Label Product Related, Label Product Search
You need Item's Class, Product Image's class, and Product Title's class
- To get Item's class, You can go to Product Collection Selection, In my case, I found it in sections/featured-collection.liquid
So I get Item's Class in the Product Collection Selection is grid__item
To get Product Image's class, I Continue checking in product Collection Selection.
I found selection is render cart-product
Continue Checking cart-product. I see the wrapper class for product image is card__media
- To get Class for Product's title, You can find element that closest with element that showing title. The element should be have id with product id
I get Class for Product Title is h3.card__heading
So I Can get class for Product Collection Configure are:
Item's Class: grid__item
Product Image's class: card__media
Product Title's Class: h3.card__heading
Copy Value To label Selection Configure, You can show label in Product Collection Block.
If you have any issues about integrate app's with products collection selection, You can contact us via email [email protected]
To display label in feature product, You can find where block or selection in display product image item or media in the feature product selection:
After found the Product Image or Media selection, You can copy parent's class that display product image item:
For example: I found product Image available on Block snippets/product-thumbnail.liquid, I found class product-media-container wrapper product image item
Copy Class product-media-container to Label Feature Product Setting:
If you have any issues about integrate app's with Feature Product selection, You can contact us via email [email protected]