How to ensure product labels are responsive?

How to ensure product labels are responsive?

Occasionally, labels may appear excessively large in contrast to the product image when viewed on mobile devices. This problem usually stems from the Label Size setting not being correctly configured. 

To ensure your labels remain responsive on mobile devices, access the configuration page of the desired label and proceed to either the Product Page or Category Page tab (depending on where you intend to adjust the label size). Within this section, locate the Label Size setting, which allows you to adjust label sizes as a percentage of the product image. Simply enter the desired value into the field.

Let's review some examples. 

Product Pages

Label Size value is set to '20'.


  1. result on desktop:

  1. result on mobile:


Category Pages

Label Size value is configured as '25'.


  1. result on desktop: 

  1. result on mobile:

      • Related Articles

      • Product Labels | GraphQL methods

        Queries amLabelSetting description: get information about Product Labels module settings amLabelProvider (productIds: [Int], mode: AmLabelMode) description: get information about labels by product ID

      • Product Labels API

        Amasty\Label\Api\LabelRepositoryInterface - class for managing lables: GET /V1/amasty_labels/get/:id, method="getById" - get information about a label; DELETE /V1/amasty_labels/delete/:id, method="deleteById" - delete a label; POST ...

      • What are the available GraphQL queries for Product Labels?

        The Product Labels extension is read compatible with GraphQL out of the box. To install the corresponding package, please execute the following Composer command: composer require amasty/product-labels-graphql Once the package is installed, the latest ...

      • Can labels be created on a per-store basis?

        The Product Labels extension offers the capability to select a specific store where the label will be displayed. To set this up, go to the label configuration page and find the Store View field. Select the desired store view from the provided list. ...

      • I don't see some attributes in the conditions list of labels rules. How can I add them?

        Some attributes might not be available in the conditions list when you create a new label. To add an attribute to the labels conditions follow the steps below. Step 1. Navigate to Stores → Attributes → Product, choose the attribute and open the ...