RuffRuff Selling Periods

Customize product card badge design

How to customize display position, spacing, shape, font size, and more

The appearance of the product card badge is configured store-wide in the "Product card badge" section of "Settings."

  1. Open "Settings" from the left menu

  2. Open the "Product card badge" section

  3. Configure the following:

    • Position: which corner of the card the badge is shown on (top left, top right, bottom left, bottom right)

    • Spacing: depending on the selected position, set the spacing (px) from the top/bottom and left/right edges of the card

    • Maximum number of badges: the maximum number of badges shown on a single product card (default: 2, maximum: 10)

    • Shape: choose Square, Pill, Tag, or Custom (selecting "Custom" also lets you set the corner radius in px)

    • Font size / Font weight: the font size and weight of the badge text

  4. Save

Badge text and background/text colors are set per selling period rule, not on this screen. See "Configure / Edit product card badge" for details.

Depending on your theme, the default selectors may not correctly detect the product card or the badge's insertion point. If so, open "Advanced settings" within the "Product card badge" section and specify the following. It's fine to leave these blank.

  • Product card CSS selector: a CSS selector identifying the entire product card

  • Badge container CSS selector: a CSS selector identifying where the badge should be inserted

If you're not sure, please contact support.