Shopify Dawn Theme Guide: Theme Customization, Template Preview, Demo

Shopify Dawn Theme Guide: Theme Customization, Template Preview, Demo

Technical Writer

shopify-dawn-theme-banner

After Shopify has introduced Online Store 2.0, everyone is crazy about Shopify Dawn Theme. You might be thinking, there are already tons of themes there for your online store in Shopify theme store. Then why did Dawn come into the picture?

Until now Debut was one of the widely used themes. And if you are already a Debut theme user you might be excited to know Dawn vs Debut, right? Let’s know more about this theme and learn how you can give a better shopping experience to your site visitors using the Shopify Dawn Theme.

Shopify Dawn Theme Overview

The Shopify theme “Dawn” is specially built for better performance, flexibility, and ease of use. The best thing about Shopify Dawn is it uses all the new features available in Online Store 2.0 (announced in the Shopify Unite 2021).

In the near future, by replacing the debut theme, the Shopify dawn will be the default theme in the newly created Shopify stores. So we can assume that there’s something really exciting added to this theme. Check out some of the best Shopify dawn theme examples.

Let’s explore the amazing features of the Shopify dawn theme.

Features of Dawn theme

An Open Source Theme

Shopify 2.0 Dawn theme is the first Shopify design open source theme. It is built with semantic markup with HTML and CSS to create great experiences on all browsers. So if you want to give your Shopify store a new design then Dawn is the best theme for you.

Offers Better Performance

When we say about, we mostly mean it by the speed. The dawn theme is 35% faster in loading websites than the Debut theme – the best theme of Shopify themes. It automatically removes all the unnecessary or unused scripts or codes from the theme templates. Therefore it loads faster when compared to other themes.

If you choose the dawn theme for your store then you automatically choose better performance for your store visitors.

Easy to Use

The sections are made global in Online Store 2.0. Therefore, not only the homepage, if you want to customize your product page, blog page, collection page, or any page, you can easily do that. Using metafields, Shopify makes it easy for you to manage your content.

More Flexible

The App block lets you move the app anywhere on the page without touching the theme files. Besides, the section and blocks offer great flexibility to your store design and content. You can now connect the dynamic data source to your store using Shopify metafields.

Shopify Dawn Theme Editor

As you can see, I am all set to start our journey with Dawn theme editor. Let’s get started!

default-shopify-dawn-theme

By clicking on the Customize button, you would be able to enter the theme editor.

dawn-theme-template-editor

Here, you can witness a drastic change in the template editor of the dawn theme.

The Dawn theme template editor is categorized into 3 parts: (1) Left Panel, (2) Preview Section (in the middle), and (3) Right Panel.

Left Panel

The left panel shows the layout or structure that reflects the sequence of sections of your store page. Here you can easily locate each and every section in the page and also add sections or blocks (inside the section) whenever needed.

left-panel

By default, it’s showing the layout of the Homepage. You can change the template from the drop-down given above the preview section.

Preview Section

The theme template editor offers the preview section with three different preview options: (1) Mobile, (2) Desktop, and (3) Full-screen.

preview-section

Right Panel

It is the place where you actually customize your store or theme template. When you select any section in the left panel, all the options under that section will appear on the right panel.

right-panel

Shopify Dawn Theme Customization

I know your goal is to get listed in the top 10 Shopify stores or 10 best eCommerce websites on the web, for which you need to explore each and every corner of the theme template editor and experiment with your creativity.

Pro Tip: Make your store more attractive and informative.

Before we start customizing the theme, let’s take a look at the page templates already available in Dawn.

Pre-requisites:

(1) Create pages: About us, FAQ, Terms of use, Blog (optional).
(2) Add Products to your store.
(3) Add some collections and add products to them.
(4) Main menu: Link the main categories to the menus and FAQ page. I would suggest you remove the Home menu.
(5) Footer menu: Link About us, Contact, Terms of use, Blog pages to footer menus. You can also link the collections here.

Template Pages

To open up the list of page templates, click on the templates drop-down list above the preview:

  1. Home page
  2. Product
  3. Collection
  4. Collection list
  5. Contact
  6. Blogs
  7. Blog Posts
  8. Cart
  9. Checkout
  10. Others Pages

Home Page

The homepage creates the first impression of your store. Therefore, it requires more focus.

Let’s start step-by-step customization:

Announcement Bar

The Announcement bar is meant to greet the site visitors with an awesome offer that inspires them to make a purchase. The new theme updates of Online Store 2.0 lets you add multiple Announcement bars to your store.

announcement-bar

