Shopify Dawn Theme: Align Product Price & Title on Collection Pages

Hey there, fellow store owners! It's always great to dive into the Shopify community forums and see how everyone is tackling common design challenges. Recently, a thread caught my eye that many of you using the popular Dawn theme might find super helpful. It was all about sprucing up the collection pages – specifically, how to get product titles and prices to sit nicely side-by-side, with the same font and size. Small detail, huge impact on aesthetics, right?

The original question came from @paulverseckas, who was looking to customize their collection page. Their goal was clear: move the product price to the right of the product title and ensure both shared the same font and size. If you've ever felt that the default layout pushes the price a bit too far down, you're not alone. It's a common desire to tighten up that product card presentation.

The Design Dilemma: Price Below Title

To give you a visual, here's what the default (or pre-modification) layout often looks like on a Dawn theme collection page, with the price stacked below the title:

It’s not terrible, but it could definitely be more streamlined, especially when you’re aiming for a clean, modern look. The beauty of running a Shopify store is the flexibility you have to tweak these details, even if it means a little custom code.

The Community Weighs In: Iteration and Solutions

As often happens in our vibrant community, several experts jumped in to help. @v.marychenka was quick to offer a CSS solution, which is always the go-to for these kinds of layout adjustments. They provided a code snippet, but as @paulverseckas discovered, the initial code didn't quite hit the mark, leading to some unexpected wrapping and sizing issues.

This is a perfect example of how theme versions and existing CSS can sometimes throw a curveball. @v.marychenka quickly iterated, explaining that the first code showed a hidden copy of the title and that the title plus price didn't fit the card width, causing the price to wrap. They even offered to apply the code directly via collaborator access, which is incredibly generous!

But then, @Ploqo chimed in with a slightly different approach, and importantly, provided clear "Before" and "After" images that perfectly illustrated the desired outcome. What's more, @Ploqo confirmed their solution was tested on a Dawn 16.0.0 store and on @paulverseckas's own collection page, giving it that extra stamp of approval. This is the solution we'll walk through.

The Winning Custom CSS Solution

Here’s how you can achieve that sleek, side-by-side title and price layout on your Dawn theme collection pages, based on @Ploqo's tested method. Before you start, a quick pro tip: always duplicate your theme first! That way, if anything goes awry, you can easily revert. Shopify Support, while amazing, typically won't troubleshoot custom code added to your theme.

Before & After: A Visual Guide

First, let’s see what we're aiming for. This transformation really makes a difference:

Before

After

Step-by-Step Instructions

Follow these steps carefully to implement the custom CSS:

Go to your Shopify admin and navigate to Online Store.
On your current theme, click the Customize button.

Open the page menu at the top (it usually says 'Home page') and navigate to your collection page: select Collections, then choose any specific collection (e.g., 'All products').

On the left-hand sidebar, click on the Product grid section.

Scroll down the settings for the Product grid until you find the Custom CSS box. Click it.

Delete any code that might already be in the box (if you were testing @v.marychenka's earlier code, for instance), then paste this code exactly as it appears:

.card > .card__content .card__information { display: flex; align-items: baseline; justify-content: space-between; gap: 0 1rem; padding-right: 1.2rem !important; }
.card > .card__content .card__heading { flex: 1; min-width: 0; margin: 0; }
.card > .card__content .card-information { width: auto; }
.card > .card__content .card__heading, .card > .card__content .price { font-size: 1.4rem; letter-spacing: 0.06rem; line-height: 1.3; }
.card > .card__content .price { white-space: nowrap; }

Click Save in the top right corner of the theme editor.

And just like that, you should see your collection page transform! The product titles and prices will now appear on the same line, perfectly aligned, and sharing the same clean font and size. This small adjustment can really elevate the professional look of your store.

A Few Thoughts on Customizations

This whole discussion highlights a few key things about customizing your Shopify store. First, don't be afraid to experiment! While it might seem daunting to dive into custom CSS, changes like these can significantly improve your customer's browsing experience. Just remember that crucial step of duplicating your theme before making any code modifications.

Second, the Shopify community is an incredible resource. Even when the first solution doesn't work perfectly, the collective knowledge and willingness to help often lead to a robust, tested answer. It’s a great reminder that you’re never alone when facing a design challenge on your store.

Finally, keep an eye on your theme version. As @Ploqo mentioned testing on Dawn 16.0.0, theme updates can sometimes change the underlying structure (the HTML classes and IDs that CSS targets). If a solution stops working after a theme update, it's usually because some of those selectors have changed, and you might need a slight adjustment to your custom code. It's all part of keeping your store looking its best!

Master Your Dawn Theme: Move Product Price Next to Title on Collection Pages