Shopify

The Complete Guide to Shopify Theme Customization

Shopify has grown to become one of the most popular eCommerce platforms, primarily thanks to its versatility and ease of use.

But easy-to-use doesn't mean easy-to-sell.

Make no mistake, regardless of what you’re selling eCommerce is competitive. As more consumers move to online shopping that competition will only increase.

By 2020 the number of global digital buyer is expected to hit 2 billion. With an estimated global population of 7.7 billion that’s just over 25% of the world’s population. By the end of 2019, eCommerce sales will account for nearly 14% of retail sales worldwide.

It’s amazing how quickly online shopping has grown, with just 1.3 billion online consumers in 2014.

You’ll need to flex your creativity and business savvy to stay competitive. Thankfully, Shopify theme customization gives you the ability to be fast as well as original.

In this article we’ll review the basics of Shopify theme customization so you can put your brand front and center, make products and content more eye-catching, and create a visually-rich experience that keeps customers engaged.

Start With Your Theme

When you setup your first Shopify store, you’ll have a default theme loaded already. The “Debut” theme is designed to get you up and running with little to no customization needed.

It’s a simple, effective theme that is ready to go out-of-the box. All you need to do is load your products, personalize the administration information for your store, customize your content, and you’re good to launch.

But a basic store isn’t going to help you stand out.

While you can customize Shopify’s default theme to fit your needs, you should review the themes available to see if there’s a better fit for your store.

There are a few reliable resources you can use to locate quality themes.

Checkout Shopify’s Theme Store

Shopify’s Theme Store has a collection of free and premium themes vetted by the team to ensure proper function and compatibility.

While personalization is fairly straightforward with Shopify, theme customization is made a lot easier when you start with a theme that more closely matches the original vision for your business.

You can access the theme store from your Shopify dashboard. Navigate to the Themes section and choose either Explore Free Themes or Visit Theme Store.

Shopify theme customization starts with a free or premium theme

Shopify filters and categorizes the displayed themes to make it easier to find the right one. You can search through available themes based on:

  • The size of your inventory (large or small)
  • Industry specific themes
  • Minimalist theme designs
  • Large photography emphasis
  • Layout types (like grid or column layout stores)

Choosing a prebuilt premium theme can make Shopify theme customization. Shaving hours off the time it takes to customize your store lets you put that time into more important functions – like planning launch campaigns or editing your eCommerce emails.

Look at 3rd party sites and developers

Don’t fret if you don’t spot a theme that speaks to you in the Shopify Theme Store. A number of 3rd party sites offer themes designed specifically for Shopify users.

Sites like Theme Forest feature Shopify themes created by 3rd party developers. In marketplaces like these, themes are generally peer reviewed so you can sort based on popularity and rating.

finding custom shopify themes on marketplaces like theme forest

And just like the themes available in Shopify, any theme can be customized once you acquire it and load it into your store.

Lastly, if you really want a completely custom theme for your Shopify store you can always work with a developer. Shopify has a growing network of trusted partners who specialize in theme customization. Keep in mind this approach will be far more costly than customizing an existing theme.

Check out the Shopify Experts directory for more information.

Selecting Your Theme in Shopify

If you purchase or add a theme from the Shopify Theme store, you’ll find that theme in your Theme Library within your Shopify dashboard. It will be immediately available for customization.

However, if you purchase a theme from another developer or through another marketplace, you’ll need to upload the theme before you can customize or active it.

To upload your theme, navigate to the Themes window in your dashboard. Under the Theme Library click on “Upload Theme”.

uploading a theme for Shopify theme customization step 1

You’ll be prompted to choose the .zip file associated with your theme. Once selected and uploaded, the theme will appear in your theme library.

uploading a theme for Shopify theme customization step 2

The Basics of Shopify Theme Customization

Once you’ve selected your theme it’s time to customize it and make it your own.

Under the Themes segment of your dashboard, Shopify will show you the current theme applied along with a preview of what your theme looks like.

shopify theme customization dashboard example

You can use the blue “Customize” button when you’re ready to start customizing your Shopify theme.

Theme customization in Shopify is divided into two approaches: overall theme settings and template customization.

Template customization

At the top of the Shopify theme customization window you’ll find a drop down for choosing a page template. This allows you to change customize individual page templates that are used throughout your store.

choosing a page template for shopify theme customization

The preview will change to show whatever template you currently have selected.

The Sections tab displays the individual sections, or content modules, that are currently used by the selected page template. These vary from page to page, and some have more sections than others.

editing sections for shopify theme customization

Before moving on it’s important to note that you’re choosing templates in the dropdown menu, not individual pages. Any customizations you make to the theme’s template will show in all pages that use that template.

Shopify Theme Customization – Customizing Sections

Customizing the page header

The Header section provides a number of options you can customize to change the way the header appears across your site.

This includes your logo and the way it displays as well as your top navigation.

Updates you make to the header will display consistently, no matter what page your visitors are on.

shopify theme customization starting with the header

For example, if you’re editing the Home Page template and you change the menu under Header, it would also change the menu shown in other page templates.

Customizing the footer

Like the header, any customizations you make to the footer will display sitewide. The options you’re able to customization will depend on how your theme is coded.

In the Debut theme, for example, you can customize which quicklinks are displayed, edit content about your store, and adjust the newsletter optin within the footer.

editing the footer to customize the theme in shopify

