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?
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
The Shopify theme “Dawn” is specially built for better performance, flexibility, and ease of use. The best thing about the Shopify Dawn Theme 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, 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.
Let’s explore the amazing features of the Shopify dawn theme.
Features of Dawn theme
An Open Source Theme
Dawn 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.
The App block lets you move the app anywhere on the page without touching the theme files. Besides, the section and metafield offer great flexibility to your store design and content.
Overview to the Shopify Dawn Theme editor
As you can see, I am all set to start our journey with 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.
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 als 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 dropdown given above the preview section.
The theme template editor offers the preview section with three different preview options: (1) Mobile, (2) Desktop, and (3) Fullscreen.
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.
Customizing the Dawn Theme
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.
(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.
To open up the list of page templates, click on the templates dropdown list above the preview:
- Home page
- Collection list
- Blog Posts
- Others Pages
The homepage creates the first impression of your store. Therefore, it requires more focus.
Let’s start step-by-step customization:
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.
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 it 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.
Steps to customize the Image Banner Section:
- 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:
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 on 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 text section:
You can add important links here to make the navigation easier for your site visitors.
Steps to customize the Footer Section:
- 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 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 to your store using the “Add Section” option.
Let’s explore all the theme sections available in the Shopify Dawn theme.
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
- Collection list
- Contact form
- Custom Liquid
- Email signup
- Featured Collection
- Image banner
- Image with text
- Rich text
All these theme sections are open for all the pages in your store, thanks to Shopify’s Online Store 2.0!
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.
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.
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.
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.
The product grid section offers you various options to customize the product list. You can change the settings as per your requirement.
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.
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.
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.
When the user opens any blog post, it will redirect to this page. You can customize the blog post sections from the right panel.
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.
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, and Gift Card. Let’s check out the default layout and theme template customizing options available for each page.
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.
This section allows you to change the primary and secondary color of the button, label/text, or background of the theme.
This section lets you customize the fonts of headings and body text of the theme template.
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.
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.
The checkout tab is where you can customize your 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.
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.