Articles on: Lably

Label size, shape and position on desktop, tablet and mobile

Label size, shape and position on desktop, tablet and mobile


In this article:


A label can look perfect on a computer and cover half the product photo on a phone. Lably lets you set the size, text size and margins separately for Desktop, Tablet and Mobile. This article explains how these settings work, which units to choose, and what to do when one spot still needs a different size.


How Lably picks desktop, tablet or mobile settings


Lably chooses the settings by the type of device, not by the width of the browser window:


  • Mobile: phones.
  • Tablet: tablets (iPad, Android tablets) and touchscreen devices with a screen narrower than 1366 px.
  • Desktop: everything else, including a desktop browser window that you make narrow.


Making your browser window narrow doesn't switch the label to the mobile settings. To see what customers see on a phone, use a real phone or the device mode in your browser (see How to check the result).


Which settings can differ per device


Look for the device switcher with three icons: Desktop, Mobile and Tablet (hover over an icon to see its name). It appears next to these settings:


  • Styles > Size: label width and height.
  • Styles > Text style > Size: text size.
  • Styles > Spacing > Padding: the space inside the label.
  • Position > Margin: the distance from the edges of the product image.


Everything else is the same on all devices: shape, colors, corner radius, rotation and the corner the label sits in.


The switcher shows one device at a time. Pick a device first, then change the values. Until you change the text size, padding or margin for Tablet or Mobile, they use the Desktop values. Size is different: each device always has its own width and height.


Choose the shape first


  1. Open the label and go to Styles > Shape.
  2. Click the shape dropdown and select a shape.



Changing the shape resets the size on all three devices and moves the label to the corner that suits that shape. Choose the shape first, then set the size and position.



Default sizes after you pick a shape:


  • Rectangle, Parallelogram, Tag and Chev shapes: 125 × 50 px (Desktop), 80 × 40 px (Tablet), 60 × 30 px (Mobile).
  • Trapezoid, Triangle, Square and Circle: 125 × 125 px (Desktop), 80 × 80 px (Tablet), 60 × 60 px (Mobile).


Corner shapes such as Trapezoid top right or Triangle bottom left are designed for their own corner. If you move them to another corner, they won't line up with the image edge.


Set the label size


  1. Go to Styles > Size.
  2. Next to Label size, select the device: Desktop, Mobile or Tablet.
  3. Enter the Width and Height, and choose the unit: px or %.
  4. Repeat for the other two devices.
  5. Click Save.



A few things to know:


  • Small, Medium and Large set the width and height to the same value (for example, 100 × 100 px). They change only the selected device. They suit square shapes. For Rectangle, Tag and similar shapes, enter the width and height yourself.
  • Lock aspect ratio keeps the proportions: when you change the width, the height changes with it.
  • Switching between px and % doesn't convert the numbers. For example, 125 px becomes 125%, so enter new values after you switch.
  • A new label starts with the same size on all three devices. Make sure you set the Tablet and Mobile sizes too.
  • For a text label with Text scroll set to Never, the width works as a minimum. If the text is longer, the label grows to fit it. To keep long text inside a fixed width, choose Long Text or Always in Label > Text scroll.


Which size unit to use


  • px: a fixed size. The label is the same size on a large product page photo and on a small collection card. It's easy to predict, but you have to set each device yourself.
  • %: a share of the product image. Width is a percentage of the image width, and height is a percentage of the image height. The label grows and shrinks with the image.


Use % if you want the label to keep the same proportion to the photo everywhere. Use px if the label must be exactly the same size on the product page and on collection cards. With %, keep in mind that a tall (portrait) image makes the label taller too.


Set the text size: px, em or rem


  1. Go to Styles > Text style.
  2. Next to Size, select the device.
  3. Enter the text size and choose the unit: px, em or rem.



  • px: a fixed text size. The best choice in most cases.
  • em: relative to the text size of the theme block where the label sits. 1em is the same size as that text.
  • rem: relative to the base text size of the whole theme.


The result of em and rem depends on your theme. For example, on Dawn-based themes 1rem is 10 px and 1em is 16 px, so the same number gives a different size. If you're not sure, use px.


