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:
Choose a theme for your store
Use Shopify’s builder to customize the store with your own branding
Organize the store to create a simple and streamlined shopping experience for your users
Set up a basic sales funnel to entice and engage your customers
There are a bunch of Shopify 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.
Amanda Asks
"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.
Customize your theme
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:
Homepage
Product pages
Collection pages
Collections list page
Blog page and blog posts
Cart page
404 error page
Custom pages you’ve created, like policy pages, etc.
Add your branding elements
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.
Homepage header
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.
Main menu
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.
Homepage body
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:
Blog
Blog posts: To feature image thumbnails and text snippets from your blog posts. Obviously, you don’t need this for this 21-day period.
Collection
Collection list: A section that lists your collections. You can choose the number of collections per row, etc.
Featured collection: The products inside a collection highlighted in one section. Amanda chose to do this with all 4 of her collections on her homepage.
Image
Featured banner: A large photo that spans the width of the page. You can choose how tall it displays.
Image with text: Half photo, half description. You can also add a button leading the visitor somewhere. In between her collections, Amanda featured a nice image and a little description of the collection displayed right above it.
Slideshow: Several photos in a slideshow, that play through automatically as well as visitors clicking through themselves.
Product
Featured product: Just one product, highlighting its product details like price and description.
Promotional
Newsletter: A field for users to enter their email. I absolutely recommend having this on your homepage. Every page, really. Email lists are important.
Store information
Map: You don’t need this as you’re dropshipping.
Text
Rich text: Just a section of text. Good for if you want to talk about your brand without any images. I recommend using images where possible though.
Video
Video: Self-explanatory, eh?
Advanced layout
Custom HTML: Don’t even bother with this.
Explore your options and see what works best.
Here are some general recommendations:
Put at least one product ‘above the fold’ so that visitors can see something right off the bat.
I prefer displaying a featured collection right at the top, with more aesthetic, brand-building photos underneath.
If you describe a product or collection, always put a button like ‘Shop now’ that leads them directly to that page.
Write awesome descriptions. Tap into the brand-building that we discussed earlier and really entice your visitors.
Use good photos. Nobody wants to buy items with crappy photos, because it makes the products themselves seem crappy too (shocker).
Put a lot of products on the homepage. I like to have a super long homepage with basically all my store’s items featured on it. Nothing’s hidden that way.
Here’s a peek at what Amanda’s sections looked like when her homepage was done:
Product pages
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:
A quantity selector for them to order more than one if they want
Showing the product vendor (don’t select this box – it will just show your store’s name)
Sharing options on social media
Which side of the page your images and descriptions go on
A tab that shows another page, like your shipping page for example
Any zoom options so customers can look at the photos closer
Remaining pages
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.
