Choosing a theme

The theme store has pages and pages of themes — some free and some paid. Menus at the top of the theme store allow you to browse themes in a variety of ways, including searching by what’s trending, what themes are suited to large or small inventories, or even what themes work well with video and 3D. You can also browse by industry — for example, Toys & Games. As you browse through the available options, you can start to envisage what your store may look like.

On the left-hand side of the theme store, there’s also a sidebar that allows you to filter your search based on a variety of options, including paid and free themes, product page style, and homepage style. You can also use the search bar in the top-right corner to search for things that you consider to be must-haves for your store — for example, ‘product zoom’, so customers can zoom in on the details of your products — and the results will show you themes that include your requirements (in this case, all the themes with product zoom features will show up).

When you click into a theme, as well as being able to read about all the features and technical specs of the theme, you can check the look and feel of the site by using the demo feature — just click on ‘View Demo’ and you’ll be taken to a demo site that uses the selected theme. Have a good look around all the pages and try the various features before you select that theme for your store.

Don’t skip the reviews when you’re selecting a theme — it may save you time and help you pick the most suitable theme for you. If you’re just starting out, you probably want something that has an easy set-up and simple integration, so check for feedback around ease of use.

Eureka! You’ve found your theme

Many of the themes look great, but I’m sure it will feel extra special when you find ‘the one’. When you’ve found your theme, you can add it very simply to your store by clicking on ‘Add Theme’, which adds your theme to the Themes page of your Shopify admin panel.

If you’re not quite sold on a certain paid theme, you can click ‘Try Theme’ and you’ll be able to preview the theme in your store. You can make modifications if needed and then decide to buy it if you like it. You can preview up to 19 paid themes, so you have several opportunities to make the right choice.

You can store themes in your theme library (which is located in your Shopify admin) and switch between them as you please. If you manually customize a theme, it will appear as a new theme, with the original version of the theme also showing in your theme library.

Changing themes doesn’t impact your inventory or content, as that’s stored in your admin — however, you will lose the styling that the theme provides, including the colors and fonts, if you decide to change themes.

If you want to show a few people your theme to get feedback (and it is a great idea to get feedback when you can), follow these steps:

1. From your Shopify admin panel, go to Online Store (located below Sales Channels in your left-side menu) and click on Themes.

   The theme library appears. The theme that you want to share to gather feedback is the one you have currently installed on your site, so you see this theme listed at the top of the Themes page, under Current Theme.

2. For the theme that you want to share, click on Actions and then select View.

   When you select View, you’ll be taken to a preview of your website.

3. Copy and paste the URL link to the website preview page from your browser. Send the link to friends and family to gauge their opinion.

Publishing your theme

While you can have up to 20 themes in your admin, only one can be published at any given time. Your published theme is what your customers see (and it’s also labelled as your ‘Live Theme’ in your Shopify admin panel), while your unpublished themes remain in your theme library.

To publish one of your chosen themes, therefore making it your Live Theme:

1. From your Shopify admin panel, go to Online Store (located below Sales Channels in your left-side menu) and click on Themes.

   The theme library for your site appears, which is a selection of themes that you have added to your store while exploring your theme options.

   The Live Theme is the one you’re currently working on and will always be the theme at the top of your Themes page.

2. Click on Actions next to the theme that you want to become your Live Theme, and then click on Publish.

   The Publish window opens.

3. In the Publish window, click on Publish.

Don’t forget to make a back-up copy of your theme. It’s good to have in case something goes wrong as you start getting further into customizing your theme — this way, you’ll always have a theme to fall back on. You can back up your theme by clicking on ‘Themes’ then ‘Actions’, and then clicking on ‘Duplicate’.

Your theme is only licensed to the store you bought it for — if you need to transfer a theme to a new store, you need to contact Shopify’s support.

Customizing your theme

The theme you choose gives you the skeleton of the look and feel of your online store, but it’s up to you to bring it to life in a way that suits your brand’s identity.

Shopify offers a lot of flexibility when it comes to customizing your theme. To illustrate, it’s possible for two businesses to use the same theme but have websites that look completely different — so much so that a customer wouldn’t be able to identify that they shared the same theme.

To customize your theme, click the ‘Customize’ button in the Themes section of your Shopify admin panel (the ‘Customize’ button is next to the ‘Actions’ button). The structure of a homepage is then in front of you, with spaces to drop images and text. A new sidebar appears to the left, and a drop-down menu appears at the top of the page, which indicates which page of your website you’re currently editing.

