The appearance and layout of your Shopify store impact the experience customers have when they browse products and make purchases. Shopify themes don’t all have the same aesthetic. The customizations you add to your theme can make a considerable difference in what visitors think of your website.

When you want to add, change, or modify your existing theme, you must take the right steps to ensure you don’t negatively impact the flow and layout of your website. A single mistake could cause you to lose important content.

When editing a Shopify theme, it’s possible to customize your store’s typography, content, colors, and layout. Even if you don’t know how to code, you’ll be able to change the aesthetics of your website without editing the code. The goal of this guide is to help you learn how to customize Shopify theme and add sections to your website.

How to Add Sections to Your Shopify Theme

Every Spotify theme comes with sections that make it easier to customize specific portions of your website. Most of the sections in a theme are comprised of blocks that have specific functions.

For example, a block can be used for single images, links, buttons, or text. By using blocks and sections in your template, you’ll have more options over how to arrange your site content. This level of customization allows you to control the feel, style, and appearance of your online store. Keep in mind that themes can have as many as 25 sections.

Every section within a theme can consist of a wide range of different blocks. It’s possible to add as many as 50 blocks for every section. The types of blocks and sections available to you depend on the theme you’ve selected. Review your theme documentation to determine what options you have. The following provides step-by-step instructions on how to add sections to theme on Shopify.

Accessing the Theme Editor

First, you’ll need to access the theme editor, which shows a tree view of the content that’s available in your template. Use the expand icon to view the blocks in a section. You can also select the collapse icon when you’re done to hide the blocks. If you want to view the settings of a specific block or section, all you need to do is click it.

You can reach the theme editor by selecting “Online Store” and “Themes” from your Shopify admin page. Once you find the theme you wish to edit, click the “Customize” button. You can then select “Sections”.

Navigating the Preview Inspector

One of the latest features to be added to the theme editor is the preview inspector. This feature allows you to effectively navigate to different blocks and sections from your preview window.

By accessing the preview inspector, you can reach the block or section settings more intuitively. You’ll have the ability to hide, delete, or reorder blocks and sections from this window. All Shopify themes provide access to the preview inspector. You can toggle it off or on while you’re editing.

Once you activate the preview inspector, you can select any outline element to reach a specific setting. This tool can show two separate borders around blocks and sections, which include a solid blue line and a dotted blue line. A dotted blue line is used for blocks that are associated with the section. A solid blue line represents the active section.

Adding New Sections and Blocks

When using the preview inspector, you’ll be able to add blocks and sections to the theme from the window. If you’re on mobile, select the edit mode.

Using the Add Section and Add Block Buttons

The “Add Section” button is available at the bottom and top of the section you’ve chosen. When you click this button, a new section will be inserted into the appropriate position. As for the “Add Block” button, it shows up when you hover over a block. Select the “+” icon to add another block.

Reordering, Hiding, or Deleting Sections and Blocks

To reorder, hide, or delete blocks and sections, you can use the preview inspector from your theme editor. Use the arrow icons that are displayed in the preview inspector to move a block or section. You can also duplicate a block or section by selecting the copy icon.

When you wish to hide a block or section, click on the eye icon. Once a block or section is hidden, you can’t use the preview inspector to reveal it. This option is only available by clicking the “Undo” button that’s located on the home bar or by returning to the theme editor home. From here, you can view all hidden blocks or sections. Deleting a block or section is possible by selecting the trash can icon.

How to Add Sections Using Mobile

When you’re on mobile, it’s possible to add, move, delete, hide, and duplicate sections. This feature can be accessed by selecting the “Edit” mode that’s found in the bottom sheet.

How to See What Shopify Theme a Website Is Using

To find the right theme or template for your website, you must first identify the theme that another website is using. There are thousands of different Shopify themes, which can make it challenging to determine which one the competition is using. When you access the website’s code, look for the words “Shopify” or “theme” in the code. This should tell you which theme the site is based on.

There are also plenty of online tools and Chrome extensions that allow site owners to identify themes. If you’re having difficulty accessing the site’s code, consider this option. To view the source code of a page in Chrome, press Ctrl+u. You can now search for “Shopify.theme” with Ctrl+f. You should then see a simple JSON object with the name of the theme.

How to Change Your Shopify Theme

If you want to know how to change Shopify theme, select “Online Store” and “Themes” from your Shopify admin. You can customize or duplicate your current theme after clicking the “…” button to reveal more options. Before you make changes to your current theme, it’s highly recommended that you duplicate it for backup.

