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.
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.
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
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.
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:
- Home page
- Product
- Collection
- Collection list
- Contact
- Blogs
- Blog Posts
- Cart
- Checkout
- 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.
Steps to customize the Announcement bar:
- Click the arrow beside the Announcement bar on the Left Panel.
- Click on the Announcement and go to the Right Panel.
- Enter the Announcement Text, set the Color scheme and Link (optional).
- Click on the Add Announcement to add a new announcement bar (optional).
- 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:
- Click on the Select Image button to add a logo image to your website. It will replace the store name text with the image.
- Set the logo width.
- You have three options for logo positioning. Select anyone.
- Click the Edit menu link to customize the menus. You can also create drop-down menus.
- Keep the Show separator line enabled if you want to make the separator line visible.
- Enable sticky header option will show the header on the screen even if the user scrolls up.
- Go to Theme Settings and add the social media URLs to show the social media icons on the header.
- Change the Accent icons to make them look suitable for your store.
- 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:
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.
- Click on the Select Image button to add the first image for the banner.
- Add the second image to the banner if you want, otherwise, it’s optional.
- Set the Desktop text position and Color scheme.
- If you want to show the banner images in the stack on mobile view, then keep the Stack images on mobile option checked.
- 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.
- Now click on the heading under the image banner on the left panel. Set the heading on the right panel.
- Same as the heading, change the text in the image banner section.
- You can also add the text block by clicking on the Add block button (optional).
- Hit the Save button.
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:
- Change the heading if you want based on the collection.
- Select the collection to show related products in the section.
- Select the number of products to show in the section. The maximum product limit is 12.
- 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.
- 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.
- 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 - You must select the Show second image on hover option if you want to change the image when the user hovers over the product.
- Checking the Add padding option will add spacing between products.
- Check the next option to show vendors on the products.
- In the theme settings, select the Sale badge color scheme.
- 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:
- Click the Image with text section on the left panel.
- Go to the right panel and add the image in the section by clicking the Select image button.
- Choose the Image ratio, Color scheme, and Desktop layout.
- Now click on the heading under the image with text on the left panel. Set the heading on the right panel.
- Same as the heading, change the text description in the image with text section.
- Again, click on the button and set the button label and link.
- 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 the text section:
You can add important links here to make navigation easier for your site visitors.
- Select the suitable Color scheme for your store footer.
- 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.
- 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.
- Keep the Enable country/region selector checked to let your visitors pick their region.
- Enable language selector will allow you to add a language selector to your store.
- By enabling the Show payment icons option, all the payment icons added to your store will be visible to the visitors.
- Hit the Save button.
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:
- 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.
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.
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.
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.
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.
Others Page templates
Here you get the page templates for Password, 404 Page, Search, Gift Card, and pages related to the Customer account. Let’s check out the default layout and theme template customizing options available for each page.
Password
404 Page
Search
Customer Reset Password
Customer Addresses
Customer Login
Customer Account & Customer Order
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.
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.
Typography
This section lets you customize the fonts of headings and body text of the theme template.
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.
Layout
Here you can select the Maximum width of your online store from two options: 1200px and 1600px (px = pixels).
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.
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.
Favicon
Dawn theme allows you to set theme-wise different favicon images for your store. Quite impressive!!
Currency Format
When you enable the Show currency codes option, all the prices on the Cart page and Checkout page will be visibly followed by currency codes at the end. For example $25.00 USD (USD = currency code).
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, and logo of the checkout page. The next option is the main content area, where you can customize the background image, color, and form fields.
The next order summary option lets you change the background image and color on the next half content area of the checkout page.
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.
So, this guide ends here. Hope you got something interesting in your basket. You can explore our blog section to get more insightful information.
66 Responses
Comments are closed.
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?
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.
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
Thank you Jackson for your response!
You can use the “Custom Liquid” section on the product page and add customize button for your customers.
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?
Thank you Julie for your response!
Decorative elements are for you to customize for your entire template.
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.
Hello Mike, Thank you for your response!
The “Accent Icons” setting is the color setting applied to icons that appear when you have collapsible tabs set up on the product page.
Please check the reference image: Image Preview For Reference
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?
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.
Hello,
where can I find the recommended image sizes for different images such as Image Banners?
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.
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?
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: Please take preview for SubTotal Section
Hi Sagarika! Thank you for your response.
It seems like I don’t have the Subtotal section. What I have is like in the picture.
picture attached for this query : Please check this image attached
Could you please help me out?
The picture you attached shows the Product page. You may find the Subtotal section on the “Cart page”.
Hi Sagarika! Thank you for your response.
It is working now. Thank you so much.
I’m glad to help you Thanom!
This theme doesn’t have a space where the customer can put in a discount code at checkout, is there a way i can add it?
Hi there! Thanks for your response!
Shopify allows your customers to enter discount codes on the Checkout page.
Please check the reference image: Take an image overview to apply Discount Code for Customers
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.
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!
Hello Krystel, Thanks for your response!
Here’s the guide you can refer to set up drop-down menus in your online store:
Drop Down Menu Shopify Guide
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.
Hello Oscar, Thank you for your response!
I think we cannot change the image settings on the Product page. Still, if this customization is necessary for your store you can contact Shopify Support. They will surely help you out!
DAWN THEME QUESTION:: Can the image banner – be stretched to full screen and go behind the sticky header?
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.
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!
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!
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
Hey Enzie! Thank you for your response!
I have not found any tutorial on the Shopify Community regarding this. What I found is this link where adding it to the header is not recommended: Adding social media icon to header on Brooklyn Theme.
But I’d like to help you out further on this. I will update you once I get the right solution.
Thank you Sagarika. I will check out the link and see if I can make it work.
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.
Hey Quinnie! Thank you for your response!
Can you share your store URL?
How can i add ajex add to card button in collection page?
Hey Abhay! Thank you for your response!
Hope this code will help you.
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.
Hey Gurman! Thank you for your response!
I found an answer regarding this on the Shopify Community. I think this would help you out: Custom text box input not showing on Order page
I designed the password template in the Dawn theme but for some reason its not showing on front end when I visit password page, instead I get the default Shopify password page
Thanks
Hello, Thank you for your response!
I think we cannot replace the default Shopify’s Password page with a manually created Password page. Instead, you can customize the default password page.
Still, if this customization is necessary for your store you can contact Shopify Support. They will surely help you out!
Hello Thank you for sharing
I am not able to find the option for customers to leave a note at the checkout.
How do I do this?
Thank you
Hello Wums,
Thank you for your response!
Please note that you can add the customer note on the Cart page only.
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: Subtotal Section Overview
Thank you so much! It worked
Also is it possible to have 3 products per row instead of 4?
The ‘Featured Collection’ section allows you to set the number of products you want to show on a page. If you select multiply of 3, it will show 3 products per row.
How about specific product collections?
Hello Wums,
I think we cannot change the product grid number for the collections as it automatically loads based on the number of products. Still, if this customization is necessary for your store, here are the ways you can get Shopify Support.
Hi Team
Is it possible to have 3 products per row instead of 4?
Our Dawn theme Shopify store is missing quick pay dynamic payment icons such as PayPal, amazonPay are missing from our add to cart button section and checkout cart.
How do we enable these options?
Thanks
Hello William,
Thanks for your comment!
Here I found a guide in the Shopify help center that may help you to add dynamic checkout buttons in your store.
Hey I am trying to add a different photo for mobile and dekstop. This worked quite well by editing the code in Debut but not for Dawn. Do you know how to do this?
P.S great article!
Hello Calvin,
Thanks for your comment! 🙂
I think we cannot do that using the theme editor but I found a solution for you in the Shopify Community: Separate banner images on mobile and desktop – Dawn Theme
How do you overcome the limitations of adding custom pages (non-product pages) in the DRAFT mode of updating to the Dawn theme? The previous staff used PageFly Landing Page Building; we can neither install this app in DRAFT mode nor port in its pages.
Hello Jeannie,
Thanks for your response! 🙂
I’m not sure how to do that as I found that we can have a maximum of 50 templates per resource type. Still, if this is necessary for your store, here are the ways you can get Shopify Support.
Is there a way to add packaging or gift wrap options to the checkout rather than adding as a variant to the product?
Hello Kristy,
Thanks for your response! 🙂
Yes! You can achieve that using the Checkbox upsell option in our iCart Shopify app. Please let me know if you need any help in adding packaging or gift wrap options. We would love to help you. 😊
Merhaba müşteri ürünü almak istediğinde kredi kartı ile değil kapıda ödeme ile istediğinde hemen satın al butonu yerine kapıda ödeme ile al seçeneğini koyabilirmiyiz çok uğraştım ama başaramadım bunun için yardımınıza ihtiyacım var
Hello Ömer Faruk,
Thanks for your response! 🙂
I would suggest you rename the “Buy it now” button text to “Cash on delivery” as it takes the customer directly to the checkout page where they can see the COD option (if you have already enabled it on your store) for their purchase.
İlginiz için teşekkür ederim haklısınız En doğrusu satın al butonu’nu Değiştirmek
Hızlı Ve çözüm bulma Çabanız İçin Size Tekrardan TEŞEKKÜR EDERİM
Glad to help! 🙂
How can i center the header menu like you?
and how can I change (bigger) the font size of the menu (Men, Women, Kids in your Case).
Thanks a lot
Hello Daniel,
Thanks for your response!
You have three options for logo positioning in the Header section. There you can choose the Top center option to center the header menu.
And you can change the font from Theme Settings > Typography. Just change the body font to change the menu font size.
Hello Everyone
Can You tell me how to add a check box for accepting Terms of Services in cart
Hello Aftab,
Yes! You can add Terms and conditions checkbox using the Checkout button widget in our iCart Shopify app.
Please refer to the image!
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
Hello Segba,
Thanks for your response!
Which column is unavailable? Can you explain it in detail?
It has the option to add a custom section. Can I use this to create another menu bar across the top? If so, how?
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!