After Shopify 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 the Shopify theme store. Then why did Dawn come into the picture?

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 [version 10.0.0].

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, 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. 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 which theme is better, right?

Dawn Theme vs Debut Theme: Should You Switch To Shopify Dawn 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. Yes, you can customize it and make it more attractive for your customers by adding useful and fully-featured Shopify apps like iCart Cart Drawer Cart Upsell to give better shopping options.

icart cart drawer cart upsell

Offers Better Performance

When we say about, we mostly mean it by 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 of 10.0.0 version

“We will be exploring the editor of the latest Dawn 10.0.0 version. If your store is having any other version of the Dawn theme, then the options and editor layout mentioned in this guide may vary. If you have not updated your version then it’s time to update and grab the newly launched features of the theme.” As you can see, I am all set to start our journey with the Dawn theme editor. Let’s get started!

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

shopify 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.

dawn theme 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.

dawn theme 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.

dawn theme 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.

Know The 10 Major Reasons Why 95% Of Shopify Stores Fail?

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. Collections
  4. Collections list
  5. Pages
  6. Blogs
  7. Blog Posts
  8. Cart
  9. Checkout
  10. Contact
  11. Classic customer accounts
  12. 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.

dawn theme announcement bar

1. Click the arrow beside the Announcement bar on the Left Panel.
2. Click on the Announcement bar and go to the Right Panel.
3. You can set the color scheme and do the needful settings using the other options for the announcement bar.
4. Apart from that, you can use the Custom CSS to add custom styles for this section.

Now clicking on the inner option of announcement bar you will get the following options to do:
1. Click on the Announcement and go to the Right Panel.
2. Enter the Announcement Text, and Link (optional).
3. Click on the Add Announcement to add a new announcement bar (optional).
4. Hit the Save button once you’re done with the changes.

dawn theme header

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.

icart cart drawer cart upsell

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-output

Steps to customize the Header Section:

1. Set the logo position. You have four options for logo positioning. Select anyone.
2. To add your logo for your website, go to the theme settings and add image. It will replace the store name text with the image.
3. Click the Select menu to customize the menus. You can also create drop-down menus.
4. Select the sticky option will show the header on the screen even if the user scrolls up.
5. Keep the Show separator line enabled if you want to make the separator line visible.
6. Choose the color scheme.
7. Enable country/region selector if you want to show your website for different countries in different languages.
8. Set the logo position for mobile layout.
9. Adjust the spacing and section padding.
10. Hit the Save button to 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:

dawm theme image banner

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.

dawm theme 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 opacity of image overlay.
4. 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.
5. Set the Desktop text position and enable show container if you want to show it.
6. Set the Desktop content position and Color scheme.
7. Add animation in image.
8. Set the content alignment in mobile.
9. Now click on the heading under the image banner on the left panel. Set the heading on the right panel.
10. Same as the heading, change the text in the image banner section.
11. You can also add the text block by clicking on the Add block button (optional).
12. Save the changes.
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.

dawn theme featured collection

Steps to customize the Featured Collection Section:

1. Change the heading if you want based on the collection.
2. Select the size of the heading.
3. Add a description for the featured collection section.
4. Enable show collection from the admin if you want to make it display.
5. Set the style of the description.
6. Select the collection to show related products in the section.
7. Select the number of products to show in the section. The maximum product limit is 25.
8. Select the number of columns of products you want to show on the desktop. The maximum limit is 5.
9. Make products full width if you want.
10. Enable “View all” if your collection has more products so that by clicking on the button all products will be visible.
11. If you want to show the carousel on desktop then you can enable it.
12. Choose the color scheme for the featured collection section.
13. Add the settings for the product card like image ratio, image shape.
14. You must select the Show second image on hover option if you want to change the image when the user hovers over the product.
15. Check the next option to show vendors on the products.
16. If you want to show the product rating then check the option.
17. If you want to show a quick add button then enable the option.
18. Set the number of columns you want to show in the mobile layout. The maximum number is 2 columns.
19. 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.
20. The next section is for adjusting the section padding.
21. Lastly, save the changes.
Let’s check the output:

