The Complete Guide to Shopify Theme Customization

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 allows you to do just that.

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.

Edit any Shopify theme

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.

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.

Navigate to the Themes section

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 especially fast. 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.

Third-party sites

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 activate it.

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

Click on "Upload Theme"

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.

Choose the zip file

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.

Current theme

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.

Page template dropdown

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.

Sections tab

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.

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 customize 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.

Footer

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.

Image with text overlay

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

Featured collection

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.

Add section

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.

Moving a section

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.

Shogun makes Shopify Theme Customization a Breeze

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

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.

Shogun page builder

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

Edit any Shopify theme

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.

Theme settings

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.

Colors

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.

Typography

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

Improve Your Design and Make More Sales

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.

Build Shopify pages that convert.

Create professional-quality pages for your ecommerce store with a powerful drag and drop page builder for Shopify designed with ecommerce teams and agencies in mind.
Start Your Free Trial

Derek Cromwell

Derek is the founder of Thunder Bay Media and lover of everything related to content writing and copywriting. He has 15+ years of copywriting, content writing, and digital marketing experience and is a featured guest blogger published by more than 30 marketing publications.