Hey,
How can I make the product title and price on the same line? I am using Horizon theme and I made a group section with a horizontal layout and it works only on desktop view eventhough I selected horizontal view on mobile as well. And if the product title is too long, it needs to be shortened with the three dots … , see reference image I want it exactly like taliri.fr .
Thank you in advance
Hi,
Since you’re using the Horizon theme, you’ll likely need to customize the product card markup and CSS, as the default layout stacks the title and price on smaller screens.
For the title truncation with an ellipsis, you can use CSS like this:
.product-card__title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Then, place the title and price inside a flex container:
.product-card__info {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.product-card__price {
flex-shrink: 0;
}
If the Horizon theme uses different class names, sharing the relevant product card code or a screenshot of your setup would help identify the correct selectors.
my website is www.ballure.store , please give me a proper step by step instruction to get it done nicely
Hey @SHPFY48 ,
Thanks for sharing your store URL.
From what I can see, this isn’t something that can be achieved through the theme settings alone. You’ll need a small CSS customization to keep the product title and price on the same row and truncate long titles with an ellipsis, similar to taliri.fr. Horizon uses custom product card components, so a CSS override is the right approach.
Try adding this to your theme’s Custom CSS or base.css:
product-card .card__information {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
product-card .card__heading {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
product-card .price {
flex-shrink: 0;
white-space: nowrap;
}
(max-width: 749px) {
product-card .card__information {
display: flex !important;
flex-direction: row !important;
align-items: center;
justify-content: space-between;
}
}
If this doesn’t fully match your layout it’s likely because your product card has been customized or uses different class names. In that case, please share a preview link (with password if applicable), and I can provide the exact selectors for your theme.
Thank You !
Hi, thank you but the code does nothing. When switching to mobile view, it is still not right and the long title is not an ellipsis. here the link https://s9mxeqs9i2jhfy0j-76261523784.shopifypreview.com
In horizon theme,
Online Store > Them
es > Edit code > assets/base.css (paste at the end and save)
@media screen and (max-width: 749px) {
.product-grid__card .group-block > .group-block-content.layout-panel-flex--row {
flex-direction: row;
flex-wrap: nowrap;
}
}
.product-card a[ref="productTitleLink"] .text-block {
min-width: 0;
flex: 1 1 auto;
}
.product-card product-price.text-block {
flex: 0 0 auto;
}
.product-card a[ref="productTitleLink"] .text-block > * {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
before/after (mobile):
If you’re comfortable making a small theme edit, you can achieve this with CSS.
First, inspect the HTML to find the wrapper that contains the product title and price, then apply a flex layout
.product-card__info {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.product-card__title {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.product-card__price {
flex-shrink: 0;
white-space: nowrap;
}
If the Horizon theme is stacking them only on mobile, a mobile media query may be overriding the layout. You can force the horizontal layout on smaller screens:
@media (max-width: 749px) {
.product-card__info {
display: flex !important;
flex-direction: row !important;
align-items: center;
justify-content: space-between;
}
}
If you’re using Horizon’s new group block, it’s also worth checking whether the mobile layout is being overridden by the section’s generated CSS rather than your settings.
If you can share your store URL (or the relevant HTML from the product card), I can give you the exact CSS or Liquid changes needed to match taliri.fr almost pixel for pixel.
Hay @SHPFY48,
The mobile issue is likely because Horizon’s group section uses a “direction” setting that can differ between breakpoints, but sometimes the mobile toggle doesn’t fully override the flex behavior - check under the group section’s settings for a separate “Mobile layout” or “direction” dropdown (not just the desktop one), since some Horizon versions only expose this via a scoped setting rather than the main layout picker. If it’s still not respecting it, you may need to add custom CSS via a code block: something like @media (max-width: 749px) { .your-group-class { flex-direction: row; align-items: center; justify-content: space-between; } } targeting the specific class of your group section.
For the ellipsis truncation on long titles, that’s standard CSS - apply white-space: nowrap; overflow: hidden; text-overflow: ellipsis; to the title element along with a max-width (in %, so it doesn’t push the price off-screen), and pair it with flex-shrink: 0 on the price so it never gets squeezed. You’ll likely need to inspect the exact class names Horizon generates for the title/price within that section and target those directly in a custom CSS block, since Horizon doesn’t expose ellipsis truncation as a built-in theme setting.
Hi @SHPFY48 ,
1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / base.css file and paste the code in the bottom of the file.
@media screen and (max-width: 749px) {
.product-card__content {
display: grid !important;
grid-template-columns: 1fr auto !important;
column-gap: 12px !important;
row-gap: 4px !important;
align-items: center !important;
}
.product-card__content > .card-gallery,
.product-card__content > a[class*="gallery"] {
grid-column: 1 / -1 !important;
width: 100% !important;
}
.product-card__content > .quick-add {
grid-column: 1 / -1 !important;
width: 100% !important;
}
.product-card__content > a[ref="productTitleLink"] {
grid-column: 1 !important;
display: block !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
min-width: 0 !important;
width: 100% !important;
margin: 0 !important;
}
.product-card__content > a[ref="productTitleLink"] .text-block,
.product-card__content > a[ref="productTitleLink"] p {
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
max-width: 100% !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.product-card__content > product-price {
grid-column: 2 !important;
text-align: right !important;
white-space: nowrap !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
}
.product-card__content > div[class*="text_zrhij8"],
.product-card__content > .custom-typography,
.product-card__content > .product-badges,
.product-card__content > .product-grid-view-zoom-out--details {
grid-column: 1 / -1 !important;
width: 100% !important;
}
}
Hope this helps!
Thanks!
Hey, I tried everything but nothing happens, here is my store link duplicated https://0hnyzcbz2f9fomio-76261523784.shopifypreview.com
Anyone who knows how to do it? ^
Thanks
You’ll likely need a small CSS override, as Horizon stacks these elements on mobile. Use text-overflow: ellipsis for long titles and force the title and price to stay on the same line with flex styling.
Hey @SHPFY48 ,
Hope things are going smoothly for you!
This may require a small CSS customization, as Horizons mobile layout has some limitations. A flex layout combined with single line text truncation should help you achieve the same results as your reference.
Can you tell me how to do it