Steps to customize the Announcement bar:

  1. Click the arrow beside the Announcement bar on the Left Panel.
  2. Click on the Announcement and go to the Right Panel.
  3. Enter the Announcement Text, set the Color scheme and Link (optional).
  4. Click on the Add Announcement to add a new announcement bar (optional).
  5. Hit the Save button once you’re done with the changes.

You can create up to 12 announcement bars as per your requirements and enable or disable them (by clicking on the eye beside the Announcement) based on what offer you want to show to your visitors.

Header

The header section is a tiny space including the store name or logo and important links to other pages on your store. Therefore, make sure to add main links and organize them precisely.

header

Steps to customize the Header Section:

  1. Click on the Select Image button to add a logo image to your website. It will replace the store name text with the image.
  2. Set the logo width.
  3. You have three options for logo positioning. Select anyone.
  4. Click the Edit menu link to customize the menus. You can also create drop-down menus.
  5. Keep the Show separator line enabled if you want to make the separator line visible.
  6. Enable sticky header option will show the header on the screen even if the user scrolls up.
  7. Go to Theme Settings and add the social media URLs to show the social media icons on the header.
  8. Change the Accent icons to make them look suitable for your store.
  9. Save the changes

Note: You can skip the text or button in the Image banner section.

I have modified the header section. Here’s how it will look:

header-output

Image Banner

This section helps you to show the big picture of your brand to your customers. Dawn makes the banner look more impressive by letting you add multiple images in a single image banner.

image-banner

You can also add multiple Image Banners to your site. The image banner size of 1600 x 1050 px can work better with the desktop.

Steps to customize the Image Banner Section:

  1. Click on the Select Image button to add the first image for the banner.
  2. Add the second image to the banner if you want, otherwise, it’s optional.
  3. Set the Desktop text position and Color scheme.
  4. If you want to show the banner images in the stack on mobile view, then keep the Stack images on mobile option checked.
  5. Checking the Adapt section height to the first image size option will resize the section height according to the first image size. Tick the option if you want the same.
  6. Now click on the heading under the image banner on the left panel. Set the heading on the right panel.
  7. Same as the heading, change the text in the image banner section.
  8. You can also add the text block by clicking on the Add block button (optional).
  9. Hit the Save button.

Let’s see how the image banner looks:

image-banner-output

Featured Collection

The Featured Collection section helps us to showcase the best or trending products to the store visitors. You can also use it to show product collections.

featured-collection

Steps to customize the Featured Collection Section:

  1. Change the heading if you want based on the collection.
  2. Select the collection to show related products in the section.
  3. Select the number of products to show in the section. The maximum product limit is 12.
  4. If there are more products in the collection than it will be visible in the section, you can add the View All button at the bottom of the section.
  5. Check the Enable swipe on mobile option if you want to offer a swipe feature on the mobile view. By default, the user has to scroll to see the next or previous products.
  6. In the Product Card, select the image ratio from the options available:
    Adapt to image: shows actual image size of the product
    Portrait: product image fits to a portrait (Recommended)
    Square: product image fits to a square
  7. You must select the Show second image on hover option if you want to change the image when the user hovers on the product.
  8. Checking the Add padding option will add spacing between products.
  9. Check the next option to show vendors on the products.
  10. In the theme settings, select the Sale badge color scheme.
  11. Save the changes.

Let’s check the output:

featured-collection-output

Image with text

This section can help you to make your store informative for your customers. You can describe something about your brand or new product category, etc.

image-with-text

Steps to customize the Image with text Section:

  1. Click the Image with text section on the left panel.
  2. Go to the right panel and add the image in the section by clicking the Select image button.
  3. Choose the Image ratio, Color scheme, and Desktop layout.
  4. Now click on the heading under the image with text on the left panel. Set the heading on the right panel.
  5. Same as the heading, change the text description in the image with text section.
  6. Again, click on the button and set the button label and link.
  7. Click on the Save button.

Note: You can skip the text or button in the Image with text.

Let’s check the output of the image with text section:

image-with-text-output

Footer

You can add important links here to make the navigation easier for your site visitors.

theme-footer

Steps to customize the Footer Section:

  1. Select the suitable Color scheme for your store footer.
  2. Keep the Show email signup checked if you want your customers to subscribe for newsletters, promotional emails, etc. Change the heading if you wish to.
  3. If you have social media accounts, you can link them here. For that, enable the Show social media icons option. To add social media accounts, go to Theme Settings > Social Media.
  4. Keep the Enable country/region selector checked to let your visitors pick their region.
  5. Enable language selector will allow you to add language selector to your store.
  6. By enabling the Show payment icons option, all the payment icons added to your store will be visible to the visitors.
  7. Hit the Save button.

