Mastering Product Layouts: How to Get Product Title & Price on One Line (with Ellipsis!) in Shopify's Horizon Theme
Hey there, fellow store owners!
Ever found yourself staring at your beautiful Shopify store on a mobile device, only to realize that the product titles and prices just aren't sitting right? Maybe they're stacking awkwardly, or those super descriptive product names are breaking onto multiple lines, pushing everything else out of whack? You're definitely not alone. This exact scenario popped up in a recent community discussion, and it's a fantastic example of a common hurdle many of us face with theme customization, especially on mobile.
The Horizon Theme Challenge: Product Title & Price Alignment
Our community member, SHPFY48, using the Horizon theme, was running into this very problem. They wanted their product title and price to appear on the same line, both on desktop and mobile, with long titles neatly truncated with an ellipsis (those three little dots...). They even tried using a "group section with a horizontal layout" in the theme settings, which worked on desktop but frustratingly, didn't stick on mobile. Sound familiar?
This is a classic case where theme settings, while powerful, sometimes don't offer the granular control needed for pixel-perfect design across all devices. The Horizon theme, like many modern Shopify themes, has its own default ways of handling responsive layouts, and often, these involve stacking elements vertically on smaller screens to maximize readability. But what if that's not the look you're going for?
Why Custom CSS is Your Best Friend Here
The consensus from the community experts was immediate and clear: this is a job for a little custom CSS. As Custom-Cursor and cartergray pointed out early in the thread, Horizon's mobile layout often has limitations that require a CSS override. This means diving into your theme's code just a touch to tell it exactly how you want those elements to behave.
The main techniques suggested revolved around two powerful CSS properties: display: flex (or display: grid) for horizontal alignment, and a combination of white-space: nowrap; overflow: hidden; text-overflow: ellipsis; to handle those pesky long titles. VikashJ elaborated on how Horizon's "direction" settings might differ for breakpoints, reinforcing the need for targeted mobile CSS.
Step-by-Step: Getting Your Product Title and Price on One Line
After SHPFY48 shared their store link (www.ballure.store), several community members, including websensepro, ajaycodewiz, and Steve_TopNewYork, provided concrete code snippets. The good news is, we can synthesize these into a reliable solution. This involves adding some CSS to your theme's stylesheet. Always remember to duplicate your theme before making any code changes, just in case!
1. Accessing Your Theme Code
- From your Shopify admin, go to Online Store > Themes.
- Find the theme you want to edit (it should be your active theme or the duplicated one).
- Click the Actions button, then select Edit code.
2. Adding the Custom CSS
You'll typically want to add this CSS to a global stylesheet, often named base.css or theme.css. In the Horizon theme, assets/base.css is a common place, as suggested by ajaycodewiz. Scroll to the very bottom of the file and paste the following code. This code combines the best practices from the community solutions, targeting the specific elements in the Horizon theme for both mobile and desktop views.
@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 > 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;
}
/* Additional rules for other elements to span full width if needed */
.product-card__content > .card-gallery,
.product-card__content > a[class*="gallery"],
.product-card__content > .quick-add,
.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;
}
}
/* Desktop & General Styles for ellipsis and flex/grid */
.product-card__info, .product-card__content {
display: flex; /* Or grid, depending on your section's default */
align-items: center;
justify-content: space-between;
gap: 12px;
}
.product-card__title, .product-card__content > a[ref="productTitleLink"] .text-block {
flex: 1;
min-width: 0; /* Important for flex items to shrink */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.product-card__price, .product-card__content > product-price {
flex-shrink: 0; /* Prevents price from shrinking */
white-space: nowrap;
}
A quick note on the code: The mobile-specific @media query uses display: grid for a robust two-column layout (title on the left, price on the right). The general rules outside the media query ensure the ellipsis and non-wrapping behavior for titles and prices are applied consistently or serve as a fallback. You'll notice some !important flags; these are often necessary to override the theme's default inline or more specific CSS rules. Websensepro and ajaycodewiz's solutions specifically used grid for mobile, which seems to handle the Horizon theme's structure well, while other suggestions used flex. I've included a robust grid solution for mobile and a flex general style for broader applicability.
These images from ajaycodewiz show the 'before' and 'after' on mobile, and the desktop view after the fix, which is exactly what SHPFY48 was looking for!
Remember, themes can sometimes use slightly different class names for their elements. If the above code doesn't quite hit the mark, you might need to use your browser's developer tools (right-click, then "Inspect") to find the exact class names for your product title and price elements within your Horizon theme. Look for classes like .product-card__info, .card__information, .product-card__title, .card__heading, .product-price, or product-card .price as mentioned by SectionKit and Steve_TopNewYork. The code provided above uses a mix of these to cover common variations, but a precise match is always best.
This community thread really highlights how a small tweak in CSS can make a huge difference in the user experience of your store. It's all about making sure your products look fantastic and are easy to browse, no matter what device your customers are using. Don't be afraid to experiment with these CSS properties, and always, always keep a backup of your theme. Happy customizing!