I take you through customizing your website as I introduce each part of your website’s functionality throughout this book.

What’s on the menu?

The menu of an online store is part of its navigation (or nav). It’s the section of a website that displays the categories and sub-categories of items that the online store is selling. The menu is usually located in the top-left corner of an online store’s homepage.

An online store’s homepage looks different depending on what device you’re viewing it on; however, if it has been mobile optimized, it almost always shows the menu at the top.

Menus in desktop view tend to run from left to right across the top of the site, calling out the main categories (or pages) of the site — for example, Men, Women, Kids and Sale for a clothing website. Often, more options appear when you click on these sections — for example, clicking on Men may lead you to different types of men’s clothing, such as jeans and t-shirts (this is known as a drop-down menu — where additional sub-categories of the main category, in this case men’s clothing, appear to further direct the customer to the area they are interested in). When your cursor (the little arrow that moves around the screen on your desktop, directed by your mouse) leaves that part of the menu, the men’s jeans and t-shirts (and so on) disappear — so the drop-down menu appears when you click on the main menu item and then disappears when you leave it.

An expansion on the drop-down menu is a flyout menu — a list of additional options that appears to the side of each option (or some options) on the drop-down menu. Going back to men’s jeans, if you click on ‘Men’ and then ‘Jeans’, a sub-menu may appear to the side to show the different types of jeans you have for sale, such as casual jeans and dressy jeans. If you click on ‘Casual Jeans’, you may even see an additional flyout menu at the side that provides different size options. It may seem like overkill, but the idea is to guide your customer closer to the product that they want to buy.

You have more options than drop-down menus and flyout menus, however, when you are building your online store. Here are a few of the other menu styles that you may like to try:

• Accordion menus are similar to drop-down menus in that the menu links drop down vertically, but when you click on the menu item, another set of menu items appear below it. To close the second set of menu items, simply click on the first menu item again.
• Dropline menus appear when you hover your cursor over a main menu category (such as Men on a clothing website). Instead of a drop-down menu of options, the sub-categories appear below, running from left to right across the screen and forming a horizontal sub-menu under the main menu.
• Mega menus are drop-down menus that use text plus visual content, such as imagery of the items in the menu — for example, if you’re browsing the menu of an electronics store online and you click on laptops, a mega menu shows you the names of the laptops, plus accompanying images of the laptops. Mega menus work well when you have a large range of categories; for example, large electronics retailers who need big, bulky menus to help customers navigate multiple departments, categories and sub-categories within their online store.
• Split menus are when a menu and a sub-menu appear on different locations on the homepage; for example, if you click on ‘Men’ on the top menu (the main menu), different men’s clothing categories may appear on the left-hand side of the website, such as jeans, shirts, shorts, and so on.

A fun fact — when you are viewing websites on a smartphone or tablet, they often have three horizontal lines to represent the menu, which is called a hamburger menu (see Figure 4-1) because apparently the icon looks like a hamburger!

Later in this chapter, in the section ‘Adding Menus and Pages’, I show you how to create pages (such as About Us and Shipping) and menus within Shopify, and in Chapter 5, I show you how to create collections (another name for categories) and place them inside your menu.

Styling your homepage

Your homepage can vary in length and content. Some online stores like you to scroll and scroll and scroll, jamming as much content as they can onto that one page, whereas others simply have a homepage banner with a call to action (like ‘Shop Now’) and a menu, from which customers can navigate to other pages.

The homepage banner is really important, as is any content that is above the fold of a homepage. Above the fold is a term taken from print media. If you picture a folded newspaper, the content above the fold in the paper is on the upper half of the front page, where a key headline or image is placed. In ecommerce, above the fold is the content you see before you need to scroll. When you begin to scroll, the content below the fold appears. Online shoppers can be a fickle bunch, and even the act of scrolling can be too much effort, so typically you want to grab a visitor’s attention as quickly as you can by including priority content above the fold, without giving your site visitors any cause to abandon the page (or bounce)!

Content below the fold is typically reserved for more banners, smaller in size than the main homepage banner, that advertise secondary offers or products. I like to use this web page real estate for talking about the history of the brand or showing photos of the team, in a sort of ‘get to know us’ kind of way — remember, building trust is important, and authenticity is difficult to replace.

