I made this lesson for Shopify beginners who want to learn how to get started with the most popular free Shopify Dawn theme, quickly and easily. I’m going to walk you through, step by step, how I use the free Shopify Dawn theme to create a professional-looking store to sell smart water bottles. But of course, you can use this setup for anything you want. For example, I also use the free Dawn theme for my own Shopify store where I sell my self-published dog training books and online dog training courses.

  1. The first thing I always do when customizing a new Shopify store is start with the homepage, so that’s exactly what we’ll do in this video.
  2. We’ll set up the announcement bar to share a discount code for first-time customers
  3. Add a header with your logo and menu items
  4. And build out the image banner to showcase your most popular product with a link to it.
  5. I’ll also show you how to add your featured products section. This means we’ll first need to add products, and I’ll walk you through that as well.
  6. It’s very important to install a great customer review app on your Shopify store, since Shopify doesn’t have a built-in review feature. I’ll show you which app I use for my online dog training business
  7. … and plenty of other helpful tips too …

If the embedded video isn’t working for some reason, you can click here to watch it directly on YouTube.

https://youtu.be/_1KaVwJEpjs?si=zGSGc1CWhtrMyj2U

Extra instructions/notes

Image banner / Button (Custom CSS)

In the ‘image banner / hero section’ of this tutorial, I added custom CSS code to the button inside the image banner. You can find the code I used for that button below.

.banner__buttons .button {
  font-weight: 700;
  font-size: 18px;
  padding: 14px 28px;
  border: 2px solid #ffffff;
  background-color: #ffffff;
  color: #000000;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease-in-out;
}
.banner__buttons .button:hover {
  background-color: transparent;
  color: #ffffff;
  border-color: #ffffff;
  box-shadow: 0 6px 18px rgba(255, 255, 255, 0.4);
}

Judge me App Custom CSS

In the tutorial, in the section about reviews and the Judge Me app, I added custom CSS code to the review widget. The code I used for the Judge Me app can be found below.

.jdgm-histogram.jdgm-temp-hidden {
  display: none !important; }

.jdgm-sort-dropdown-wrapper {
  display: none !important; }

.jdgm-gallery {
  margin-left: 10px !important; }

.jdgm-rev__icon::after, .jdgm-rev__buyer-badge {
  background-color: #309930 !important; }

a.jdgm-rev__body-read-more {
  text-decoration: underline;
  cursor: pointer;
  color: blue !important; }