Shopify Theme Settings

Theme settings is where the global setting for the Shopify theme are specified. These include colours, fonts, favicon and social media links.  These are:

Colours

This section specifies the colours for areas of the sites such as text and buttons.  Colours can be selected from a pallet or defined using  hex code.

If you want to know the hex code for your image, you can use this tool: https://vidsbee.com/ColorPick/

Typography

This is where the fonts for the site are set.  Recommended to select system fonts as these will load quicker.

Styles

Accent colour selections for sale and sold out site badges.  The accent colour are set in the colour settings

Layout

Set the maximum width for the site.  Shopify sites are responsive so will adjust to screen size up to a maximum size.  Recommended to choose the largest size (1600px) to optimise how the site will look on bigger screens

Currency

Select whether the three letter currency code is seen after prices

e.g. £2.99 GBP or just £2.99

Search input

Select whether the site search displays suggested products (recommended).

Social media

Enter social media account for use in footer.

Favicon

A favicon is a small image that represents the site in the browser. They are 32×32 pixels. 

Quick favicon creator: https://favicon.io/

Checkout

The checkout is the same across all Shopify sites and so is edited in the theme settings and not in the sites theme.  The layout cannot be updated, but the colours and background images can be edited.

How to edit a Shopify Theme

Editing Shopify theme

Shopify themes can be edited without the need for any technical knowledge.  From the Online store option in the LHS menu, click theme and customise theme. 

Branding

Sellers should customise their theme to reflect their branding

  • Colour accents are set in theme settings and can be applied at the element level, e.g. background colour
  • The logo is defined in the header
  • Branding should be reflected in any imagery used

Editing elements

To edit a page, make a selection from the top drop-down menu.

The elements of the page can be seen in the LHS menu.  The Announcement bar, header and footer are persistant across the site, but the other elements are specific to the page.

Elements (and sub-elements within a theme) can be moved with relation to each other by selecting the dots icon or hidden by clicking the eye icon.  The editing options available for each element are shown in the RHS menu.

When you have finished editing your theme click save.

Header

The header is where the site logo and menu is set.  The menu can be selected from menus created in Online store > navigation.

How to import & export Shopify products

If you have many products to upload to your store, then it will be very time consuming to do this manually.  You can use the export and import functionality to amend products or create new listings.

Import and export functionality is available from the top RHS in the product screen

Exporting products

By exporting products, you can backup your product catalogue.  You can also see the format which Shopify requires for uploading products or amending existing products.

Importing products

Overwriting products

When importing products, you can choose to overwrite existing products (matched by handle) or skip products that already exist.  The handle is the URL path for the product

e.g. in https://soapshackuk.co.uk/products/handmade-lavender-soap-bar-100g-recycled-packaging

the handle is handmade-lavender-soap-bar-100g-recycled-packaging

Product types

There are two types of products in Shopify that require different upload file formats

  • Single products.  These are products that only come in one variation.  All the information for these products is stored in a single row.  Additional rows are only for additional images
  • Variations products.  Products that come in multiple variations e.g. colours have each variation on a different row

Product info common across all variants (e.g. title,  vendor) need only be entered in a single row.

Images

Each product image requires a separate row.  Information on adding additional images can be found here: https://help.shopify.com/en/manual/products/import-export/using-csv#add-multiple-product-images-in-a-csv-file

A full path must be provided for each image.  Images can be stored in Shopify files and then the URL copied into the file

Example valid URL:  https://cdn.shopify.com/s/files/1/0601/4304/2741/files/1000_400.jpg – includes file extension (.jpg) and the full path including https://

Invalid URL: https://soapshackuk.myshopify.com/admin/products/7104342884533  – no file type e.g. .jpg

Required fields

When creating products, there are required fields that cannot be blank and required fields that can be blank.  Missing required fields (non-blank) will cause the upload to fail.  Blank required fields will wipe the info in Shopify unless filled.

A field guide can be found here: https://help.shopify.com/en/manual/products/import-export/using-csv#csv-files

How to use Shopify Marketing Apps

If you wish to market your store using an integrated marketing app, this is managed from Marketing in the main menu.

The marketing menu is divided into three sections

  • Overview.  Summary if your marketing campaigns
  • Campaigns.  A list of your campaigns and their performance
  • Automations.  Marketing automation such as abandoned cart emails

To create a new campaign, click campaign from the top RHS.  By default, only the Shopify email marketing app is installed.  This enables users to send up to 2500 emails per month for free.

Other marketing apps include Facebook, Pinterest and Google.

Email campaigns