Another useful piece of below the fold content is what is known as social proof. Without going into the science of social proof in marketing, it’s essentially convincing people that buying your product is the right thing to do — perhaps because other people the customer looks up to are doing it. Social proof is not a means of underestimating a customer’s intelligence, it’s simply helping to convince them that they can trust your store, and should buy from you, if they are so inclined — more of a gentle push, if you will.

You can make changes to style and personalize your homepage to fit with your brand through the theme customization areas of your Shopify admin.

To access the theme customization area, follow these steps:

1. From your Shopify admin panel, go to Online Store (located below Sales Channels in your left-side menu) and click on Themes.

   The Themes page appears (see Figure 4-2).

2. Click on the green Customize button, which appears on the Themes page — you can find it over on the right-hand side of your screen, next to Actions.

   You’ll then be taken to what is beginning to look like a website — at least in its basic form. It’s here you’ll be able to make changes to the design of your website using the theme customization menu on the left-hand side (see Figure 4-3) and preview your changes as you go.

   Stay in the Customize section as you work through customizing your homepage in the following sections, as I show you how to make changes to your online store’s look and feel here.

From time to time you may see options to Explore Free Images appear. If you click on this, it brings up a free library of images provided by Shopify that you can add to your store, which saves you time and money on paying for your own photo shoots.

After you start customizing your theme, you can view the skeleton of your first Shopify homepage by selecting View Your Store, in the top-right corner of the Themes section in your Shopify admin — see Figure 4-4.

Don’t forget to save your changes!

As you work your way through the theme customization menu options (see Figure 4-3), you’ll see your homepage broken into sections, starting with Header.

The following sections take you through customizing your homepage using Shopify’s default Debut theme. If you have chosen a different theme, there may be some differences in the layout or sequence of options below; however, the principles remain the same. To deepen your understanding of how Shopify works, you may find it helpful to use the Debut theme while you get to know your customization options — you can always change your theme later.

Customizing the header

The header is the bar at the top of your website that runs horizontally across each page. It usually contains your menu, the name of your business (often as a logo) and a search bar. Your logo should be large and clear, and it is typically positioned in the top-left corner of the homepage.

The main function of a website’s header is to house your menu. Your menu is how a customer finds their way to your products and the other pages of your site, such as your shipping information. I’m going to talk about configuring your menus to house pages like About Us and Shipping later in this chapter (in the section ‘Adding Menus and Pages’). I also return to building your menu in Chapter 5, when I show you how to create collections and position them in your menus.

To edit your header, click on — you guessed it — Header in the theme customization menu (see Figure 4-3).

You can upload your logo right away by clicking on Select Image (under Logo Image) in the Header section of the theme customization menu (see Figure 4-5). If you don’t already have a logo, you have the option to choose one from Shopify’s library of free images — although you probably want to design your own logo. You can also change the dimensions of your logo by dragging the Custom Logo Width bar (see Figure 4-5) from left to right, and change the alignment of your logo by selecting either Left or Centered for your Logo Alignment (as you tailor your logo image, the changes take effect in an updating preview that is constantly visible).

Canva.com is a great resource for creating a new logo, plus other useful pieces of creative elements you can use on your website, such as social media material, infographics and GIFs.

The other part of the header you can change in this section is what’s known as the announcement bar, which is the strip of text at the top of the homepage. You can edit the text and link it to anywhere you like; you can also change the background color or leave it as text only. The announcement bar settings are found halfway down the Header section of your menu — simply type over the text that says Announce Something Here (see Figure 4-5).

I tend to use the announcement bar to highlight free shipping messaging or to promote a sale. I generally also leave such announcements on all pages of the website (as opposed to selecting Home Page Only, in the announcement bar settings — see Figure 4-5) as this ensures your key promotions or free shipping offers are visible on every page of your website.

Building the homepage banner

As you move through the theme customization menu, the next item down is called Image with Text Overlay. This option allows you to create and edit your website’s homepage banner, which is usually the first banner a visitor to your website sees when they arrive at your online store.

When you click on Image with Text Overlay, you see a placeholder image that Shopify uses for all new stores — a grey box with shapes on it. You can replace this grey box with your own homepage banner image. A new set of menu options also appears on the left-hand side of the page (see Figure 4-6).

Here’s a rundown of the changes you can make to your homepage banner with each of these menu options:

• Image — Select Image: Clicking on this option allows you to upload your own homepage banner, or you can choose one of the images in Shopify’s free image library.

