Cart button with text

Store Design
, , ,

Topic summary

A user is building their first online store and encountering alignment issues when adding text (“Itens”) to their cart button icon. They’re using CSS :after pseudo-element to insert the text, but it appears to the right of the icon and disrupts the layout.

Current approach:

  • Using position: relative with :after content
  • Results in misaligned header elements (see attached screenshot)

Suggested solution:

  • Apply flexbox to the cart icon wrapper for better layout control
  • The :after method lacks proper positioning structure

Status: The issue remains unresolved. One respondent offered to provide a more detailed, theme-specific solution via direct message. A preview link and password were shared for troubleshooting.

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

Hello! I’m creating my first online store, and I needed help creating this button. I used this code below but it makes the text appear to the right of the icon and then misaligns everything. Can you help me? Thanks

Captura de ecrã 2025-04-05 004818.png

.header__icon--cart:after {
content: "Itens";
position: relative;
font-size: 14px;
}

Preview link: https://umhw5c-2w.myshopify.com/?_ab=0&_fd=0&_sc=1

Pass: mahpor

2

If you’re adding “Itens” using :after, it can mess up alignment because it’s just tacked on with no layout control. One trick is using flexbox on the cart icon wrapper to fix that — quick and clean.

I’ve handled this for a few store owners before. There’s a better way to keep everything aligned depending on your theme setup. If you’re open to it, I can take a closer look and walk you through what would work best. Just shoot me a message.

1 Like