You can also add content to expand what’s included in your footer.

Editing individual sections

You can customize each section in the currently selected page template by clicking on that section. When you click into a section the preview will scroll to display the section currently being edited.

The options will vary depending on the section you choose.

For example, if editing the Image with Text Overlay you’ll have options to adjust image alignment, layout, text size, the actual text displayed, and more.

shopify theme customization example editing sections for home page 1

The Featured Collection section, however, features different options to adjust how the product collections in your store are displayed to visitors.

shopify theme customization editing sections collections page example

Adding a section

Want to add some more content to a page template? The “add section” button lets you expand what is shown in the template. After clicking, you’ll see a list of all the available content modules that can be added to the current template.

Clicking into any of the available sections will add that section into the preview to give you an idea of what it might look like.

If you’re satisfied, just click the blue “Add” button to add that section to your current template.

how to add a section with customizing shopify theme

Moving a section

Shopify will automatically order the sections as you add them, with new sections being tacked on to the bottom of the list.

You can customize the order of sections by clicking the group of 6 dots on the right side of each section. The cursor will change to an open “grab” hand when you hover over it.

example how to reorder sections when customizing shopify theme

Click there and hold the mouse button as your drag the section until it’s in the order you want. As you reorder the sections you’ll see the view change in the preview window to show you what the new placement looks like.

Limitations with adding sections

While Shopify theme customization is simple and straightforward, there are some limitations with adding sections.

Mainly, when you’re working the theme customization dashboard you can only add and modify sections that are coded to be available for that specific template. Some templated don’t allow you to add other sections.

For example, in the Debut theme, if you edit the Collections pages template you’ll find only the option to edit the Collection section. There’s no option to add new sections.

shopify-theme-customization-collection-section-1024x581

If you want to add other content/sections to the template pages, you’ll need to get familiar with Shopify’s code, Liquid, and edit the template file code to include those other section types.

Shogun makes Shopify Theme Customization a Breeze

While the Shopify dashboard has its limitations when it comes to theme customization, you don’t need to run out and learn how to code in Liquid just to get your theme the way you like it.

Coding a Shopify theme from scratch is not an easy task.

The Shogun app is a great extension to the basic theme customization and gives you far more control over the way your theme and pages are displayed.

Specifically, it addresses the issue of being limited to the sections available within a coded template, and not being able to add new sections to certain template files.

Rather than tamper with the code, Shogun lets you export your current template files into its dashboard. From there, you can use the drag and drop editor to easily add, remove, and modify sections on the fly.

drag and drop shopify theme customization with shogun

Once you’re finished, replace the template files in your Shopify store with the sync’d Shogun dashboard and you’ve got a cleanly customized theme that fits your creative vision.

Create better landing pages on the fly

Not only will Shogun make it easier to customize your Shopify theme, you can make limitless customized landing pages for your store as well even if you don’t have templates.

Within Shopify, you can easily create new pages for your store but those pages are extremely bland. There’s no freedom to easily add different types of store content without a premade template. And without knowledge of Liquid, or a tool like Shogun, it’s not at all easy to create templates.

Thankfully, Shogun also can be used to create individual pages using the same drag and drop interface, with all the store elements you need to make those landing pages more engaging.

Customizing the Shopify Theme Settings

Shopify theme customization allows you to further control the style of your store under the Theme Settings tab, next to the Sections tab. There are a number of options available to adjust your stores visual style.

changing theme settings with customizing shopify theme

Colors

The Colors options will allow you to change the way text, buttons, and form fields are displayed in your store. This is a great way to create more contrast for buttons in order to make them stand out.

changing colors to customize shopify theme

Typography

The Typography options control the way text looks throughout your store. This includes the font used, font weight, and font scale for headings and the base body text.

changing typography to customize shopify theme

Social Media

The inclusion of social media is important for supporting natural word of mouth marketing. Including social icons makes it easy for happy customers to share details about your brand or your products.

These options let you decide which social share buttons to include on your site with fields to customize the links for each of your social channels.

Favicon

Your Favicon is the small image that appears in association with your URL. Browsers display this either next to the URL or within the tab in your browser for the site. This option lets you upload the favicon for your store and automatically scales it to the appropriate size (32x32px)

If you don’t have a favicon for your online store, Shopify offers free images you can use. You can also find a number of conversion tools online that can help you turn your current logo into a favicon easily.

Checkout

Your store’s checkout gets a section all to itself. Since this is such a critical conversion point, you have some more direct control over this specific part of the shopping experience. Once you click into the Checkout section you’ll find a number of options including:

  • Adjusting colors for accents and buttons as well as errors
  • Adjusting checkout specific typography
  • Background images for the checkout
  • Logo placement for the checkout
  • Order summary images and more

Shopify Theme Customization is Easy With the Right Tools

Shopify simplifies much of the process of theme customization, but despite its ease of use there are a number of limitations. The best way to stand out in a crowded market is to create a visually stunning and engaging shopping experience. You can ensure your store beats out others in your vertical by following the steps above to customize your store.

To take full control over your brand’s presence, be sure to work with a tool like Shogun. Our drag and drop editor removes obstacles and makes Shopify theme customization as well as landing page creation a breeze.

Still have questions about Shogun?

Get in touch with us and we’ll put you on the right track towards making unique, fully customizable storefronts.

Contact Us

Name

Email Address

Company

Message

What platform do you use?

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.