If you’ve found a new theme in the Shopify library, download it. The theme can then be accessed from your theme library. To add a new theme, navigate to “Online Store” and “Themes” from your dashboard. Before you publish it, select the “Actions” button. From here, click on “Preview”.

You can now view how your theme will look once you publish it. To publish the theme, select the “Actions” button again before clicking “Publish”. You’ll be asked to confirm your decision. Once you do, your existing theme will be deactivated.

How to Modify Your Shopify Theme

If you’re wondering how to modify Shopify theme, start by opening the theme editor from your Shopify dashboard. From here, you can select a new template or use the search bar from the drop-down menu. Once you select a specific template, it will be loaded into the editor for you to modify.

As touched upon previously, your theme is a template that’s made up of different sections and blocks. A single theme can have 25 sections. Each section can have 50 blocks. The steps you take to move, duplicate, hide, or delete sections and blocks depend on the type of device you’re using.

For example, let’s say that you want to duplicate a block or section from your desktop computer. If you’ve already clicked the “Customize” button on your theme, you’ll be able to duplicate a block or section on the page. Once you select the specific block or section that you want to duplicate, click “…” before selecting “Duplicate”. Make sure to save your changes.

Working with Templates

When working with templates, you can view and edit the available ones that you’ve installed from your dashboard. Sections are grouped into headers, templates, and footers. The header section covers the announcement bar, any apps, and the actual header.

The template includes all the sections in the body of your page. These sections can include collection lists, collages, blog posts, or custom Liquid. As for the footer section, it includes email signup, custom Liquid, and the footer.

Keep in mind that the header and footer remain consistent across every store page. If you customize one header, the changes will apply to all of them. If you wish to display dynamic information, you can use metaobjects and metafields, which allow for inline editing. If your theme supports metafields, you’ll be able to connect one to a specific block or theme when using the editor. This feature will be available to you if your theme accommodates JSON templates.

To connect a dynamic source to a specific block or section, access “Themes” from your Shopify dashboard. Click “Customize” on your preferred theme. You can edit a block or section by clicking the right name in the sidebar. The content will then be loaded into the preview window. When you click the “Edit” button, select “Connect Dynamic Source”. You’ll then need to save your changes.

Once you add metaobjects or metafields to your theme, you can edit them inline without needing to enter your admin dashboard. This feature works for page, text, color, video, and image metafields. Your theme should have a setting that’s referenced in the metaobject. Once you select this setting, you can edit the metafield value directly. After you save your work, the landing page should automatically refresh.

If you need help with any of these processes, access your theme’s documentation. You should find links to the documentation in the “More …” menu that’s displayed in the menu bar. You can also look at the version of the theme from this menu.

How to Customize Your Shopify Theme

Most components in your theme can be customized. For example, you can alter your store’s layout, colors, content, and typography. Customizing the content on your store is made easy with the sidebar modes. You can select a single sidebar or a double sidebar. The double sidebar mode is suitable for large screens and wide browser windows. If you have a narrow browser window or small screen, use the single sidebar mode. The mode you choose determines where the setting panel is situated in the theme editor.

If you use the double sidebar mode, the right-hand one will contain the setting panel. The navigation panel can be found in the left-hand sidebar. As mentioned previously, your sections will be grouped into headers, templates, and footers. You can use the preview inspector if you wish to make quick adjustments.

To alter the settings of individual blocks and sections, all you need to do is click the name of the section from the sidebar. You can then customize the section or click on an individual block.

Advanced customizations are also possible with custom Liquid, which is a tool that Shopify provides to site owners who wish to add custom code to a theme. This programming language allows you to craft unique layouts, functionality, and sections on your online store. Click on “Add a New Section” from the code editor if you want to input your own code.

After you add custom liquid blocks to your theme, you should be able to preview and test them by clicking the “Preview” button that’s found at the top right of your screen. If you like the changes, click the “Save” button. The code should now be published. As mentioned previously, metaobjects and metafields can be customized with inline editing, which can help you test your customizations with resources like collections and products.

Conclusion

When you create a Shopify website, you have all the tools you need to customize your theme and make it unique. You can add, change, and customize your theme by accessing the theme editor and preview inspector. These tools allow you to navigate and edit sections and blocks in the preview, which minimizes the risk of making substantial mistakes.

Explore and experiment with different features to ensure your customers have the best store experience. For additional learning and support, read up on preview inspector best practices and performance tips for your theme.