2 Features of Dawn theme
5 Home Page
Shopify Dawn Theme OverviewThe 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 ThemeShopify 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 PerformanceWhen 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 UseThe 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 FlexibleThe 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 EditorAs 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.
Left PanelThe 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 SectionThe theme template editor offers the preview section with three different preview options: (1) Mobile, (2) Desktop, and (3) Full-screen.
Right PanelIt 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.
Template PagesTo open up the list of page templates, click on the templates drop-down list above the preview:
- Home page
- Collection list
- Blog Posts
- Others Pages
Home PageThe homepage creates the first impression of your store. Therefore, it requires more focus. Let’s start step-by-step customization:
Announcement BarThe 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.
HeaderThe 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
Image BannerThis 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:
- 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.
Featured CollectionThe 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.
Image with textThis 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.
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.
Theme SectionsWhen 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