Mastering Dawn Theme: Aligning Prices, Hiding Elements, and More Custom CSS Tweaks

Hey store owners! Ever found yourself tweaking your Shopify theme, trying to get that perfect look and feel? You're not alone! I recently followed a fantastic discussion in the Shopify community that perfectly encapsulates the kind of granular control we all crave. It started with record28-2 trying to get their collection page prices just right in the updated Dawn theme, and it quickly blossomed into a whole list of common UI adjustments. Let's dive into what we learned from the pros like tim_1 and how you can apply these insights to your own store.

Getting Your Collection Prices in Line (Literally!)

record28-2's initial challenge was a classic one: how to move those product prices on collection pages to align perfectly on the right, next to the product title. It's a small detail, but it makes a big difference in visual hierarchy and professionalism. The community quickly jumped in, with OttyAI confirming it's definitely a CSS job, and then tim_1 swooped in with a brilliant solution.

The Collection Page Price Alignment Code

Here’s the CSS snippet tim_1 shared that helps achieve that right alignment for prices on your collection cards, especially for desktop views:

@media (min-width:750px) {
  .card__heading {
    padding-right: 10rem; /* some space for price */
  }
  .card__heading + .card-information {
    display:flex;
    justify-content:space-between
  }
  
  .card-information .price {
      margin-top: -1em !important; /* amend to match your font sizes */
  }
}

How to Implement This:

1. From your Shopify admin, go to Online Store > Themes.
2. Find your Dawn theme (or a duplicate you're working on – always work on a duplicate first!).
3. Click Actions > Edit code.
4. Navigate to the Assets folder and open base.css (or theme.css, depending on your theme version).
5. Scroll to the very bottom and paste the code.
6. Alternatively, you can go to Online Store > Themes > Customize, then click the Theme settings gear icon (usually bottom left), and select Custom CSS. Paste the code there. This is generally safer for smaller snippets!

tim_1 also wisely pointed out that this might not look perfect if your product titles wrap onto a second line, so always test thoroughly!

Product Page Polish: Hiding Unwanted Elements & Price Alignment

Once the collection page issue was sorted, record28-2 had more questions, this time focusing on the individual product pages. They wanted to hide local pickup options and "more payment options" links, and also align prices on the product page itself. Again, tim_1 had the answers!

Hiding Local Pickup and Payment Options

Sometimes, less is more, especially if certain features don't apply to your business model. Here's how to hide those specific elements:

pickup-availability {
  display: none;
}
more-payment-options-link {
  display: none;
}

Product Page Price Alignment

For aligning prices on the product page (which is different from the collection page), tim_1 provided another set of CSS rules:

.product__info-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.product__info-container > * {
  width: 100%;
  margin: 0 !important;
}

.product__info-container > .product__title,
.product__info-container > [id^=price] {
  width: max-content;
}

.product__info-container > [id^=price] {
  padding-right: calc(100% - 44rem); /* to right-align with buttons */
}

Where to Add This Code:

For these product page-specific snippets, tim_1 suggested adding them to the “Custom CSS” of the “Product info” section within the theme customizer to keep things organized and minimize side effects. If that's not available or you prefer, adding it to base.css or the general Custom CSS section will also work, but be mindful of specificity.

Tackling the Rest of the Wishlist

record28-2 had a few more excellent questions that many store owners can relate to:

• Hiding prices for sold products.
• Reducing menu font size.
• Changing the "VIEW ALL" tab size.
• Removing account links from the header and cart.

While specific code wasn't provided for every single one in the thread, these are all solvable with targeted CSS. Here's a general approach:

Hiding Prices for Sold-Out Products

This usually involves a bit of Liquid (Shopify's templating language) combined with CSS. You'd typically find the product card or price element in your collection template (e.g., card-product.liquid or product-card.liquid) and add a conditional check:

{% if product.available %}
  {{ product.price | money }}
{% endif %}

Alternatively, if your theme adds a class like .sold-out to unavailable products, you could use CSS:

.product-card.sold-out .price {
  display: none;
}

You’ll need to inspect your theme’s specific HTML structure to find the correct classes and Liquid objects.

Adjusting Menu Font Size

To change your main menu's font size, you'd target the navigation links. For example:

.header__menu-item {
  font-size: 1.4rem; /* Adjust as needed */
}

/* Or for all text on the site if you want a global change */
body {
  font-size: 1.5rem; /* Adjust base font size */
}

Resizing the "VIEW ALL" Tab

That "VIEW ALL" button on collection pages can often benefit from a little custom sizing. You'd need to inspect the element to find its class, but it might look something like this:

.collection-list__view-all {
  padding: 1.2rem 2.5rem; /* Adjust padding to change size */
  font-size: 1.6rem; /* Adjust font size */
}

Cleaning Up the Header and Cart

Removing account links from your header or "continue shopping" buttons from the cart is all about hiding elements with CSS. Again, inspect the elements to find their unique classes or IDs. For example:

/* Hide account icon in header */
.header__icon--account {
  display: none;
}

/* Hide "Continue Shopping" button on empty cart */
.cart__empty-text a.button {
  display: none;
}

/* Hide account button on cart page */
.cart__footer-actions .button--secondary[href*="/account"] {
  display: none;
}

A Word of Caution and Community Wisdom

As tim_1 pointed out in the thread, it's crucial to be mindful of existing "Custom CSS" that might be clashing with new additions. Always review your code and remove or comment out anything that's causing issues. And remember, before you make any code changes, duplicate your theme! This way, you can test everything in a safe environment without affecting your live store. Many community members, like devcoders, Moeed, and suyash1, started by asking for the store URL and password – a testament to how crucial context is when troubleshooting.

It's truly inspiring to see how the Shopify community rallies to help each other, turning complex design tweaks into manageable tasks with a few lines of CSS. Customizing your Dawn theme doesn't have to be intimidating; it's about understanding the basics and knowing where to look for help, or in this case, where to paste some expert code!