Dawn Theme, product name and price on the same row

Store Design
, , ,

Topic summary

A user asked how to display product names and prices on the same horizontal row in the Dawn theme, rather than stacked vertically.

Solution Provided:
A PageFly representative shared CSS code to be added to component-card.css:

  • Uses CSS Grid with grid-template-columns: auto auto
  • Aligns items horizontally with adjusted margins
  • Right-aligns both heading and price elements

Current Status:
The original poster confirmed the solution works. However, two follow-up issues emerged:

  • One user reports the price appears slightly lower than the title
  • Another user notes the fix works on desktop but not mobile (text and price remain centered and stacked on mobile devices)

These mobile responsiveness and alignment refinements remain unresolved.

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

Hi. I was wondering if someone knows how to put the name of the item and its price on the same row, one near the other.

This is the example:

image_2023-03-01_194057838.png
image_2023-03-01_194057838.png840×208 2.15 KB

And this is how mine looks like:

image_2023-03-01_194220421.png
image_2023-03-01_194220421.png593×185 950 Bytes

I have tried to find something that works but no luck so far.

2

Hi @AndreiGhetu ,

Could you please share URL and your store password if it enabled? So that we can help you.
Thank you.

3

https://viellelondon.com

password: 123123123

4

Hi @AndreiGhetu ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/component-card.css->paste below code at the bottom of the file:

.card__information {  
    justify-items: flex-start;
    grid-template-columns: auto auto;
    display: grid;
    margin-left: 10px;
    margin-right: 10px
}

.card__information .card__heading, .card__information .price {
    text-align: right !important;
    margin-top: -5px !important
}

PageFlyVictor_0-1677701259580.png
PageFlyVictor_0-1677701259580.png1867×217 37.5 KB

Hope my answer will help you.

Best regards,

Victor | PageFly

5

It worked! Thank you so much! You are a true hero.

1 Like
6

Hi,

this works fine, however the price ends up a tad bit lower then the title… any idea why?

7

@PageFly-Victor thank you very much for sharing this code - it works fantastic on my dawn theme. Do you happen to know what line of code I need to add to get the same results on mobile. Atm on mobile both the text and price is centred with each word sitting on top of each other. Thank you very much.