Dawn theme - change position of the price

Technical Q&A
,

Topic summary

Goal: Move the product price in Shopify’s Dawn theme from the left to the top of the product card and change its color to red.

Position change: A CSS approach was suggested by adding a rule targeting .card-information .price in base.css to position it absolutely near the top-left (e.g., top: -33px; left: 0). The requester confirmed this initially worked.

Color change: The requester then focused on changing the price color to red. Suggestions included adding color: red; to the existing rule and, more reliably, placing a CSS rule at the top of base.css or component-card.css:

  • .card-information .price { color: red !important; }

Outcome: The color change worked after applying the CSS with !important, and the requester confirmed success. Some advice also mentioned adding code in theme.liquid, but the final working solution used CSS in base.css/component-card.css.

Status: Resolved. Positioning achieved via absolute positioning; color successfully set to red with a CSS override.

Summarized with AI on January 26. AI used: gpt-5.
2

Hey @Caneprint

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above tag.

Capture.JPG
Capture.JPG1313×443 84.1 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like