This is how I have customized the Footer section of my store.

theme-footer-output

Up till now, we have just seen the default sections added by Shopify in your Homepage of Dawn theme. You can add more sections anywhere to your store using the “Add Section” option.

Let’s explore all the theme sections available in the Shopify Dawn theme.

Theme Sections

When you click Add Section on the left panel of the theme editor, you can see a list of theme sections on the screen:

  • Blog Posts
  • Collage
  • Collection list
  • Contact form
  • Custom Liquid
  • Email signup
  • Featured Collection
  • Image banner
  • Image with text
  • Multicolumn
  • Page
  • Rich text

All these theme sections are open for all the pages in your store, thanks to Shopify’s Online Store 2.0!

Product Pages

Shopify’s default product page is quite impressive as it consists of almost everything you may want to have on your product page. In case you need a different layout, you can create your own using the Create template option.

product-page

As you can see in the above image, there are two more sections available other than the Home page: (1) Product Information, and (2) Product Recommendation.

Product Information

This section gives you all access to the product block so that you can easily choose which block to show and where to show without editing the code.

You can add three more blocks to this section by clicking the Add block option.

product-information

Product Recommendation

One of the most requested features you can find here is Product Recommendation. Shopify shows related products (from the same collection) to the visitors when they explore any product.

product-recommendation

You can also customize the product details in the product recommendation section from the right panel.

Collection Page

The collection page showcases all the products of a specific collection. This template has two more sections other than the Home page: (1) Collection banner and (2) Product grid.

Collection Banner

The image you have taken while creating the collection will be displayed as a collection banner. You can customize the collection banner from the right panel.

collection-banner

Product Grid

The product grid section offers you various options to customize the product list. You can change the settings as per your requirement.

product-grid

Collection list

This page shows all the collections in a grid that you have created in your store. On the right panel, you will see the options to customize the collection list page.

collection-list

Contact Page

The contact page consists of two sections by default: (1) Page and (2) Contact form. You can also add other sections to this page as per your store requirements.

contact-page

Blogs Page

Here you can show all your blog posts for the store visitors who like to read. The blog page automatically organizes the blog posts based on the number of blogs you have.

blogs-page

Blog Posts

When the user opens any blog post, it will redirect to this page. You can customize the blog post sections from the right panel.

blog-posts

Cart Page

The cart page shows the products that the user has added to the shopping cart.

cart-page

In the Shopify Dawn theme, you can modify the cart page where you can add featured collections as product recommendations or upsell at the bottom of the Subtotal section. It saves you from spending on apps.

cart-page-product-recommendation

Are you looking for some more upselling or cross-selling options to increase your store revenue? Then you should add the iCart Shopify app to your store. iCart Upsell app comes with lots of amazing features like product upsells, cross-sells, discount tiers, time-sensitive offers, product bundles, and much more!

Checkout Page

The checkout page doesn’t offer any sections, but you can customize the Checkout page at Theme Settings > Checkout.

checkout-page

Others Page templates

Here you get the page templates for Password, 404 Page, Search, and Gift Card. Let’s check out the default layout and theme template customizing options available for each page.

Password

password-page

404 Page

404-page

Search

search-page

Gift Card

gift-card-page

Theme Settings

If you have built your online store earlier with Shopify, then you might be familiar with the Theme Settings available in Shopify’s theme template editor.

Shopify allows you to customize the entire theme template from one place: Theme Settings. You can find all the controls to your theme template here.

theme-settings

Colors

This section allows you to change the primary and secondary color of the button, label/text, or background of the theme. To use gradient colors, you have to paste Gradient CSS Code in the box.

theme-colors

Typography

This section lets you customize the fonts of headings and body text of the theme template.

typography-option

Styles

The styles tab allows you to modify the color schemes of Badges like Sale badge and Sold out badge. There, you can also find decorative elements to customize for your entire template.

theme-style-dawn

Layout

Here you can select the Maximum width of your online store from two options: 1200px and 1600px (px = pixels).

theme-layout

Social Media

Here you can select the social media buttons to be placed for sharing your products or blog posts or other content from your website. For that, you need to connect your store to your social media accounts.

social-media-option

Search Input

The Search Input settings allow you to show product suggestions when the store visitors type the query in the search box. You can also enable showing Vendor and product price with the Product title visible in the search input suggestion.

search-input-settings

Favicon

Dawn theme allows you to set theme-wise different favicon images for your store. Quite impressive!!

store-favicon

Currency Format

When you enable the Show currency codes option, all the prices in the Cart page and Checkout page will be visible followed by currency codes at the end. For example: $25.00 USD (USD = currency code).

currency-format

Checkout

