How to Design Your Shopify Store

If your eCommerce site runs on Shopify, you have the ability to make your website stand out and align it with your brand’s identity. The good news is that you don’t need any coding knowledge to tailor a Shopify theme to your business. In this guide, we’ll walk you through the steps to access the theme editor and utilize its features.

Getting Started

The Sales channels menu lists Online Store, Themes, Blog posts, Pages, Navigation, and Preferences. Themes is selected and highlighted.To begin customizing your Shopify theme, log in to your admin panel and select “Themes,” located beneath the link for your Online Store.

If you don’t have a theme yet, you can choose from a variety of free, prebuilt themes offered by Shopify. The Shopify Theme Store provides a wide variety of free and paid themes. Shopify’s Dawn theme is a great place to start if you don’t already have a theme in mind.

NOTE: This guide assumes you are following the steps on desktop, as the layout of the theme editor is different on mobile and tablet devices.

After selecting your desired theme, click the “Customize” button to access the theme editor. We recommend not editing your live theme directly to avoid any potential issues on your site. Instead, click the “∙∙∙” button next to the theme and choose “Duplicate” to create a copy that you can safely edit without affecting your live site until you’re ready.

The Dawn theme is selected and there are two buttons, an ellipses and "Customize."
The current theme on Shopify

Using the Theme Editor

The theme editor enables you to customize various aspects of your theme, including the homepage, product pages, collection pages, and more. You can modify colors, fonts, images, layout, and even add custom CSS and JavaScript code.

Once inside the theme editor, you’ll see a live preview of your website on the right and a sidebar on the left. The sidebar offers various customization options, and its default view is “Sections,” displaying a list of elements visible on the page, such as the header, footer, and other specific sections. You can switch between “Theme Settings” or “App Embeds” by clicking on their respective icons on the far left of the sidebar.

The Shopify theme editor has a sidebar with the Announcement Bar, Header, Template, and Footer. The Image Banner section under Template is selected.
Shopify Theme Editor

Add a Section to a Page

Customizing your pages with additional sections is simple. Click the “Add section” link in the left sidebar, and a searchable list of available sections will appear. For example, in the Dawn theme, you can add sections like slideshows, featured products, and contact forms. To demonstrate, I’ll add an image banner section to the theme.

The settings for the Image Banner allow up to two images to be uploaded, and the image opacity and banner height to be changed.Clicking on the new section will display its specific customization options in the sidebar. For an image banner, you’ll find settings for the background image, banner size, and content alignment. Furthermore, all elements allow direct custom CSS if necessary.

You can hover over a section and click the 👁 to hide the section from the page. This is useful for seasonal sections that you want to reuse but not have on your site year-round, like a Black Friday sale. You can also click and drag the ᎒᎒ symbol that appears to reorder the sections.

The image banner has three blocks built into it: a title block, a paragraph block, and a buttons block. Blocks work like sections within a section and can be re-ordered or have their visibility toggled just like sections.

Clicking on a block will display options for that specific block. For the button block, you can customize the labels, links, and styles of the buttons. If a button label is left blank, the button will not appear on the site.

Creating a Template

In the center of the top bar, you can change which page you would like to customize. By default, the editor starts on the site’s homepage, but you can customize any page on your site, including the product, cart, and checkout pages. You can also create a reusable template assigned to specific pages, such as products. This is handy for designing seasonal product pages or featuring special items.

The Home Page button is clicked and the menu shows that Products can be assigned as a Default product or a new template can be created.
Create a new template from the page drop-down menu

Sitewide Sections and Theme Settings

You can also customize the header and footer sections on each page. Any changes you make to these sections will affect all pages, not just the page you are editing. Keep that in mind before making changes to these areas!

A glimpse of the theme settings, showing the sections Logo, Colors, Typography, Layout, and AnimationsIn the far left toolbar, you’ll find a gear icon that opens the theme settings. These settings impact the overall appearance of your site, including your logo, color scheme, fonts, and more. For instance, the Layout menu lets you adjust page width and grid settings, while the Inputs menu offers options for form input fields.

Finalizing Your Changes

After completing your site customizations, click “Save” and “Publish” to make your changes live. In the upper right corner, you’ll find icons to preview your site on desktop and mobile, as well as in fullscreen mode. The “Save” button ensures you don’t lose any progress, while the “Publish” button makes your new theme the live version.

The upper right corner of the Shopify theme editor. There are buttons for desktop and mobile previews, as well as Publish and Save buttons.
The upper right corner of the Theme Editor

Your old theme will still be available, and you can always publish it to roll back the changes if needed.


Using the Shopify theme editor is an intuitive and user-friendly way to customize your online store without any coding knowledge. Experiment with various settings, colors, and layouts until you achieve the perfect look for your brand. The theme editor provides you with significant flexibility, but for more advanced customizations, contact the experts at Hall.

See how Hall can help increase your demand.