• Image Alignment: Choose from Top, Middle or Bottom, and watch your image move in the preview on the right-hand side of the page to help you decide the position that works best. The Image Alignment feature changes which part of the image you want to display — for example, selecting Middle shows the majority of the homepage banner, while selecting Top only shows the top of the image you have uploaded.

  Play around with all three and see which looks best — it’s likely Middle is where you’ll land.

• Layout: Here you can choose between Full Width and Fixed Width. Full Width occupies a larger horizontal space on your homepage, while Fixed Width shows space on either side of the banner. Again, the banner preview moves as you try out both options, so you can make an informed choice between the two.
• Section Height: As with the Layout options, you can change the vertical size of the banner, with six different height options available: Adapt to Image (which adjusts according to your image size), Extra Small, Small, Medium, Large and Extra Large.
• Text Size: Use this option to change the size of your overlying Heading text from Large to Medium (see the next item in this list).
• Heading: Choose this option to add a Heading to your homepage banner — the text appears over the top of the homepage banner image. An example of a heading might be your store’s name or the name of a product range, such as Summer Collection.
• Text: The next section down allows you to add another text section, which is smaller-sized text that appears under your Heading. You can use this for a call to action, such as Sale Now On or Limited Edition. You can add a link from this text section to any page on your website (or an external website) and you can change the font to bold or italic (the text default is regular, not bold or italic).
• Button Label: This option allows you to create a button on your homepage banner, such as a Shop Now button. Simply type in the text you’d like to see on your button.

• Button Link: A button isn’t much use unless it takes the customer to another point on your website; fortunately, this option allows you to add a link to the page you want to send the customer to when they click on the button. You can put a link in here (such as www.something.com), so that when a shopper clicks the button you just created, it will take them to a particular page. For example, if your banner is advertising a new range of scooters (with the heading New Scooters), you can add a button that says Shop Scooters, which you can link to your scooter collection.

  When you click on the Button Link field, a list of all your website’s available pages and collections appears, so you can choose which page you want to link your button to.

Don’t forget to click the green Save button in the top-right corner, and then click the left-facing arrow button in the top-left corner to go back to the main theme menu, if you want to continue designing the rest of your homepage.

When you return to the theme customization menu, you may notice that the Image with Text Overlay menu option has changed to the name of the Heading for your homepage banner, such as New Scooters.

If you’re designing your own homepage banner or using a graphic designer, the dimensions of a typical homepage banner in Shopify are 1200 x 400–600 pixels.

Making a feature of your key collections

Collections (or categories) group together products with similar properties, such as men’s clothes, children’s toys, dog treats, women’s shoes — you get the picture! By grouping similar items together, your customers can browse through the categories of interest to them, without wading through pages of items they don’t want.

The theme customization menu gives you the option to feature a collection on your homepage. To use this feature, you need to have created at least one collection in your store, and then added some products to that collection in order to preview them on your homepage. (In Chapter 5, I show you how to create a collection and add products to your store.)

When you click on the Featured Collections option, you can edit the name of the collection to whatever you want, for example Men’s Jeans or What’s New.

In the space beneath the collection name heading, you have the option to Select Collection — when you click on this, a list of all the collections you have created in your store appears, and you can click on one to display its products on your homepage.

You can change the number of products per rows, and the number of rows overall that you want to show on your homepage — see Figure 4-7.

Adjusting your theme’s settings

While in the theme customization menu, you’ll see down the bottom of the menu, another section titled Theme Settings. Go ahead and click on that, and you’ll be able to continue editing and styling some of the other features and functions of your homepage that may also impact other parts of your online store, such as your font styles and colors (see Figure 4-8).

You can use the following items in the Theme Settings menu to adjust your theme further:

• Colors: This section allows you to change the colors across your website, from the color of the text your site uses to the color of the buttons on your site — and everything in between. You can also change background and border colors.

  As with many of the customization options in Shopify, you can visualize your changes using the live preview feature to the right of the page as you experiment with different colors.

• Typography: Clicking into this section allows you to change the font your store uses and the size of the text across your headings, on your buttons, and across your website.

• Search: This section refers to the search bar, which customers use to search for certain products or pages in your website.

  You’ll be presented with the option to Enable Product Suggestions, which is ticked by default. Leaving this ticked is useful, as it predicts the products customers may be searching for as they begin their search. For example, if your visitor starts typing Jeans in the search bar, any Jeans in your store may begin to appear below the search bar, to help the customer find what they’re looking for.

