Articles on: Product Badges & Label

How to make the labels visible on the storefront?

Fordeer hello to you!

If the labels do not show on your products, kindly make sure you have already completed all the steps below:

Check to ensure the theme extension has been enabled.




Enable the status of the label on the Label list page



Check the Settings on the Products and Display tab once more to make sure you set up correctly

=> If you finished the label setup on Fordeer, but the labels don't show, you can follow the edit code guidelines below:

Issue 1: If the labels do not show on the Homepage and Collection pages.

Solution: Add the class fordeer-badge and include the attribute fordeer-badge-id="Fordeer-{{ product.id }}" to the outer tag of the product item. In this case: the code will be in the card-product.liquid or grid-....liquid

Note: Typically, when using Shopify themes, the code structure is fordeer-badge-id="Fordeer-{{ product.id }}". However, if you are utilizing themes from a Page Builder, please ensure to use the attribute fordeer-badge-id="Fordeer-{{ item.id }}" instead. Besides, depending on your theme, you may add the different and suitatable attribute.

Below is an image showing how it will look after you've added the code to the outer tag of the product item.



Issue 2: If the labels do not show on the Product pages.

Solution: Add the class fordeer-thumbnail to the outer tag of the main product image. If the labels do not show on the Product pages, the code will be in the main-product.liquid or feature-product.liquid

The image below will show how it will look after you've added the class to the outer tag of the main product image.



Issue 3: If the labels do not show on the Cart pages.

Solution: Add the class fordeer-cart-media and include the attribute fordeer-cart="{{ item.url }} to the outer tag of the product image on the cart page. iIf the labels do not show on the Cart pages, the code will be in file cart-item.liquid

Important: For standard Shopify themes, the code format should be fordeer-badge-id="Fordeer-{{ item.url }}". In contrast, if you're using themes from a Page Builder, you should apply the attribute fordeer-badge-id="Fordeer-{{ line_item.url }}". Additionally, you might need to incorporate an appropriate attribute based on your current theme.

The image below displays the appearance of the product image on the cart page after you have successfully added the code to its outer tag.



By following these steps, you can display our app's labels seamlessly on your store. If you have any queries while adding the code, do not hesitate to contact us via our friendly live chat or our support email: support@fordeercommerce.io, we will be more than happy to help you ^^

Updated on: 02/02/2024

Was this article helpful?

Share your feedback

Cancel

Thank you!