The checkout tab is where you can customize the checkout page template of your store. As the checkout page doesn’t accept styles and formattings of Theme settings, it has its own settings tab.

With the Checkout tab in Theme Settings, you can modify the header banner, logo of the checkout page. Next option is the main content area, where you can customize the background image, color, and form fields.

checkout-settings-header

The next order summary option lets you change the background image and color on the next half content area of the checkout page.

checkout-settings-order-summary

The remaining options are typography, colors that help you to customize the formatting of your checkout page.

This was all about the theme settings. Now, we shall see the app embeds, where you can manage all the apps installed on your Shopify store.

app-embeds-theme-settings

So, this guide ends here. Hope you got something interesting in your basket. You can explore our blog section to get more insightful information.

37 Responses

  1. Thanks a lot for posting this!!
    Does the “Collection list” page allow for changing the default number of collections per row.? It is currently set to 3?

    1. Thank you for your response!
      The “Collection list” page doesn’t allow changing the default number of collections per row.
      It automatically organizes the collections until it reaches 3.

  2. hi. im trying to adda customise button so that customers can let me know what they would like me to put onto products i made customise

    1. Thank you Jackson for your response!
      You can use the “Custom Liquid” section on the product page and add customize button for your customers.

  3. This is a great guide, thank you. I can’t figure out what the “accent icons” section ties to on the page. (the accent 1, 2, outline, text) Does it only apply if the seller uses sold out and sale buttons, or does it apply to other areas on the page that I am not seeing?

      1. Thanks for the great article. Can you give me an example of what the “Accent Icons” setting actually changes at Theme Settings > Styles > Decorative Elements? I have set it to Accent 2 and have made that a bright purple to make it stand out but no matter what I do, I can’t see what it actually changes.

  4. I want to make my store 1600px wide, but under Theme Settings, the Layout option is not listed. I installed the Dawn theme about 2 weeks ago. I searched but was unable to find any information about an update to the theme. Is there a setting I’m missing?

    1. Thank you Barbara for your response!
      Well, I would suggest you reinstall the Dawn theme now, so you may find the Layout section in the Theme Settings.

    1. Thank you Mervi for your response!
      According to me, the Shopify Dawn theme has no size recommendations or size constraints for the images. You can upload any size image and keep it if looks appropriate.

  5. Hi there! Thank you for the great guide.
    I could not find where to add Order Instruction for seller. So that customers can tell us which products they want to mix with.

    Could you please guide me?

    1. Hello Thanom, Thank you for your response!
      Please follow the steps to add Order Instructions for Seller:
      1. Open the Dawn theme editor.
      2. Go to the Cart page.
      3. Click the Subtotal section.
      4. Select the “Enable cart note” checkbox.
      5. Save the changes.

      Check the reference image: https://prnt.sc/1s0o4j2

    1. Hi there! Thanks for your response!
      Shopify allows your customers to enter discount codes on the Checkout page.
      Please check the reference image: https://i.imgur.com/WExV61y.png

      If you want this option in your cart then you can use a Shopify app – iCart. It offers a free 14-day trial for new users which is perfect to test various upsell options and discount offers for your stores.

  6. Hi everyone,

    Is there a way to have an hooverable menu instead of a clicking one? I have subcategories and I want people to be able to see the entire products in the principal categories.

    Thanks!

  7. how do i change the images settings on the product screen. I want the customer to be able to click on a image to purchase that item not to zoom in on it.

    1. Hey Caroline!
      Yes, the image banner can be stretched to full. For the sticky header, make sure to enable it from the Header section – The Header will shows on the screen as customers scroll up.

  8. Thank you for this comprehensive guide.
    Is there a way you can change the opacity of the image banner text box on the main image banner? I can’t seem to find the option to do this?
    Thank you!

    1. Hello Yen, Thank you for your response!
      I think we cannot change the opacity of the image banner text box. Still, if this customization is necessary for your store you can contact Shopify Support. They will surely help you out!

  9. Thank you for the wonderful informative post. I discovered and fixed things thanks to the guide and info you have provided. I am trying to add the social media links to the top of the page (it’s now in the footer section) and can not figure out how to do it. Can you help? Thanks ~ Enzie

  10. Hi Sagarika,

    My main menu is too long so it is split into different rows under my logo. On the Ipad it is split into 3 rows and I could not click to choose the drop-down menu of the menus on the 1st row. Do you have any suggestion? Thanks

    Quinnie.

  11. Tried it but the custom input field is not captured in cart page or order.. So essentially I created a custom input box for user to enter ccustomisation details but it is not reflecting in his cart or the order.

Leave a Reply

Your email address will not be published. Required fields are marked *