When you make the label smaller for Mobile, make the text smaller for Mobile too. Otherwise the Mobile label uses the Desktop text size, and the text may not fit.


Set the corner and margin


  1. Go to Position.
  2. Under Corner, select one of the 9 positions. It applies to all devices.
  3. Next to Margin, select the device and enter Top, Bottom, Left and Right, in px or %.
  4. Click Save.



Margin moves the label away from the edges of the image. A margin in % is a share of the image width (also for Top and Bottom). On small mobile cards, a smaller margin (or 0) usually looks better than the desktop value.


How to check the result


The preview in the editor shows the size for the selected device, but always on the same large product image. Always check the real store:


  1. Save the label and make sure it's Published.
  2. Open your store in Google Chrome and press F12 (or right-click the page and select Inspect).
  3. Click the device icon (Toggle device toolbar) at the top of the panel, or press Ctrl+Shift+M (Cmd+Shift+M on a Mac).
  4. In the device list at the top of the page, select a phone (for example, iPhone 16 Pro) and reload the page. Then select a tablet (for example, iPad Pro) and reload again.


Changes can take a few seconds to reach your store. If you still see the old size, wait a moment and reload.


Fine-tune one spot with custom CSS


Sometimes it's hard to get one size that looks right on desktop and on mobile at the same time. For example, the label is too large on the product page but fine on collection cards. If all other places already look good, changing the label settings could break them. In that case, a small CSS rule in your theme can resize the label in just the place that needs it.


1. Choose which items the rule targets.


  • One label or badge: use its ID. Open a page with the label, right-click it and select Inspect. On the highlighted element, find data-id, for example data-id="AP737089". The selector is [data-id="AP737089"].



  • All labels and badges: use [class^="_lably_item"]. Every Lably item has a class that starts with _lably_item, so this one selector covers all of them, and also any items you add later. Use it when the same fix is needed for more than one label or badge, instead of listing each ID.
  • All items inside one block: put the block's class or ID in front, for example #product-grid [class^="_lably_item"] for the product grid on a collection page. Find the block's class or ID with Inspect, the same way as above.


2. Choose where the rule applies. Lably marks every item with its placement. Add it to the selector:


  • [data-lably-placement="main"]: the main product on the product page.
  • [data-lably-placement="secondary"]: product cards in collections, on the home page, in related products and similar sections.


3. Write the rule. Use scale to make the item smaller or bigger. Text, shape and padding change together.


Make one label 30% smaller on the product page only (replace AP737089 with your label ID):


[data-id="AP737089"][data-lably-placement="main"] {
  scale: 0.7;
  transform-origin: top right;
}


Make all labels and badges on product cards 20% smaller when the screen is narrower than 750 px:


@media (max-width: 749px) {
  [class^="_lably_item"][data-lably-placement="secondary"] {
    scale: 0.8;
    transform-origin: top right;
  }
}


A CSS @media rule checks the window width, not the device type. It also works for a narrow desktop window, which Lably's own settings treat as Desktop.


4. Set transform-origin to match the label corner. This keeps the label in its corner while it resizes:


  • Top left, Top center, Middle left, Middle center: top left
  • Top right, Middle right: top right
  • Bottom left, Bottom center: bottom left
  • Bottom right: bottom right


If a rule with [class^="_lably_item"] covers labels in different corners, write a separate rule for each corner, using the label IDs, so each one keeps its place.


5. Add the rule to your theme.


  1. In Shopify admin, go to Sales channels > Online Store and click Edit theme.
  2. Click the gear icon to open Theme settings.
  3. Scroll down and open Custom CSS.
  4. Paste the rule into the CSS field and click Save.



The field adds styles to your entire online store and holds up to 1500 characters. If there is already CSS in the field, add your rule below it. Don't replace it.


Before saving, you can check how many items a selector matches. Open your store, press F12, go to the Console tab, type document.querySelectorAll('[class^="_lably_item"]').length and press Enter. A number such as 12 means the rule will apply to 12 items on this page. 0 means nothing matches, so check the selector.


If your theme has no Custom CSS field, or the rule has no effect, contact us at support@devit.software. Include the page link and describe where the size should be different.


✔️ Next step


Check our articles to learn more about the app's functionality:


Updated on: 15/10/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!