Shopify Dawn theme customization

This article covers:

• How to move the 'Add to Cart' button to the left on PC in the Dawn theme?
• How can I hide an empty section in the Dawn theme?
• How to develop a knowledge panel for FAQs in the Dawn Theme?
• How to hide the collection title in one specific collection (Dawn Theme)?
• How to move the menu below the email subscription sign-up in the Dawn theme?
• How to display a red product collection or sale price and show the amount saved (Dawn Theme)?

By default, the Dawn theme already places the Add to Cart button on the left. The button is capped at a maximum width (44rem), so on wide screens it sits on the left side of the product information column rather than stretching across it.

If your button appears centered, it's usually due to custom code, an app, or an earlier theme customization. You can force it back to the left on desktop with a small CSS update.

1. Go to Online Store → Themes → Edit code.
2. Open Assets → base.css (or your main CSS file).
3. Add the following code at the end of the file:

4. Click Save.

If it doesn't change anything, inspect the Add to Cart area on your storefront and replace .product-form__buttons with the container class you see in your theme.

How can I move the “Add to Cart” button to the right in the Kingdom theme?

Inspect the Add to Cart button container in Kingdom, then apply a desktop-only rule that pushes it to the right. Replace the selector with the class you copied.

The Dawn theme does not automatically hide empty sections. To display a section only when it contains content, wrap it in a simple Liquid condition.

1. Go to Online Store → Themes → Edit code.
2. Open the section that renders the content (often Sections → main-product.liquid).
3. Find the output you want to hide when empty. For a description, it may look like:

4. Wrap it so it only shows up when there’s content:

5. Save, then test with one product that has a description and one that doesn’t.

   If you’re hiding a different field, replace product.description with the field used in that section.

How can I bulk hide product descriptions on my website?

You cannot bulk-hide descriptions through Dawn settings.

However, if your description section is wrapped in a Liquid condition, all products with an empty description will automatically hide that section.

How to add a product description on the homepage in the Dawn theme?

Add a Featured product section to your home page and enable the Description block (or add a Custom liquid block that outputs the product description).

In the Dawn theme, the simplest way to create an FAQ-style knowledge panel (with visible questions and expandable answers) is to use the built-in collapsible content section.

1. Go to Online Store → Pages and create (or open) your FAQ page, then click Save.
2. Go to Online Store → Themes → Customize.
3. In the page selector at the top, choose Pages, then click Create template.
4. Name the template (for example, faq), base it on Default page, and click Create template.
5. In the new template, click Add section and choose Collapsible content (or Collapsible rows, depending on your Dawn version).
6. In that section, click Add collapsible row for each FAQ item:
   • Set Heading to the question.
   • Set Row content to the answer.
7. Click Save.
8. Go back to Online Store → Pages and open your FAQ page.
9. In Theme template, select the template you created (for example, page.faq), then click Save.

The FAQ section now appears only on pages assigned to this template, not on every page using the default template.

If you need more control than Dawn’s built-in section (layout, icons, structured data, one-open-at-a-time behavior), you can create a custom FAQ section in Online Store → Themes → Edit code.

A custom section lets you manage FAQ items as blocks in the theme editor while controlling the markup and styling.

Collection titles appear by default on all pages in Dawn.

If you want to hide the title for just one collection you need to assign that collection its own template.

1. Go to Online Store → Themes → Customize.
2. Open Collections → Default collection from the page selector.
3. Click Create template, name it, and create it.
4. Open the Collection banner (or the section that shows the header).
5. Turn off Show collection title. If the setting isn’t available, remove the header section from this template.
6. Click Save.
7. Go to Products → Collections, open the collection you want to change, choose your new template in Theme template, then Save.

If your theme does not offer a show collection title toggle or a removable header section, you would need to adjust the template code instead.

In the Dawn theme, the email sign-up isn't a footer block. It's a setting in the footer section, and Dawn always displays your menu blocks first and the sign-up form second. Because of this, you can't reorder them in the theme editor, but a small CSS change will move the menu below the sign-up.

To move the menu below the email sign-up:

1. Go to Online Store → Themes → Edit code.
2. Open Assets → base.css.
3. Paste this at the bottom and click Save:

The email sign-up now appears above your footer menus, on both desktop and mobile.

If nothing changes, your Dawn version may use different class names. Inspect the footer wrapper that contains the menus and the sign-up form, and replace .footer__content-top with the class you see.

In Dawn, you can show a red sale price and a “Save $X” label on collection cards with a small theme edit.

Before you start, confirm the product is on sale by setting a Compare at price higher than the Price.

Show a “Save $X” line under the price

1. Go to Online Store → Themes → Edit code.
2. Open Snippets → price.liquid.
3. Search for money_price.
4. Paste this snippet right after the line that outputs the price:

1. Open Assets → base.css.
2. Paste this at the bottom and replace #d10000 with your color if needed:

Refresh a collection page to confirm the sale price is red and the “Save $X” line appears.

If nothing changes, your theme may use different selectors; inspect the price on a collection card and update the class names.

How to change the collection page product discount price color?

1. Go to Online Store → Themes → Edit code.
2. Open Assets → base.css.
3. Add this at the bottom and replace the color value if needed:

How do I show the original price crossed out next to the discounted price in red (collection pages)?

Dawn already shows this when a product has both a Price and a higher Compare at price.

If the original price isn’t crossed out or the sale price isn’t red:

1. Confirm each discounted product has a Compare at price set higher than Price.
2. Then add this to Assets → base.css:

If your theme uses different class names, use Inspect on the price to copy the exact selectors.