Prices viewed with a margin from left

Store Design
,

Topic summary

A store owner reports a layout issue where regular product prices display with an unwanted left margin after adding compare-at prices. The compare-at prices appear correctly positioned, but standard prices are shifted to the right.

Affected areas:

  • Collection pages (new collection)
  • Product pages
  • Sale items

Solution provided:
A CSS fix was shared to resolve the alignment:

  • Navigate to: Online Store → Themes → Actions → Edit Code → Assets → component-price.css
  • Add custom CSS targeting .price-item with a negative margin adjustment

The solution appears to have resolved the issue, with a result screenshot provided showing corrected alignment.

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

Hi,

Since I’ve added compare at prices the prices of the ‘regular’ products are moved a bit to the right (with a margin from left). The compare at prices are showed correctly on the right spot, but you can see in the attachments that the regular prices are moved a bit to the right.

The regular products are showed here:

https://atelierfrenchie.nl/collections/new-collection

The compare at products are showed here:
https://atelierfrenchie.nl/collections/sale
https://atelierfrenchie.nl/products/anna-von-lipa-tapas-freja-yellow-pink

Someone knows the solution?

Thanks in advance.

Gr, Niels

1 Like
2

Hello @Atelierfrench89

Go to online store ---------> themes --------------> actions ------> edit code------->assets-----> component-price.css
add this code at the end of the file.

.price .price-item {
margin: -2px !important;
}

result

9.png
9.png1209×744 809 KB

If this was helpful, hit the like button and accept the solution.
Thanks

2 Likes