• Social Media: You can add social media icons to the footer on your homepage. In this section you can set up links on your store that connect social media icons to your social media pages for Twitter, Facebook, Pinterest, Instagram, Tumblr, Snapchat, YouTube and Vimeo.

• Favicon: Although it sounds like a creature out of Star Wars, a favicon is a nice little badge for your store to have. It’s that tiny icon or logo that appears as you search for a website. For example, if you type www.shopify.com into your browser, the green ‘S’ logo — Shopify’s favicon — appears as you type. This lets you know you’re on their official site, which helps build trust and brand identity.

  In this section of the menu, you can upload your own favicon — the recommended dimensions are 32 x 32 pixels, so you may need to adjust your logo to something even smaller than it usually appears.

• Add to Cart Notification: You only have one option when you click on this, and the default position on the Debut theme is to notify customers when an ‘add to cart’ has occurred. It’s just a nice way to let a customer know that they have successfully added something to their cart, rather than having them check their cart to see if the item was added.

  I recommend keeping with the default setting and leaving this ticked.

• Theme Style: When you click on this option in the menu, you see that the Debut theme has two styles, Default and Light, which change the overall color scheme of your site, basically giving you two different looks within the one theme. Try both to see which you prefer.

  You won’t be able to click on this until your changes so far have been saved, which is a timely reminder to do so!

Creating a page

To create a page:

1. Navigate to your main Shopify admin menu (not the themes customization menu, where you have spent much of your time in this chapter!).

2. Click on Sales Channels → Online Store. Select Pages from the list of headings that appears.

   You’ll be taken to a new page, that is aptly titled Pages. It’s here that you’ll create … you guessed it, pages!

3. Click on Add Page.

   A new page appears asking for some input into what sort of page you’re creating (see Figure 4-9).

4. Give the page a title — for example, About Us.

   

5. Enter your About Us content into the text box below the title field.

   A good About Us page lets the shopper into your brand and is authentic and genuine. In your early days, it’s important to remember that a potential customer has no idea who you are, so before they part with their money, they often want to know who the people behind the brand are. A lot of brands have fun team photos or videos here — and don’t forget to show the office dog!

   The About Us page is a great opportunity to showcase your brand’s fabric, or innate qualities. Are you humorous, cheeky, serious, safe and trustworthy, or technically the best? Here’s your chance to convey that!

   You can easily add images and videos in the text box — just click on the icons that represent the feature you want to add and upload your images and video.

   You may also see a space for SEO (search engine optimization), but perhaps leave that for now — I look at SEO in Chapter 16.

6. In the top-right corner, you have the option to hide the page or make it visible, or even set a date you want it to become visible (click on the link that says Set Visibility Date — see Figure 4-9). When you are happy with the content, hit Save in the bottom-right corner.

Creating a menu item

To create a menu item:

1. Navigate to your main Shopify admin menu. Click on Sales Channels → Online Store. Select Navigation from the list of headings that appears.

   The Navigation page appears, showing you two default menus — Main Menu and Footer Menu. The About Us page you created in the preceding section belongs on the Footer Menu, which is where the About Us page you just created will live.

2. Click on Footer Menu.

   A new page called Footer Menu comes up (which you can rename, but there’s no real need to do that).

3. On the Footer Menu page, under Menu Items, click on Add Menu Item.

   A dialogue box called Add Menu Item appears.

4. Name the menu item by typing the name of the item in this box — for this example, you would type About Us.

5. In the Link field that follows the Name box, click on Pages from the drop-down menu that appears.

   A list of pages that you have created appears — if you have only created the About Us page so far, this will be the only one that appears.

6. Click on the page that you want to add to your menu — in this case, the About Us page.

   The About Us page title appears in the link field.

7. Click on the green Add button at the bottom of the Add Menu Item dialogue box.

8. Click Save Menu in the bottom-right corner.

   You’ve just created your first menu item — an About Us page in your Footer menu!

If you want to preview what it looks like live, then click on the eyeball icon next to Sales Channels in the main menu, which directs you to a fully functioning preview of how your site looks and works.

Repeat the page and menu item creation process for each page you’d like to add to your store (such as About Us, Shipping, Returns Policy and any other pages you want to add to your store). Chapter 5 goes into the detail of adding product pages and linking your products to collections.