Seamless Product Displays: Aligning Titles and Prices in Shopify's Horizon Theme

Seamless Product Displays: Aligning Titles and Prices 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 popular 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? What if you want a compact, professional look that keeps key information aligned?

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 layout control, combined with white-space: nowrap, overflow: hidden, and text-overflow: ellipsis for elegant text truncation. These properties allow you to dictate how elements arrange themselves and how long text strings are handled within their containers.

Understanding the Core CSS Concepts

• display: flex or display: grid: These are modern CSS layout modules. Flexbox is excellent for one-dimensional layouts (row or column), while Grid is fantastic for two-dimensional layouts (rows and columns simultaneously). For aligning items on a single line, both can be effective, but Grid offers more precise control over column sizing for title and price.
• white-space: nowrap: This prevents text from wrapping to the next line, forcing it to stay on a single line.
• overflow: hidden: When combined with white-space: nowrap, this hides any content that extends beyond the element's box.
• text-overflow: ellipsis: This magical property adds the three dots (...) to indicate that text has been truncated, making it clear to the user that there's more content than currently displayed.
• flex-shrink: 0 (for price): This ensures that the price element will not shrink when space is constrained, giving priority to the price's full display while the title can truncate.
• min-width: 0 (for title): This allows the title to shrink as much as needed before truncation, making space for the price.
• @media (max-width: 749px): This is a media query, a crucial part of responsive design. It applies the enclosed CSS rules *only* when the screen width is 749 pixels or less, specifically targeting mobile devices.

Step-by-Step Implementation Guide for Your Horizon Theme

Let's get your product titles and prices looking sharp. Here’s how to apply the custom CSS:

1. Access Your Theme Code: From your Shopify admin dashboard, navigate to Online Store > Themes. Find your current Horizon theme, click Actions, then select Edit code.

   

2. Locate Your CSS File: In the left sidebar, under the 'Assets' directory, look for files like theme.css, base.css, or styles.css. The exact file name can vary, but these are common places for general styling. Select one to open it.

3. Paste the Custom CSS: Scroll to the very bottom of the selected CSS file and paste the following code. This comprehensive solution combines the best practices from the community discussion, ensuring both desktop and mobile responsiveness:

   /* Custom CSS for Product Title and Price Alignment in Horizon Theme */
   
   /* General Flexbox for Product Card Info (Desktop & as a fallback) */
   .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;
   }
   
   /* Mobile-specific adjustments for Horizon Theme (using Grid for robustness) */
   @media screen and (max-width: 749px) {
     .product-card__content {
       display: grid !important;
       grid-template-columns: 1fr auto !important; /* Title takes 1 fraction, price takes auto width */
       column-gap: 12px !important;
       row-gap: 4px !important;
       align-items: center !important;
     }
   
     /* Ensure other elements like gallery and quick-add span full width */
     .product-card__content > .card-gallery,
     .product-card__content > a[class*="gallery"],
     .product-card__content > .quick-add {
       grid-column: 1 / -1 !important;
       width: 100% !important;
     }
   
     /* Styling for the Product Title Link on mobile */
     .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;
     }
   
     /* Styling for the Product Price on mobile */
     .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; /* Use flex to align price elements if needed */
       align-items: center !important;
     }
   
     /* Ensure other content blocks also span full width on mobile */
     .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;
     }
   
     /* Specific override for group blocks if they are still stacking */
     .product-grid__card .group-block > .group-block-content.layout-panel-flex--row {
       flex-direction: row !important;
       flex-wrap: nowrap !important;
       align-items: center !important;
       justify-content: space-between !important;
     }
   }
   

4. Save Your Changes: Click the 'Save' button in the top right corner of the code editor.

Testing and Refinement

After saving, immediately preview your store on both desktop and various mobile devices (or use your browser's developer tools to simulate different screen sizes). Check product collection pages, featured product sections, and any other areas where product cards are displayed. Ensure that:

• Titles and prices are on the same line.
• Long titles are correctly truncated with an ellipsis.
• The layout remains clean and readable on all screen sizes.
• No other elements on your product cards have been adversely affected.

If you notice any issues, it might be due to slightly different class names in your specific Horizon theme version or conflicts with other custom CSS. In such cases, using your browser's 'Inspect Element' tool can help you identify the precise class names for your product title and price elements, allowing you to adjust the CSS selectors accordingly.

Conclusion

Achieving pixel-perfect design across all devices can sometimes require a little extra effort beyond theme settings, especially with dynamic elements like product titles and prices. By leveraging custom CSS, you gain the power to fine-tune your Shopify store's appearance, ensuring a professional and consistent user experience whether your customers are browsing on a desktop or a smartphone.

This level of customization is crucial for a polished e-commerce presence. If you're looking to start your own Shopify journey, Shopify offers a robust platform that can be tailored to your exact needs. For more complex migrations or advanced development needs, remember that expert help is always available to ensure your store looks and functions exactly as you envision.