Title and price on the same line for Collection page (Broadcast theme)

Store Design
, , , ,

Topic summary

Goal: On the Broadcast theme’s collection page, display product title and price on the same line with spacing (e.g., “Sac à dos Nico 54€”).

Summarized with AI on January 25. AI used: gpt-5.
1

Hello everyone,

Thanks in advance for your help !

I would like to put the title and the price on the same line (with a space between them) on my collection page.

BTW, I have Broadcast theme. :slightly_smiling_face:

For example :

Sac à dos Nico 54€

Do you know how to do it ?

Have a nice day !

1 Like
2

Hey @Anne-Sophie1
Kindly share your Store URL and Password if enabled

3

Hello @Anne-Sophie1 ,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

4

Hello @Anne-Sophie1

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->theme.css>Add this code at the bottom.

.product-item--centered .product-item__title {
    margin-bottom: -24px;
    display: flex;
    justify-content: left;
    align-items: center;
}
.product-item__price__holder.has-siblings {
    display: flex;
}
.product-item--centered .product-item__price__holder {
    justify-content: flex-end;
}
5

Hello ! :slightly_smiling_face:

My store is : www.hedisonparis.com

(https://hedison-paris.myshopify.com/)

6

Hello !

My store is : www.hedisonparis.com

(https://hedison-paris.myshopify.com/)

1 Like
7

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > custom.css and paste this at the bottom of the file:
.product-link.product-link--info {
display: flex;
flex-wrap: wrap;
}
.product__grid__price.product__grid__element {
flex-grow: 1;
}
.product__grid__element__default {
justify-content: end;
}
.product__grid__title.product__grid__element {
margin: 0;
}

ZestardTech_0-1687159199578.png
ZestardTech_0-1687159199578.png1919×653 208 KB

8

Hello ! Thank you so much, it works ! :smiley:

However, I saw, when the title is longer the price can’t be aligned.

Capture d’écran 2023-06-19 à 09.35.36.png
Capture d’écran 2023-06-19 à 09.35.36.png371×150 5 KB

Is it possible to configure like that when the title is longer ?

Example :

Capture d’écran 2023-06-19 à 09.38.01.png
Capture d’écran 2023-06-19 à 09.38.01.png344×108 6.02 KB

Thank you !

1 Like
9

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > theme.css and paste this at the bottom of the file:
.product-link.product-link--info {
display: flex;
}
.product__grid__price.product__grid__element {
flex-grow: 1;
}
.product__grid__element__default {
justify-content: end;
}
.product__grid__title.product__grid__element {
margin: 0;
}

ZestardTech_0-1687160900708.png
ZestardTech_0-1687160900708.png942×650 219 KB

10

Hello,

Thank you for your help, but it doesn’t work.

Regards,

11

Dear Oscprofessional,

I try your advice but it doesn’t work. :confused:

Thank you