Shopify mail is a WYSIWYG email editor that can send email messages to your customers.

Remember that you should only send messages to users who have opted to receive marketing messages.

Subscribers

Subscriber lists are managed from the customer menu in the LHS. For a customer to appear in a subscriber list, their email subscription status must be set to ‘subscribe’.  They can do this at checkout, or the shopowner can update it later.

Email design

When setting up an email, the following fields must be completed:

  • Subscriber list.  Select the list of customers to receive the message
  • Title.  Title for the email
  • Preview.  Preview text of the email which will be seen in the customer’s email client (e.g. Gmail)
  • Email design

The design for the mail is defined in a WYSIWYG editor.  Elements can be edited and moved around on screen.

Sending an email

Emails can be sent immediately or scheduled for later.  The mail can be previewed before sending and/or a test email can be sent.

Once the email has been sent, performance can be viewed in Marketing > overview and marketing > campaigns.

Anatomy of a Shopify Storefront

A Shopify store consists of distinct elements which come together to create the Shopify store. 

Pages

A page is a content page on the site that gives more information to visitors about a business and its product or services.  For example:

  • About us
  • Contact us
  • FAQs

Shopify pages are modular.  Content elements can be added and moved around the page using a WYSIWYG editor.

Blog

A blog is a special kind of page that displays a list of posts in chronological order.  Blogs are used to publish new and other fresh content.

Category pages

Category pages display groups of products.  In Shopify, these product categories are created by specifying product groups. For example, a product group could be items from the same brand, sharing elements of a title or in a price band.

Shop owners can add elements to the category page, for example, recommended product or a description header.

Product pages

Product pages show product details and have a buy now button allowing customers to add the item to their basket.

Basket and checkout

The basket is an area list of the items which customers are collecting to buy.  From the basket, they can change quantities or remove the product.  Once they are happy to pay, they click checkout to go to the Shopify checkout

The checkout is where customers enter their payment details and complete the purchase.

Header, Footer and Navigation

Each store will have a header and a footer.  In the header will be the top navigation and links to search, customer accounts and the basket.

The footer is an area at the bottom of the page that can include links to site pages and other content types such as email signup.

 

Why use Shopify?

There are plenty of website solutions out there, so why Shopify?  In fact, why a website at all?

Why build a website

The popularity and ease of use of Amazon and other online marketplaces mean that many brands do not even bother building their own eCommerce site.  Whilst this saves money and time, there are good reasons to have your own site.

Save on fees

Marketplaces charge a commission of 10 to 15%, whereas selling on Shopify only cost the payment process fee charged by your payment provider (usually 1 to 3%)

Access other sales channels

If you sell on marketplaces, you are effectively outsourcing your marketing to them.  This saves much time and also enables you to benefit from their enormous resources.  However, there are many ways of generating sales and traffic which require your own website. These include:

  • Search engine optimisation
  • Paid search
  • Affiliate marketing
  • Email marketing

Your customers

If you sell on a marketplace, the customer is not ‘yours’.  That means you have to pay every time you make a sale to them.  With your own website, you can pay once to acquire the customer and then use marketing techniques like email to attract them back to your site.

Why Shopify

Shopify is one of the most popular eCommerce website platforms and fast becoming the industry leader. 

Cheap

Shopify starts at £30/month.

Easy to build

The Shopify website is easy to set up.  The system is hosted on Shopify’s servers and so requires not technical knowledge to set up.  The website can be built using a wide range of library themes that are simple to configure.

Easy to use

Shopify is straightforward to use.  It has an intuitive interface for managing orders and updating the website

Extendable

A leading eCommerce platform, Shopify’ functionality can be extended using hundreds to easy to install apps. For example, you can run your eBay business through Shopify using the eBay app.

Run your whole business

Using apps, you can run your whole eCommerce business through Shopify, including

  • Warehousing
  • Despatch
  • Marketplaces
  • Marketing

Take payment

Shopify has a built-in payment option – ShopPay.  ShopPay allows customers to store their information, making it easy to check out on Shopify stores.  You can also add other payment options such as PayPal and Stripe.

How to use Shopify Analytics

Shopify Analytics

Shopify has a native set of website performance reports (called Analytics) which is accessed from The LHS menu.

Shopify Analytics enables sellers to understand the behaviour of their customers and make adjustments to their store to increase sales.

Analytics has three main sections

  1. Dashboard.  Overview of your store’s performance, e.g. sales, orders, conversion rate over a specified time period.
  2. Reports.  A range of reports which give detailed information on your store’s performance
  3. Live.  Performance of the website right now (e.g. number of visitors currently on the site) or in the last 10 minutes