dawn theme 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. Set the image height, width, and position.
4. Select the content position you want to show in desktop or mobile.
5. Set the content layout and add the color scheme you want to give for the section.
6. You can add image animation to make your section more impressive.
7. Set the content alignment for the mobile layout.
8. Adjust the section padding
9. Click on the Save button to save the changes.
Note: You can skip the text or button in the Image with text.

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

image-with-text-output

Footer

You can add important links here to make 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. Enable Follow on Shop if you want to allow your customers to follow your store on the Shop app from your storefront.
4. 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.
5. Keep the Enable country/region selector checked to let your visitors pick their region.
6. Enable language selector will allow you to add a language selector to your store.
7. By enabling the Show payment icons option, all the payment icons added to your store will be visible to the visitors.
8. If your store is having privacy policy then you can add those links.
9. Adjust the spacing and section padding.
10. Click the save button to save changes.
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 in 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:

  • Featured collection
  • Featured product
  • Collection list
  • Rich text
  • Image with text
  • Image banner
  • Slideshow
  • Collage
  • Multicolumn
  • Multirow
  • Collapsible content
  • Email signup
  • Contact form
  • Video
  • Blog posts
  • Custom liquid
  • Page

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 it without editing the code.

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

dawn theme product information

Related products

This block allows you to show related products to the visitors when they explore any product.

dawn theme related products section

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.

dawn theme 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.

dawn theme 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.

dawn theme 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.

dawn theme contact page

Blogs Page

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

dawn theme 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.

dawn theme blog posts

Cart Page

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

dawn theme 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.

dawn theme 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.

dawn theme checkout page

Classic customer accounts

Here you get the page templates related to the Customer account like customer account, customer activate account, customer address, customer login, customer order, customer register, customer reset password.

Others Page templates

Here you get the page templates for Password, 404 Page, Search, Gift Card. Let’s check out the default layout and theme template customizing options available for each page.
Password
dawn theme password page
404 Page
dawn theme 404 page
Search
dawn theme search page
Gift Card
dawn theme 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.

dawn theme settings

Logo: This section allows you to add the logo and favicon image.

Buttons: From this section, you can change the border and shadow of the buttons in your theme.

Variant pills: This section provides options to display your product variants.

Inputs: You can set the border and shadow of the inputs from this section.

Product cards: This section allows you to change the style, alignment, and color scheme of the product cards.

Collection cards: This section allows you to change the style, alignment, and color scheme of the collection cards.

Blog cards: This section allows you to change the style, alignment, and color scheme of the blog cards.

Content containers: This section allows you to change the customize the content containers.

Media: This option allows you to change the appearance of media.

Dropdowns and pop-ups: This option allows you to change the look of dropdowns. Affects areas like navigation dropdowns, pop-up modals, and cart pop-ups.

Drawers: This section gives you customization options for the drawers.

Badges: This section lets you change the position and color scheme of badges.

Brand information: Here you can add a brand description to your store’s footer with an image.

Cart: This section allows you to change the type of the cart.

Custom CSS: This option allows you to add custom styles to your entire online store.

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

sagarika.das

About the author

20 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?

  4. Bonjour. Ton tutoriel est vraiment fantastique.
    Je suis en train d’installer DAWN. Mais je ne trouve pas la colonne de droite. Elle n’existe pas chez moi. Comment puis-la trouver?
    Merci pour ta reponse

    1. Hello Segba,
      Thanks for your response!

      Which column is unavailable? Can you explain it in detail?

  5. It has the option to add a custom section. Can I use this to create another menu bar across the top? If so, how?

    1. Hello Erin,
      I am not sure about creating another menu bar using the custom section. Still, if this customization is necessary for your store you can contact Shopify Support. They will surely help you out!

  6. Hi! Would you mind if I share your blog with my facebook group?
    There’s a lot of folks that I think would really appreciate your content.
    Please let me know. Thanks

    Feel free to surf to my page – Nakliye

    1. Yes, sure you can share our blog.

  7. as needed. This preserves you effort and your employees of the redundant trouble.

    1. Thank you 🙂

  8. In my opinion, it is error.

    1. Could you please specify the error so that we can correct it.

  9. I recommend to you to come for a site on which there is a lot of information on this question.

  10. It is remarkable, rather amusing piece

    1. Thank you

  11. In my opinion you commit an error. Write to me in PM, we will communicate.

    1. What’s the error? Please let me know so that we can correct it.

Leave a Reply

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