Align the badges

Shopify Discussion
,

Topic summary

A user is experiencing misaligned badges on their Shopify store and wants them to match a reference image they provided.

Proposed Solution:

  • Navigate to: Online Store → Themes → Actions → Edit Code
  • Locate the file component-card.css
  • Add CSS code at the bottom to adjust badge alignment

CSS Properties to Apply:

  • display: flex
  • flex-direction: column-reverse
  • align-items: flex-start
  • gap: 0.5rem
  • padding: 10px 0

The solution targets the .card__badge.top.left class to reposition the badges. The discussion remains open as the original poster has not confirmed whether the fix resolved the alignment issue.

Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.
1

My badges look wrong. Help me make them look like the second picture

Screenshot 2024-10-11 at 09.34.31.png
Screenshot 2024-10-11 at 09.34.31.png1176×860 127 KB

Screenshot 2024-10-11 at 09.34.56.png
Screenshot 2024-10-11 at 09.34.56.png570×912 189 KB

2

Go to online store ----> themes ----> actions ----> edit code---->find file component-card.css-------->

add this code at the very bottom

.card__badge.top.left {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: .5rem;
    padding: 10px 0;
}
1 Like