Analytics terminology

These basic web performance metrics make up the basic building blocks of understanding what users are doing on your website.

Sessions

A session is a period of user activity on a website. For example, a user may come to your site, browse some pages and then make a purchase. If they are inactive for 30 minutes, the session ends.

Note: that a second session will be recorded if the user returns later that day.

How to use this metric: Sessions is an excellent metric to understand how attractive your site is and how well you are doing as a marketer to attract users to your site.

Users

This is the number of visitors with at least one session on your website within a given period. If a visitor returns twice in a day, they will be recorded as one user.

How to use this metric: User number is a measure of the number of people who are visiting your to your website.  It can be used to measure the effectiveness of your marketing activities.  Broadly speaking, more users means more sales.

Pageviews

The number of pages visited on your site in each period. It is a measure of how sticky your site is, i.e. how much the content appeals to users.  More pageviews mean that users are viewing more of your site

Pages per Session

The average pages viewed during a session on your website, calculated as page views divided by sessions.

How to use this metric: More pages per session mean that users are more engaged and visiting more of your site.

Average Session Duration

The average duration of visitors’ sessions.

How to use this metric: Longer sessions indicate that are more engaged.

Bounce Rate

Bounce rate is the percentage of visits where users viewed only one page and left.

How to use this metric: A high bounce rate suggests that people leave your site because they are not finding what they are looking for. You can minimise bounce rates by ensuring that landing pages are relevant to the advertising campaigns.

Percentage of New Sessions

The percentage of new visitors to your website. A successful website will have a mix of new and returning visitors.

Conversion

A conversion (a.k.a. Goal) is the completion of a user action on a website, e.g., making a purchase. The website owner defines conversion types that they wish to track.

Dashboard

The dashboard gives an overview of the performance of your site. Some of this information is a summary of a report, and some can only be seen on the dashboard page.  Sections include:

  • Total sales. Net sales (gross sales minus discounts and returns) plus taxes and shipping. Includes orders from all sales channels
  • Online store sessions. The number of sessions on your online store. A session is a period of continuous activity from a visitor.
  • Returning customer rate. The percentage of customers that have placed more than one order from your store, out of customers that placed an order within the selected date range
  • Online store conversion rate. Percentage of sessions that resulted in orders, out of the total number of sessions.
  • Average order value. Total value of all orders- including taxes, shipping, and discounts, without subtracting the value of returns – divided by the total number of orders.
  • Online store sessions by traffic source. Number of online store sessions grouped by the type of traffic source.
  • Sales by social source. Total online store sales that came from a social referrer source.
  • Sales by traffic source. Total online store sales grouped by the type of traffic source.
  • Online store sessions by social source. Number of sessions on your online store that came from a social referrer source.
  • Top referrers by sessions. External websites from which the most sessions came to your online store.
  • Top landing pages by sessions. The top pages where visitors entered your online store and the number of sessions associated with each landing page.
  • Sales attributed to marketing. Total sales that can be attributed to traffic driven to your online store by marketing efforts.

Reports

The reports section has a large number of reports which help you to dig down in the performance of your site.  Note that not all reports are available on the basic plan.

Reports are divided into the following sections:

Acquisition

These reports show how you acquired your customers. 

  • Sessions over time
  • Sessions by referrer
  • Sessions by location

They are helpful for gauging the effectiveness of your promotional activity.

Finances

These reports give information on the performance of your business. View your store’s finances, including sales, returns, taxes and payments.

  • Finances summary.  Total sales minus refund and discounts.  Gross profit calculation
  • Total sales
  • Taxes
  • Tips
  • Payments

Behaviour

These reports show the behaviour of customers on your site. Improve your store by understanding how visitors move through your site.

  • Online store conversion over time
  • Top online store searches
  • Top online store searches with no results
  • Product recommendation conversions over time
  • Sessions by landing page
  • Sessions by device
  • Online store cart analysis (Premium report)
  • Online store speed

Marketing

The marketing reports give insights into where your online store customers are converting from.

  • Sessions attributed to marketing
  • Sales attributed to marketing (Premium report)
  • Conversion by first interaction (Premium report)
  • Conversion by last interaction (Premium report)
  • Attribution model comparison (Premium report)

Inventory

Track and understand the movement of your products for more efficient inventory management.

  • Percent of inventory sold
  • ABC analysis by product
  • Average inventory sold per day
  • Month-end inventory snapshot
  • Month-end inventory value

Live

