1. Tweet today’s quote → 2. Get to work!
Yesterday, we set up the backend of your store so everything runs smoothly for you. Today, we’re going to work on the frontend – the part that everyone sees when they visit.
It’s critical to have a nice-looking, functional, easy-to-navigate store or else you simply won’t make many sales.
Luckily, Shopify makes it incredibly easy to build an awesome store in less than a day. And that’s exactly what we’ll do.
[highlight]Note: it’s really important that you’ve added and customized all your products and collections before you build out the frontend. Otherwise, you’ll just make extra work for yourself by having to do this again and make sure it all looks nice.[/highlight]
Today, we’re going to:
There are a bunch of themes to choose from. Some of them are made especially for certain industries, while others are made for certain kinds of stores – like themes that emphasize product photography or themes for stores with only a few products.
Shopify offers a handful of free themes and lots of paid ones. Paid themes cost around $140 to $180. Since we’re operating on a $500 budget, we’ll stick with a free theme for now.
Once your store picks up, you should definitely consider a paid theme that’s more geared toward getting conversions and purchases in your niche.
To browse through themes, go to ‘Sales Channels’ ➜ ‘Online Store’ ➜ ‘Themes’ in the left sidebar of your Shopify dashboard.
Scroll down to the ‘Explore free themes’ button.
Explore your options and choose the theme you like best.
"What kind of themes will help maximize my sales?"
My answer: I strongly recommend choosing a theme where at least one of your products is showcased ‘above the fold,’ which means that it shows up before the user even scrolls down. The top of your homepage is prime real estate… don’t waste it!
Your theme should also be really intuitive and easy to navigate. Bonus points for themes that include upselling techniques like a ‘You might also like…’ section that shows more products.
So Amanda went with the theme ‘Simple’ because it didn’t waste any time showcasing her products.
Just select your theme option and click ‘Add [Theme name].’ To make it live, you’ll need to click ‘Publish’ in the ‘Actions’ dropdown menu.
(Remember: if you decide to change your theme, you’ll always need to click ‘Publish’ in this section to make it live, or else your previous theme will stay put).
And if you click the ‘Customize’ button, you’ll be taken to a neat store builder that lets you put everything together without any coding experience.
Let’s jump into that.
After you published your theme of choice, click the blue ‘Customize’ button to get started.
The cool thing is that you can see every change in a live preview. So you know exactly what changes whenever you click a button – no surprises, and you can play around until you find settings that you like best.
You can build out pretty much every page from this builder. Just click the dropdown menu that says ‘Home page’ and you can switch between pages.
You’ll see options for:
Let’s start by adding your branding elements. Go to ‘Theme settings’ in the top tab.
This is a critical area, because every change you make here will be site-wide. So once you add your brand color, for example, it will change everything across the site for that option.
Click ‘Colors’ and add to your brand colors. If you just want an accent, I recommend changing the ‘Links and primary button background’ to your primary brand color. Amanda changed it to her purple.
Next, go to ‘Typography’ (this is just a fancy word for font, by the way).
Skim through the options and select one or 2 you like the most. As a general rule of thumb, you’ll want to go with something clean and easy to read, and one that represents the ‘feel’ of your brand.
Amanda went with ‘Avenir Next’ for the header and body text – so just one font for the whole site. She kept the default sizes, but you can play around with those and see what you like most.
Next, go to ‘Checkout’ and add your logo file from your computer so that it displays on the page where your customers are checking out.
Scroll to the bottom and change the colors to your custom brand colors. Shopify will remember the colors you recently selected, so you can just click those quickly. I recommend changing the ‘Accents’ and ‘Buttons,’ but keeping the errors red so they’re more noticeable.
Now go back to the ‘Sections’ tab and click ‘Header.’ This is the top portion of your site, including your logo and banner.
Upload your logo and play with the size.
[highlight]Shopify’s photo library will save any photo you upload, for easy access later. So since you’ve already uploaded your logo, it will be waiting for you to select with just a click.[/highlight]
For the ‘Announcement bar’ section, you’ll want to always have something here to grab the user’s attention. If you’re having a grand opening sale, I recommend adding that here.
Click the ‘Show Announcement’ box, and unclick the ‘Homepage only’ box if you want the announcement to stay on every page.
Type in your announcement into the ‘Announcement text’ box. You can even select any specific page on your site for it to link to when someone clicks the announcement banner.
For example, if you’re having a sale on one product or collection, you can link that product or collection page from the header so the visitor can go straight to it. If you offer free shipping, that makes for a great banner announcement too.
[highlight]Adding this special offer to the top banner is an element of your ‘lead funnel’ – it’s another step toward getting them to buy. The lead funnel is a series of steps that turn a visitor into a customer.[/highlight]
And if you have a company slogan/tagline, you can fill that in too.
Be sure to periodically click the ‘Save’ button at the top right – just in case.
Also, you’ll see 3 little icons at the top of the page. You can use these to see a preview of the mobile version and a full-screen version. Play with those too. It’s really important for your site to look good on mobile, so make sure all your changes look nice there too.
In most themes, the menu will be in the header. But in the ‘Simple’ theme, it’s in the sidebar.
It doesn’t really matter for my purposes of showing you how this works.
In the ‘Menu’ section, you can edit which pages visitors can click from your menu.
If you click the little ‘Edit menu’ link, you’ll be taken to the ‘Navigation’ page where you can mix-and-match the pages in your header menu the same way you did with the footer yesterday (with the policy pages).
I recommend keeping it very simple, with maybe just a few buttons: Home, Shop, and maybe Contact or About. Then under ‘Shop’, you can add a dropdown that has your main collection pages.
Of course, this is just a recommendation. You can put your collection pages in the main menu so they’re more accessible.
Now look at the sections underneath. You’ll see a bunch of different options for how you can organize the page’s content.
You can have a big ‘hero’ photo that takes up the whole top bar. You can go straight into your items. You can have a photo with text to one side of it to describe certain items or collections, with a button they can click to go to the appropriate page.
There’s a lot of fun to be had to design all this.
Take a look at the different ‘Add section’ options. You’ll see:
Explore your options and see what works best.
Here are some general recommendations:
Here’s a peek at what Amanda’s sections looked like when her homepage was done:
Now let’s look at options for your product pages, as it’s really important for these to be on point in order to get sales.
In the top dropdown I showed you earlier, click ‘Product pages’ and then click ‘Product pages’ in the side menu as well.
On this page, you’ll be able to edit how all of your product pages display. You can select:
Using this same process that we’ve covered so far, keep tweaking and building the rest of your site. Go through every page, explore your options, and play around with the settings until you like the way it looks.
[highlight]Building the frontend can feel overwhelming, especially if it’s your first time with this kind of thing. Amanda was nervous about choosing the right options, but I encouraged her that she had to start with something before she could know what’s best. Plus, I’ll guide you through how to get some valuable feedback before we launch. So don’t overthink it![/highlight]
✓ Chose your store’s theme – something clean, appealing, and easy to navigate
✓ Set up a basic lead funnel by adding an enticing offer to your banner
✓ Built out the frontend of your store for your customers to have a great shopping experience
Your store has finally come to life! Amazing.
See you back here tomorrow so we can fine tune and start preparing for your launch in a few days.