Mastering Product Display: Get Title & Price on One Line in Shopify Horizon Theme (Desktop & Mobile)

Hey everyone! As someone who spends a lot of time diving into the Shopify community forums, I often see recurring themes. One that recently caught my eye, and frankly, is a classic challenge for many store owners, revolves around how product information displays, especially on mobile. Our friend SHPFY48 kicked off a great discussion about this, asking:

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 .

You know the drill, right? You want your product titles and prices to sit neatly side-by-side, even when someone's scrolling through your store on their phone. It looks clean, professional, and makes browsing a breeze. But then you hit a snag: your theme, in this case, the Horizon theme, decides to stack them on mobile, messing with your beautiful layout. And those long product names? They just get cut off awkwardly instead of showing a nice ellipsis (those three dots...).

Why Horizon Theme Stacks Product Info on Mobile

It’s a common scenario. Modern Shopify themes, including Horizon, are designed to be responsive, but sometimes their default mobile layouts prioritize stacking elements for readability on smaller screens. SHPFY48 even set a "horizontal layout" for their group section on mobile, but it wasn't sticking. As Custom-Cursor and cartergray quickly pointed out, you're likely going to need a "small CSS customization" or an "override." VikashJ elaborated, mentioning that Horizon's group section might have a "direction" setting that differs between breakpoints, which a simple theme setting might not fully override.

The Community's Solution: Custom CSS

The good news is that the community rallied with several excellent CSS-based solutions. The core idea across all suggestions involves using CSS Flexbox (or Grid, in one case) to control the layout and specific text properties for truncation.

Key CSS Concepts You'll Be Using:

• Flexbox (display: flex): Your primary tool for arranging items in a row. Use align-items: center for vertical alignment and justify-content: space-between to push title and price to opposite ends.
• Title Truncation (the '...' ellipsis): Apply white-space: nowrap; overflow: hidden; text-overflow: ellipsis; to your product title element. This forces text onto a single line, hides overflow, and adds the ellipsis. You'll often need min-width: 0 and flex: 1 to ensure the title takes up available space without pushing the price off-screen.
• Price Handling: Use flex-shrink: 0 on the price element to prevent it from being squeezed by a long title.
• Mobile-Specific Overrides (Media Queries): Wrap your CSS in @media (max-width: 749px) to apply changes only to smaller screens.
• The !important Flag: Occasionally needed to override strong theme defaults (e.g., display: flex !important;). Use sparingly.

Putting It Into Action: Step-by-Step Instructions

Ready to get your hands dirty? Here’s how to implement these changes. Remember, always duplicate your theme before making any code edits. This way, you have a safe backup!

1. Duplicate Your Theme: Go to Online Store > Themes. Find your current theme, click Actions > Duplicate. Work on the duplicated theme.
2. Access Theme Code: On your duplicated theme, click Actions > Edit code.
3. Locate Your CSS File: Paste code into assets/base.css or assets/theme.css. Some themes also have a "Custom CSS" section in the theme editor (Online Store > Themes > Customize > Theme settings > Custom CSS), which is an even safer place.
4. Choose Your Code Snippet: The community provided variations depending on Horizon's product card structure. You might need to use your browser's developer tools (right-click > Inspect Element) to find the exact class names for your product title, price, and their container.

Option 1: General Flexbox for Product Card Info (Common)

This approach, suggested by SectionKit, Steve_TopNewYork, and WebsiteDeveloper, targets a common information wrapper. It's a good starting point.

.product-card__info,
product-card .card__information {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px; /* Adjusted from 12px for potentially tighter fit */
}

.product-card__title,
product-card .card__heading {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-card__price,
product-card .price {
  flex-shrink: 0;
  white-space: nowrap;
}

@media (max-width: 749px) {
  .product-card__info,
  product-card .card__information {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
  }
}

Option 2: Using Grid for .product-card__content (websensepro's solution)

websensepro offered a robust solution using CSS Grid, specifically targeting the .product-card__content element. This might be necessary if your Horizon theme's structure is slightly different. Paste this at the bottom of your CSS 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;
  }
}

Option 3: Targeting Horizon's group-block (ajaycodewiz's solution)

ajaycodewiz provided a solution specifically for the group-block within the Horizon theme. This targets those specific elements to enforce the row layout and ellipsis. Paste this at the end of your assets/base.css file.

@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):

desktop after the fix:

After you've pasted the code, save your changes and immediately check your duplicated theme's preview on both desktop and mobile devices. You might need to clear your browser cache to see the updates. If one snippet doesn't work, try another, as the exact class names can vary slightly even within the same theme, depending on updates or minor customizations.

It’s important to remember that directly editing theme code means future theme updates might overwrite your changes. If you're not comfortable digging into code, or if these solutions don't quite get you to that pixel-perfect taliri.fr look, it's always a good idea to consider hiring a Shopify expert. They can pinpoint the exact selectors for your specific store and ensure the changes are robust.

This whole discussion really highlights the power of the Shopify community. SHPFY48 asked a great question, and multiple experts jumped in with detailed, actionable advice. It's fantastic to see how we can all help each other refine our stores. If you're thinking about starting your own online store or upgrading your current setup, I highly recommend checking out Shopify's platform. It's designed to make e-commerce accessible and powerful, and with a little community wisdom, you can customize it to look exactly how you envision!

Happy customizing!