The live board shows the performance of your site right.  This is useful if you think you have a problem with your site, or have recently made a change e.g. send out an email. Metrics displayed are:

  • Visitors right now. Number of online store sessions that were active within the last five minutes.
  • Total sales. Total sales (gross sales plus shipping, taxes, discounts, and returns) from all sales channels so far today.
  • Total sessions so far today. Total number of visitor sessions on your online store so far today.
  • Total orders.  Total number of orders from all sales channels so far today.Page views in last 10 minutes
  • Customer behaviour. Sessions within the last 10 minutes that had items in the shopping cart, reached the checkout, or completed a purchase.

There is also a globe showing where today’s customers and orders have originated.

Shopify Menus, Filters and Redirects

Navigation

Your site’s navigational elements are edited in Online store > Navigation.  Here the site’s menus (e.g. main menu, footer menu) can be configured, and new menus added.

The menus included in a site are defined in the theme. Adding new menus requires changing the theme’s code.

Creating your navigation

Your navigation is a vital part of your site, and you should construct it to enable customers to find your product quickly.  One possible structure would be:

  • Product categories.  Divide your products up into logical categories.  This is done by placing the products into collections
  • Brands.  Categorise your products by brands
  • Info pages.  Have these in a separate menu item

Menus

A menu is a navigational item that contains multiple elements from the site.  These can be

  • Site homepage
  • Search
  • Product collections
  • Individual products
  • Pages
  • Blogs
  • Blog posts
  • Policies

Items are added to the menu and then can be repositioned using a drag and drop system.  Nesting items creates a menu hierarchy.

Filters

Collection and searches can be filtered using several user-defined filters.  These are either:

  • Availability
  • Price
  • Product type
  • Brand (Vendor)
  • Product options

Product options are the variant options defined at the product level (e.g. size, colour etc)

Search Engine Optimisation

When creating titles, remember then they are used by Google and other search engines to categorise the content of the page.  Choose navigation titles that represent the content on the destination page.  Research the most appropriate keywords to use for your titles using keyword research tools such as Google trends.

See our video on Basic SEO for Shopify.

Re-Directs

If you remove a page from your site or a navigation item, it is best practice to create a redirect.  If you do not create redirect:

  • This will negatively impact your search engine performance
  • External links to this page will be broken

Re-directs are managed from a link in the top RHS of the navigation page.

Adding a Page to Shopify

Adding pages to your Shopify store, e.g. About us and contact us, will provide the customer with more information about your company, reassuring them that you are a reputable business. 

Typical pages to add

Most online stores will have as a minimum:

  • Contact us.  Adding contact details will reassure customers and allow them to contact you if with questions
  • About us.  Giving some information about your business will help differentiate you from the competition

Creating Pages

Pages can be added or amended from Online Store > Pages.  Each page will have

  • Title.  Make this a meaningful title that includes relevant keywords
  • Blog content.  Text as well as media
  • Theme.  The layout of each blog page is determined by a theme.  Themes can be added or amended in Online storefront > Themes

When creating a page, you can duplicate and amend an existing page to save time.

Search engine preview

Shopify shows a search engine preview (i.e. how pages will appear on search engines).  This includes

  • Title.  This is the <title> tag for the page
  • Description.  This is the meta description
  • URL

These will be set by default to the page title and an excerpt of the description but can be optimised if desired.

How to create a Blog on Shopify

A blog is a great way to publish news and communicate with customers.  They also allow fresh content to be created that gets picked up by search engines.

Creating a blog

Multiple blogs can be created by visiting Online store >  Blog posts and clicking ‘Manage Blogs’. 

A blog’s layout is based on a template.  By default, the blog will use the default Blog template.  Creating new templates requires editing the site code.

Adding a post

Posts can be added from Online store >  Blog posts.  A post has the following elements

  • Title.  Make this a meaningful title that includes relevant keywords
  • Blog content.  Text as well as media
  • Excerpt.  A summary of the post which is shown on the blog homepage in the ‘Blogroll’
  • Featured image.  This will appear at the top of the blog post
  • Theme.  The layout of each blog post is determined by a theme.  See not above

Answering Comments

Hopefully, your blog will be popular and gets lots of comments.  Comments can be managed by visiting Online store >  Blog posts and clicking ‘Manage Comments’.

Comments can be disabled or allowed at the blog level.

Search engine preview

Shopify shows a search engine preview (i.e. how pages will appear on search engines) at both the blog and the individual posts level.  This includes

  • Title.  This is the <title> tag for the page
  • Description.  This is the meta description
  • URL

These will be set by default to the post title and excerpt but can be optimised if desired.