Shopify Theme Customization - The Basics

The look and feel of your website is very important. This is not just a vanity thing; people will often base their decision to stay and browse or walk away from a website based on the store’s appearance. Making sure that your website lives up to your brand is a very important task. Luckily, customizing your Shopify storefront has become much easier with the 2.0 version. It is possible to do so with no coding knowledge or experience; the interface is intuitive enough, and the options are plentiful.

If you haven’t yet chosen your theme, please check out the blog post about choosing a theme for your Shopify store. You can also check out the available themes on the Shopify Theme Store.

There are two major ways of customizing your store’s theme: you can edit individual templates for page types and change overall theme settings. Utilizing both methods will allow you to customize your Shopify theme to your liking.

When you go to your Themes dashboard, you’ll see your Current theme and the list of all available themes and their unpublished versions in your Theme library. Your current theme will be shown at the top of the page and will have a simple preview. Click the Customize button to start the editing process.

Editing Shopify templates

This method gives you control over the layout of different page types. With its help, you can arrange various blocks on your pages in a strategic way. Every page, be it a product listing or an About Us page, tells a story, conveys a message, and carries a desired call to action. With the help of templates and sections, you can build an effective layout that will display engaging content and encourage your website visitors to become customers.

At the top of the theme editor, you’ll find a dropdown menu. It will be set to your Home page by default, but you can choose any page template to edit. Here you can also add new sections included with your theme to accommodate all information that you need to display. These sections can later be applied to both existing and newly created pages.

Once you’ve chosen a specific template to edit, the left panel will display a list of content blocks that makes up that page. Here you can add, remove, and customize the sections of your page. 

When you choose a section, a new menu will pop up on the right that will allow you to tweak various elements such as font size and colors, insert text, customize content blocks with your files, select which collection or featured product to display, etc. The list of customizable elements will depend on the section type and your theme.

Some sections are movable, and some are fixed. For example, header and footer sections will always stay where they are. Other sections can be dragged and dropped to change their locations; some can also be reused across various pages. The available sections and their uses will also depend on your theme; that’s why choosing the right one is such an important decision.

And if your theme doesn’t offer the sections that you need, for example, a carousel of images, you can get them at qwiqode. We offer elegant customizable content blocks that will allow you to display information on your website exactly the way you need.

This is also how you can add and customize the content blocks we offer. Use the left panel to add them from the list, and fine-tune their appearance using the right panel.

Recently, Shopify has added a Theme Inspector tool to the Theme Editor. Before, you had to pick a section to edit from the panel on the left. Now, you can simply click the area you’d like to customize in the theme preview window, and the section’s name will get highlighted on the left panel. At the same time, a right panel will pop up that will allow you to edit the settings of that particular section.

But, there is one tricky aspect to sections and templates. If you want to create another page with a similar layout but different content displayed within its sections, you’ll have to duplicate your page template. If you just create another page and assign the same template to it, you’ll simply have two duplicate pages. Thus, you need to do some file duplications and some copy/pasting. We have a guide just for that!

Changing theme settings

Your general theme settings will make global changes across your store. Customizing them will affect the color scheme, typography, button styling, and overall branding of your Shopify store. Here, you’ll be able to change the default way your website information is displayed — before any of the individual blocks are edited.

The button to access the theme editor is located in the bottom left corner of your screen. Once you click on it, you’ll see a panel pop up on the right that will allow you to start the customization process. The list of features that can be changed includes layout, colors, typography, favicon, social media, checkout, and theme style. However, you may see a slightly different list depending on your theme.

When making changes in theme settings, remember that they will affect multiple pages at once. For example, the colors you choose in the theme editor impact the solid and outline colors of your buttons, backgrounds, and accents. Chosen fonts and font sizes govern what your headings and body text looks like. With these simple tools, you can change the overall look and feel of the store within minutes. Concise and minimalist, or bright and loud — the choice will be made in your theme editor.

This is where you can add your social media links and choose how the social media icons are displayed. You can also customize your Favicon, search bar, and some other design elements depending on your theme.

You can also customize your heading and footer sections inside your theme editor. The choices you’ve made in the template editor will override the default look of these sections. However, this is where you can add content blocks to your footer that will be displayed on the majority of the pages.

Customizing the checkout page can also be done in your theme settings. You can change the colors and branding based on your theme, add a logo and a background image, and tweak the fields that a customer is required to fill before making a purchase. 

Customizing your Shopify storefront is easy, but there are a lot of details to consider.

You can always hire a developer to do this work for you or do it on your own. If you’d like to work with us, either large-scale or small, simply reach out to us, and we’ll set up a call!

But if you want to simplify your job and are on a tight budget, check out our customizable sections. You can add them to multiple pages and get your message across easily.