Shopify Dawn Theme Guide: Theme Customization, Template Preview, Demo for 10.0.0 version

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?

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.

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.

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.

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.

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.

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

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.

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.

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:

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.

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:

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.

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:

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.

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:

Footer

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

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.

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.

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.

Related products

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

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.

Product Grid

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

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.

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.

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.

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.

Cart Page

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

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.

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.

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

404 Page

Search

Gift Card

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.

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.