The Theme Editor is arguably the heart of Shopify 2.0. It allows you to customize your store's look and feel and create pages without any coding knowledge. Imagine you've purchased a brick-and-mortar store. The location is perfect, the space is ideally laid out, but before you can let customers in, you still need to finalize the setup.
It's exactly the same with your Shopify store: The infrastructure is in place, the theme is selected, but now it's all about setting up the details correctly and filling your store with content.
In this tutorial, we'll show you how to use the Shopify Theme Editor to customize your store and optimize it for your customers' needs.
Our e-commerce expert Adrian has already helped numerous brands launch on Shopify. In his book, Shopify for Dummies, he provides retailers with all the essential information they need to navigate Shopify ( view on Amazon / view at your local bookstore ).
1. Introduction: What the Shopify 2.0 Theme Editor can do
The Shopify Theme Editor is the central tool for personalizing your store's layout and design—all without any programming knowledge. Here, you can change your selected theme for your store in real time—including colors and typography, as well as customizing specific shop pages like the homepage, product pages, category pages, or your blog.
Without any programming knowledge and in just a few clicks, you can influence the look of your website and tailor your Shopify store to perfectly suit your brand.
As soon as you click the "Customize" button in your Shopify admin area under Sales Channels > Online Store > Themes, the Theme Editor opens.
In this article, we'll show you how to navigate Shopify's Theme Editor, configure key settings, and create new pages. This way, you'll bring your online store structure to life step by step.
2. Find your way around the Theme Editor
2.1. Structure of the Shopify Theme Editor
The Theme Editor is divided into different sections that help you make your changes in a targeted manner. Our experience working with various online retailers proves that anyone can navigate it quickly and intuitively once they have a basic understanding of the tool's logic. These are the components of the Shopify Theme Editor:
- Header area (1): Here you can navigate between the different pages and templates and select the current page for editing. You can also return to the normal Shopify admin interface by clicking "Close."
- Store Preview (2): The store preview shows all the changes you make in real time. You can switch between desktop and mobile views to ensure your store looks great on all devices.
- Main areas (3): Here you can switch between the following core areas of the Shopify Theme Editor: Sections, Theme Settings, and App Embeds.
- Detailed input fields (4): In this area you make the specific adjustments for the different modules and sections of your online shop.
2.2 Navigating the Shopify Theme Editor
Navigating the Theme Editor is intuitive. You can either click on the desired elements of your online store directly in the shop preview to be redirected to the corresponding page you want to edit.
However, you can also access specific elements using the dropdown menu in the header area. Clicking on this menu opens an overview of the various pages you can edit. These include:
- Home
- Products
- Categories
- Category list
- Pages
- Blogs
- Blog posts
- Shopping cart
- Check out
2.3. How templates work in the Theme Editor
Templates in Shopify define the basic design and arrangement of a page's elements. Think of them as a template that you can use again and again without having to edit each store page individually.
This allows you to create different templates for the homepage, your product pages, or category pages, and edit them in the Theme Editor. Add new sections, change the order of sections, or add images, text, buttons, and other elements to customize the look and functionality of the page.
Once you've created a template, all you need to do is link it to the corresponding page in your shop. We'll look at exactly how this works when we discuss the individual customization options for the pages.
3. Make basic settings in the Shopify 2.0 Theme Editor
Before we take a closer look at the options for individual pages, let's first look at the general settings for your store's appearance. To do this, open the main "Theme Settings" section, identified by the gear icon in the left sidebar.
An overview of customization options will now appear. Each theme developer has different priorities here, so the settings options vary from theme to theme. So don't be alarmed if you see a different display here.
The customizations will then only be visible to outsiders once you publish the entire theme. You can create duplicates in the Shopify admin by clicking the three dots next to a theme and selecting "Duplicate."
Below we will discuss the most important elements of the theme settings:
3.1. Color settings
Choosing the right colors is crucial for the ideal brand representation in your store. Shopify uses HEX color codes, which you can store in your theme settings. Make sure you use colors consistently, especially on buttons and important elements, to ensure a consistent user experience.
3.2. Fonts
Shopify offers a wide selection of fonts that you can use for headings and body text. If your preferred font isn't available, it can be added through custom programming.
3.3 Shopping cart options
Depending on your theme, you can choose different shopping cart types, such as a separate shopping cart page, a shopping cart drawer, or a shopping cart popup. Each option has its advantages and disadvantages that affect the user experience.
- Shopping cart page: The shopping cart is displayed on a separate page, similar to products on their own product pages and categories on category pages.
- Shopping cart drawer: Instead of a separate page, the shopping cart is displayed from the side of the screen as soon as a product is added. The advantage: The original page remains visible.
- Shopping cart popup: This window opens as soon as a product is added to the shopping cart. This popup usually appears in the top right corner of the screen.
We often recommend a cart drawer because it encourages further shopping in your store and allows room for cross-selling, i.e. placing additional, suitable offers from your product range.
3.4. Favicon
A favicon is the small icon you see in your browser tab when you open a website. This icon should also be displayed in your online store to convey a clear brand identity to your customers. To achieve this, you can add a favicon in the theme editor.
We recommend using a square graphic as your favicon. Otherwise, consider whether a specific part of your brand logo would be suitable as a favicon.
3.5. Checkout
Even though Shopify's checkout is known for its tried-and-tested layout and limited customization options, you still have some options for customizing it even without Shopify Plus. You can adjust these settings directly in the Theme Editor:
- Upload logo: Here you can upload your brand logo so that it will be displayed during checkout.
- Add a banner: You can add your own banner to the checkout page header for a more personalized touch. This is optional and should only be done if you're truly committed to it.
- Choose font: By default, the checkout will use the font you selected for the store. In most cases, it's best to leave it that way.
- Set colors: Check that the colors in the checkout are set correctly, especially the button color, which should match the one in the online store.
4. Set individual theme sections
After the general settings of your theme, we'll now move on to the individual "theme sections" and the step-by-step setup of each page of your online shop. We'll first look at the homepage to familiarize you with the capabilities of the Shopify Theme Editor before moving on to the other shop pages.
4.1. Shop-wide sections
Before you start building the homepage, we should first customize some general sections that will appear on the homepage and other pages of your store. You can find these "store-wide sections" in the Theme Sections area at the top.
These sections, such as the header or footer, are visible on all pages of your store. These elements include:
- Announcement Bar: You can place a bar with important information at the page header. You can use the settings in the Theme Editor to decide whether and when this bar is displayed, and what content it should contain.
- Adjust header: Depending on your theme, you can configure various settings for the page header and main menu. For example, you can add a link to your main menu, add your logo, or adjust the arrangement of elements in the header.
- Footer: At the bottom of your online store is the footer, which provides additional links to less purchase-critical pages, such as the Terms and Conditions or the Legal Information. You can add these links and menus using the Theme Editor and further customize the footer depending on your theme.
- Set additional elements: Depending on the theme, the editor offers you additional customization options, such as the integration of popups for collecting email addresses.
4.2. Create homepage
When a visitor finds your online store through a search engine, they typically land on the homepage. Even when you open the Theme Editor, the homepage is displayed by default. So we'll start with this page and use it to familiarize you with all the features and nuances of the Shopify Theme Editor.
Under the shop-wide sections mentioned above, you will find the individual sections of the homepage in the Theme Editor.
For individual sections, such as the homepage, you have the following options to choose from:
- Edit section: To edit an existing section, simply click on it. A screen with various input fields will open, which you can customize. Here you can add text and images or configure other settings.
- Delete section: If you want to remove a section, click on it and select the "Remove section" option at the bottom of the screen to delete it.
- Hide section: If you want to temporarily disable a section, you can also hide it in the Theme Editor. Hover over the desired section and click the eye icon that appears. The section will be hidden, and the icon will be crossed out.
- Show section: To make a hidden section visible again, hover over the section again and click the crossed-out eye icon.
- Add a new section: To add a new section, scroll down the section bar and click "Add Section." Select the desired section from the available options. It will be automatically added to the bottom of the page. You can then edit it.
- Moving sections: If you want to move a section to a different location, you can easily do so using drag and drop. Hold the desired section with your mouse and drag it to the desired position on the page.
What does an optimal homepage look like?
Hey Marly 's example shows what an optimized homepage for your Shopify store could look like:
- Large photo banner: Use a visually appealing photo banner to showcase your brand and products. A catchy slogan captures the essence of your brand. Buttons link to the most relevant pages of your store (usually the most popular product categories).
- Bestseller section: Place a section with the most popular products. This helps your visitors quickly find the most important products.
- USP Icon Section: Highlight the unique selling points of your brand and products with icons and short keywords to stand out from the competition.
- Category overview: Show your store's 3-6 most important product categories so visitors can understand at a glance what you offer.
- Link to additional pages: Link to pages like "About Us" and other content to build trust and demonstrate transparency. Especially as a smaller brand, it's important to provide a wide range of information about your company and your products.
- Social media & other content: At the bottom of the homepage, you can integrate your social media channels and other content. Typical elements include an Instagram gallery or a newsletter signup form.
4.3. Create a category page
Now that the homepage is set up, we'll focus on designing your category page. To do this, select the "Home" button in the header area and then "Categories" from the list of pages in your online store. By default, your Shopify theme includes a template for all categories called the "Default Category."
To customize the category page template, select the "Default Category" template. It will open, and on the left side, you'll see the various sections that you can edit and customize to your liking. You also have the option to add new sections here.
Note that any changes you make will apply to all categories assigned to this template. If you want the information in a section to be customized by category, consider using dynamic sources and metafields.
Creating a different template for specific categories
If you want to use different page structures for different categories in your online store, you can create new category page templates. This is useful if the properties of the product categories differ significantly and require a different presentation. For example, the presentation of different product types, such as pans and spices, might be different – in this case, it would be useful to create a separate template for each category.
To create a new category page template, follow the steps described above. Instead of selecting the "Default Category" template, click the "Create Template" button and create a new template.
To ensure that the newly created category page template is displayed for the corresponding categories, you must assign it to the respective categories. This assignment takes place when the category is created.
Inspiration for category pages
Category pages aren't just about listing your products. Instead, you can give your customers comprehensive context and help them discover the items that best suit them. Pinqponq's category page shows what this might look like:
For example, Pinqponq links other category pages so customers can discover the wider product range with just one click. You can easily implement such linking of (sub)categories in the Theme Editor by adding a corresponding section to the category page template.
Filters also help customers find the right products. Some themes have a simple filtering option built in. Otherwise, we often recommend the Shopify Search & Discovery app.
4.4. Create product page
To customize the product page template, select the "Standard Product" template. You can arrange and edit the sections here just like you would on the home and product pages.
Please note that any changes you make will apply to all products assigned to this template. If you add additional sections with specific information, this information will be displayed on all product pages using this template. If you want the information in a section to be customized for each product, we recommend using dynamic sources and meta fields.
Creating a different template for specific products
Similar to category pages, it can also be useful to use different templates for different products on product pages. Let's take the example of pans and spices again. While the focus for spices is on ingredients, flavor, and usage tips, for pans, application possibilities, durability, and quality are more important. In such cases, it makes sense to use different templates for the different product categories.
To create a new product page template, follow the steps described above. Instead of selecting the "Default Product" template, click the "Create Template" button and create a new template.
To ensure that the newly created product page template is used for the corresponding products, you must assign it to the respective products. This assignment is not done in the Theme Editor, but rather when creating the product.
We explain how to create products in Shopify in our guide.
How to create the optimal product page
Your products and your brand are unique, but there are certain elements that help showcase your products in the best possible way and convince visitors to buy. Here are our tips, using BADESOFA as an example:
- Top of Page: The first area visitors see when the product page loads should be clearly structured and well-used. This should include the product photo gallery, title, price, quantity selector, and the shopping cart button.
- Key features: The most important features and outstanding characteristics of the product should be mentioned right at the top so that visitors can quickly form an opinion.
- Product description dropdowns: After the initial core information, more detailed descriptions follow. To avoid overwhelming visitors, it's advisable to organize this information into different dropdowns.
- Product reviews: To gain trust, it's important not only to describe the quality of your product, but also to include genuine customer reviews. These can be added to Shopify via an app.
- Additional information: Next, you can consider what additional information and presentation formats are suitable to showcase additional features and strengths of your products, such as a section on ingredients or materials.
4.5. Create and customize additional pages
Your online store is more than just a place for transactions. It's about bringing your brand to life and conveying the story behind your products. This is the only way to build a personal connection with your customers. In addition to the standard shop pages, the additional pages, which you can also freely design in the theme editor, are ideal for this.
This means you don't need any additional apps to create extra pages, like an About Us page. Everything you need is in the Theme Editor.
For each page you want to design with sections in the Theme Editor, you create a separate page template. You can then enrich this template with the desired sections and modules as desired.
Please note, however, that you can only use a page template once per site. Therefore, you'll need to create a new template for each page in the Theme Editor.
If you want to create multiple pages with a recurring structure, you can use the previous template as a base. It will then be duplicated, retaining the sections and content. This saves you considerable time and effort.
Once you've designed it, all you have to do is assign the page template to the respective page. While the template is created and designed in the Theme Editor, the assignment takes place in the Shopify Admin. To do this, go to Sales Channels > Online Store > Pages, select the desired page (or create a new one), and assign the corresponding page template there.
5. Further settings in the Theme Editor
There's much more to discover in the Shopify 2.0 Theme Editor. It's arguably one of the most powerful tools in the e-commerce platform, and new features are constantly being added. However, two other areas are particularly important, and we'll explore them in more detail in this article: app embedding and theme language customization.
5.1. App embeds
One area of the Theme Editor we haven't covered yet is app embedding. Over time, you'll likely install and use various Shopify apps in your online store. Many of these apps offer sections or widgets that you can integrate into your theme.
After installing the app, you'll find these sections in the "App Embeds" section of the Theme Editor. This way, you'll always have an overview of which features have been added by which extensions.
5.2. Adjust the theme language
You may encounter certain labels or terms in your online store that you can't find in the Theme Editor and therefore can't customize there. These terms often come from text blocks that are managed through the theme but can't be edited directly in the Theme Editor. To customize these text blocks and terms, you'll need to take a different approach.
To make these adjustments, exit the Theme Editor and return to the Shopify admin panel. Under Sales Channels > Online Store > Themes, you'll find the familiar list of your themes. Instead of clicking the "Customize" button, which takes you to the Theme Editor, click the button with the three dots next to it. A menu will open. Click "Edit Default Theme Text." This will take you to an input form where you can customize various text blocks and terms.
6. Conclusion
The Shopify Theme Editor offers you a wide range of options for customizing your online store and adapting it to your customers' needs. By familiarizing yourself with the various features, you can continuously optimize and adapt your store. If you need assistance with setup or customization, we, as an experienced Shopify agency, are happy to assist you.
