How to move badge at corner and change size

Store Design
, ,

Topic summary

Goal: reposition a product badge to a corner on collection cards and adjust its size, ideally with flexibility for future changes. An image was shared to illustrate the desired corner placement.

Key actions provided (manual CSS edits):

  • Move to top-right: in component-card.css, target .card__badge.top.right and set position: relative with small negative offsets (right ≈ -10px, top ≈ -12px).
  • Move to top-left: target .card__badge.top.left and set position: relative with offsets (left ≈ -10px, top ≈ -13px).
  • Change badge font size: in base.css under the .badge rule (originally font-size: 1.2rem), increase to a preferred value (e.g., 1.3–1.4rem or a px value).

Notes:

  • The solution uses theme CSS rather than a theme setting toggle; position changes require editing selectors (right vs. left).
  • The attached image is helpful context for placement; the code snippets are central to the fix.

Outcome: The CSS changes worked for the requester, including left-side placement and font size adjustments. Status: resolved; no remaining questions.

Summarized with AI on December 25. AI used: gpt-5.
12

For that go to the “base.css” file and find this CSS in line number “2883”

.badge {
    border: 1px solid transparent;
    border-radius: var(--badge-corner-radius);
    display: inline-block;
    font-size: 1.2rem;
    letter-spacing: 0.1rem;
    line-height: 1;
    padding: 0.5rem 1.3rem 0.6rem 1.3rem;
    text-align: center;
    background-color: rgb(var(--color-badge-background));
    border-color: rgba(var(--color-badge-border), var(--alpha-badge-border));
    color: rgb(var(--color-badge-foreground));
    word-break: break-word;
}

and replace the " font size 1.2rem" to 1.3rem or 1.4rem according to your requirement.
you can also give it in pixel e.g- 15px

Thanks

1 Like