Unlock Your Dawn Theme: Customizing Product Titles & Prices on Collection Pages

Hey there, fellow Shopify store owners! As a migration expert and someone who spends a lot of time sifting through the Shopify community forums, I often see common questions pop up around theme customization. One of the most frequent requests, especially for those using the popular Dawn theme, revolves around tweaking the layout of product cards on collection pages. It's those little details that really make your store stand out, right?

Recently, a thread titled "Dawn theme - collection page" caught my eye, started by a store owner named paulverseckas. They had a very clear goal: move the product price to sit right next to the product title on the collection page, and make sure both shared the same font and font size. It's a subtle change, but it can significantly clean up the look and feel of your product grids, making them more streamlined and professional. This kind of visual alignment can really improve the shopping experience for your customers. Here's a peek at what paulverseckas was trying to move away from:

As often happens in these community discussions, folks jumped in to help. v.marychenka offered some initial CSS, which is fantastic because it shows the collaborative spirit of the Shopify ecosystem. However, as paulverseckas quickly found out, sometimes the first solution needs a little tweaking to fit perfectly with a specific store's setup or theme version.

That's where Ploqo stepped in with a really solid, tested solution that hit all the marks. They not only provided the exact CSS needed but also included incredibly helpful "Before" and "After" screenshots, showing exactly what paulverseckas was aiming for. This level of detail is a game-changer when you're trying to implement code changes yourself. Let's take a look at their "Before" and the desired "After" state:

The Transformation: Price Next to Title

Before: Price Under Title

After: Price on the Right of Title, Same Font and Size

How to Implement This Customization in Your Dawn Theme

Ready to get this clean look on your own collection pages? Here are the steps, based on Ploqo's proven method. Remember, before making any code changes, it's always a good idea to duplicate your theme. That way, you have a fallback if anything goes awry!

1. Go to your Shopify Admin, navigate to Online Store.
2. Click Edit theme on your current theme. This will open the theme editor.

3. Open the page menu at the top of the theme editor (it usually says "Home page" or similar). Select Collections, and then choose a specific collection page to edit.

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

5. Scroll down in the Product grid settings until you find and click Custom CSS.

6. Delete any code that might already be in the Custom CSS box. Then, carefully paste the following code:

.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; }

7. Click Save in the top right corner.

Ploqo confirmed that this code was tested on Dawn 16.0.0 and specifically on paulverseckas's collection page, so it should be a reliable fix for many of you out there. The key here is using the correct CSS selectors to target the specific elements within the Dawn theme's product card structure. This ensures that the display: flex; property correctly arranges the title and price, while other properties like font-size and white-space: nowrap; ensure they look consistent and don't wrap prematurely.

It's these kinds of specific, actionable solutions that make the Shopify community so invaluable. While Shopify Support is amazing for core issues, for these granular design tweaks, turning to fellow merchants and developers often yields quick and effective results. So, if you're looking to enhance your Shopify store's aesthetic and provide a smoother browsing experience, don't hesitate to dive into these community-backed customizations. Happy customizing!