Product Name and Product Price on same line for collection page

[faithandwhatnot]

Hi, on my shop page I would like the price displayed to the right of the product name. Would also need to read the same on mobile. Please help! Attaching an example image. I’m using the Flow theme. My shop is stablefaith.myshopify.com the password is IODAOTIFII - thanks

[tim_1]

Your theme looks old and it’s also broken.
I’d suggest to rather use a newer untouched one.

Having said that, here is the CSS code you can paste into “Customize”=> Theme Settings=> Custom CSS:

.grid-view-item--desc-wrapper > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

[suyash1]

@faithandwhatnot - please add this css to the very end of your timber.css file and check

shopify admin->online store->themes->edit theme code->assets->timber.css

.grid-view-item--desc-wrapper div {display: flex;  justify-content: space-between;  align-items: baseline;}

[devcoders]

Hi @faithandwhatnot

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > timber.scss.css and paste this at the bottow of the file:

.grid-view-item--desc-wrapper > div {
  display: flex;
  justify-content: space-around;
  align-items: baseline;
}

[Elite_zer0]

Hi there

Thanks for sharing the details. I’d be happy to help with positioning the product price to the right of the product name in the Flow theme.

Just to confirm before I provide the exact code,are you referring to the collection/shop grid page (where multiple products are listed), or the individual product page?

This will ensure the layout is adjusted correctly for both desktop and mobile, matching the exact structure you’re aiming for.

Looking forward to your clarification!

[faithandwhatnot]

Hey @tim_1 - I took your advice and updated my theme to a newer one - can you tell me how to move the product and price to the same line there? Thanks.

[tim_1]

Horizon family themes give you more control over placement of elements.

Do this, no need for code: