How to edit Shopify Theme: Your ultimate guide to a superb store

The first and most important step in building a Shopify store is to modify Shopify templates. You’ve got a Shopify store, but it’s looking a bit… meh: “This doesn’t quite look like my business’s style!”. Don’t worry, that is why we need to learn how to edit Shopify theme! Sounds like a lot of work, but it’s just a lot of easy work. While coding might help you break through the limitations, no tech knowledge is required to understand this blog! And, even if you are new to the world of eCommerce, we got you covered!

1. Shopify Theme Editor: A quick tour

Let’s take a speedy tour of the Shopify Theme Editor, where all the customization magic starts. Understanding this tool is your starting point for learning how to modify the Shopify theme.

1.1. Where is the Shopify Theme Editor?

To locate and access the powerful Shopify Theme Editor is simpler than you might think; just take some clicks:

1️⃣Log in to your Shopify admin.

2️⃣Navigate to the Online Store in the left sidebar.

3️⃣Click on the “Themes” tab.

4️⃣Spot the theme you want to tweak, and hit “Customize”.

Boom, you are now in the Theme Editor!

There seem to be so many things to handle, but let’s take a glance at this handy snapshot of the editor’s toolbar so that you have some idea about the Theme editor layout at once.

It’s all about the basic things you should know regarding this tool. Let’s continue reading and juicy details on each function inside that Shopify Theme Editor chest!

1.2. Theme Editor Toolbar

The toolbar on top is your “best friend” along the journey of learning how to customize a Shopify theme. It contains a variety of buttons, and we will break them down one by one:

1.2.1. Theme Status

See “Dawn” with a green “Live” tag? They are telling you:

• Dawn: That’s what your current theme’s name is. 
• Live: This indicates that your current theme is powering your store. (Note: This text might change depending on your current theme status.)

1.2.2. Theme Actions Menu

Click the three dots for cool options to show up in a drop-down menu. The list includes these choices, each with its own purpose:

• Edit code: To adjust the code of the theme
• Edit default theme content: Access and edit the default theme code.
• View: Preview how your store looks
• View documentation: Read the instructions about the current theme. 
• Keyboard shortcuts: Find the quick shortcuts combo on keyboard.
• Get support: Seek help if you’re stuck.

1.2.3. Storefront Selector

Got multiple markets and was curious how your store looks in each market? The storefront selector is your go-to button to preview how your store looks.

1.2.4. Page Selector

This page selector is at the center of the tool bar, which helps you hop between pages – like the homepage, product pages, or collection pages. Therefore, it is easier for you to edit them in a short time. 

⚠️ Important reminder: If you create a new template for a page (like a product page or collection page), it won’t automatically apply to your theme. You’ll need to manually assign that template to specific products or templates.

1.2.5. Sidekick

Shopify’s AI buddy, Sidekick, is a big and proud launch from Shopify since 2024! Never get tired of your questions; it is made for Shopify and can help you with highly personalized and relevant support to make your store shine.

1.2.6. Page Inspector

You can spot errors like a detective with this useful checker. Click on it and move the mouse to where you want to edit. It tells you what section you are on quickly. By default, this tool is on.

1.2.7. Screen Modes

It is important to take care of all types of screen sizes for your Shopify store since responsiveness is a great way to maximize your user’s experience. Toggle between desktop, mobile, or full-screen views to see how your store looks on different devices.

1.2.8. Save Button

This might be the most important of all because there are no autosaves here, Shopify store owners! Every process needs to be finished by tapping on the “Save” button. Click this after every edit or risk losing all your work.

1.3. Section

Now, let’s peek at the “Sections” area – it’s where you will spend most of your time drag and drop, playing with page blocks, and building your perfect store.

1.3.1. Top Left Corner

This shows which page you’re currently editing. In this example, we are on the “Homepage”. Want a different page? Click the “Homepage” text on the top bar and pick another page.

1.3.2. Left Sidebar

This sidebar is like your store’s skeleton. It lists all sections on your current page, like headers or image blocks. You can add new sections, delete redundant things, or shuffle them by dragging.

1.3.3. Right Sidebar

Once you click an element (like a section or block) on the left sidebar, the right one pops up. This area shows all the specific settings you can tweak, such as fonts or images. 

For example, if you tap on the Image banner section on the left, you will see options to add and adjust images, animations, color scheme, and more.

1.4. Theme Setting

The Shopify theme settings are the store-wide changes that affect your entire shop, not just individual pages. Adjust colors, fonts, logos, buttons, and social media links that stick across all pages.

Depending on your theme use, the list of settings shown in Theme settings can be slightly different.

1.5. App Embeds

Got some apps from the Shopify App Store before? You might need to toggle the apps that you have just installed to show (or hide) them on your store. 

2. How to edit Shopify theme: Step-by-Step 

Ready to modify Shopify themes? Now is the actual step to make it happen:

❗ Notice: First, make sure you have your Shopify store ready and all products and collections are added. If you’re just starting, snag Shopify 3 months for $1 to kick things off cheap. 

👉 If you are unsure how to start a Shopify business, take it easy with this simple guide: How to launch Shopify store!

Here’s a quick roadmap for editing your Shopify theme:

• Global edits: Hit Theme Settings to start. you will make some store-wide changes here (like logos, brand info, or colors).
• Main pages: Edit the homepage, product pages, etc., layout.
• Other pages:  Stir up About us, blog, policies, or 404 page if needed.
• Navigation: Tweak the menus.
• Header & Footer: Give them some polish, since they are always shown, no matter where your customers go.

We are good with the overall, scroll down for detailed guides on each part!

2.1. How to change background color on Shopify?

The background is like your coat, it instantly transforms the feel of the whole outfit. To change it, just:

1️⃣ Go to “Theme Settings” > “Colors“.

2️⃣Click on a scheme and define the color you want for the background.

3️⃣Hit “Save“.

2.2. How to add logo on Shopify?

Logo is your store’s face – the first thing that make your customers remember. To show it:

1️⃣ In “Theme Settings” > find “Logo“.

2️⃣Upload your fab logo file.

3️⃣ Adjust size if needed, then “Save“.

2.3. How to edit Home Page in Shopify?

The homepage is your living room! Clean, cozy, and attention-catchers are a must! To nail that homepage, you should:

1️⃣Open the Shopify theme editor, and it automatically brings you to the home page.

(If you are on a different page, just select Homepage in Page Selector)

2️⃣Drag sections (e.g., banners) in the Left Sidebar.

3️⃣Click on a section/ block to tweak settings in the Right Sidebar

4️⃣Finish by clicking “Save“.

2.4. How to customize Product Page in Shopify?

Drafting a page to show your lovely products in a way that no one can resist buying them:

1️⃣In the theme editor, choose “Product” in Page Selector.

2️⃣Choose which product template to edit (e.g. Default template)

3️⃣Use the left sidebar to add, edit & rearrange sections.

4️⃣Edit details in the Right Sidebar. 

5️⃣Save it!

Some of the sections that should be added to create the most powerful product page are: Product information, Product reviews, and Related product recommendations.

2.5. How to edit Collection Page Shopify?

Don’t just sell a single product, take care of the whole collection! To touch the collection page up:

1️⃣In the theme editor, choose “Collection” in Page Selector.

2️⃣Choose which Collection template to edit (e.g. Default collection)

3️⃣Click on the Product grid section on the left sidebar.

4️⃣Customize the number of products shown, number of columns, etc., on the right sidebar.

5️⃣Back to the left sidebar, add other sections if you want (Collection banner, description, etc.)

6️⃣”Save” your work.

To maximize your collection page’s power, don’t forget to add the Product grid and Collection banner section. Some premium theme choices (like those on Best Shopify Themes), give you the power to add an advanced filter tool to make the customers search and buy faster.

2.6. How to create an About Us Page on Shopify?

People don’t just buy products; they buy from people they trust. Your About Us page helps build that trust. You need to go through 2 quick processes:

📌 Create an About us template:

1️⃣In the Theme Editor, go to Page Selector > “Page“.

2️⃣Click “Add template”.

3️⃣Name it “About Us” > click “Create template”.

4️⃣Layout the content of the page in the left sidebar.

5️⃣Hit Save.

To have a good About us page, according to the recommendation from Shopify itself, consider writing about the values that drive your business, the story of growth and challenges, and the goals that your business are thriving to achieve.

📌 Assign that template:

1️⃣In Shopify admin, go to Online stores > Pages.

2️⃣Click “Add page”.

3️⃣Name it “About Us”.

4️⃣Set the visibility to Visible.

5️⃣Click on the Template dropdown and choose “about-us”.

6️⃣Click Save.

2.7. How to create a Blog Page on Shopify?

A blog keeps your store fresh and helps with SEO! So it’s helpful to learn how to create one:

⚠️Note: You must have your first blog post created to start editing the blog template.

1️⃣In Shopify admin, click Content > Blog Posts

2️⃣Click Create blog post for a new one.

3️⃣Name your blog (e.g., “Our Journal” or “Tips & Tricks”)

4️⃣Type in the content.

After preparing all your blog content, now is the time to decide how it will be shown to your readers. Take these steps to edit the blog post template:

5️⃣Go to the theme editor, choose Blog post > Default blog post from Page selector.

6️⃣Adjust the page template using the left and right sidebars.

7️⃣Click Save once done.

Your blog post should contain elements such as a prominent title, a featured image, the blog post content, author information, date of publication, and optionally, an excerpt, tags, comments section, and related products to make it a well-structured blog post page.

2.8. How to customize Cart Page in Shopify?

The cart page is the last step before checkout, which is very important for your conversion rate! Make it rock:

1️⃣In Theme Editor, select Cart in Page Selector.

2️⃣Add sections like promos in the Left Sidebar.

3️⃣Adjust settings, then Save.

An effective cart page should have all the functions that make it work seamlessly, such as a cart summary with items, quantities, subtotal, discounts, taxes, and total price, along with a checkout button and options to update quantities or remove items.

2.9. How to change Menu style on Shopify?

Navigation menus are your store’s roadmap – they need to be clear and intuitive. Make sure to keep it simple and organized. To change its style, do this:

1️⃣In the Shopify theme editor, find the Header setting group on the left sidebar.

2️⃣Click on it, and edit your menu style (dropdown, mega menu, etc.)

3️⃣Save your changes.

A well-designed Shopify menu should include links to core pages like “Home,” “Catalog” (or “Products”), “About Us,” “Contact,” and “Blog,”. If you have a landing page built for promotional campaign, includes them to the menu as well. Because it is easy for customers to find and browse them.

To change the menu items, go to Shopify admin > Content > Menu.

2.10. How to change Announcement Bar on Shopify?

The sticky text on the top of the store is perfect for promotion and catching customers’ attention. Use it for sharing sales, free shipping offers, updates, and more.

1️⃣In the editor, find Announcement Bar section in the left sidebar.

2️⃣Click on the section and update its setting on the right sidebar.

3️⃣Save it up!

2.11. How to change Header on Shopify?

Your header is a vital UI component; it remains at the top across the pages so it is crucial to make it perfect.

1️⃣In the Shopify theme editor, find the Header section on the left sidebar.

2️⃣Make certain settings in the Right Sidebar for the elements like logo, menu layout, search bar, account icon, and so on.

3️⃣Hit Save when done.

A header should show several key features such as the store’s logo, primary navigation menu, search functionality, cart icon, currency, and language selector.

2.12. How to change Footer on Shopify?

Similar to the header, the footer appears on every page your customer goes to. And it should include all the things that a user needs to know about your store.

1️⃣In the Shopify theme editor, find the Footer section on the left sidebar.

2️⃣Change some settings, such as adding social links or text in the Right Sidebar.

3️⃣Save your changes for the footer.

A well-designed Shopify footer should include essential links, social media icons, a newsletter signup, contact information, and legal pages like privacy policy and terms of use. However, bear in mind that the footer should have clean and user-friendly design.

3. Things to note before you edit theme on Shopify

Before you dive into how to customize a Shopify theme, let’s cover some must-knows to keep things smooth and avoid potential pitfalls:

3.1. Theme Duplicate

Always duplicate your theme before making major changes.

👉🏻Why? 

• There is no “reverse card” in Shopify. Once you save the changes, you cannot roll back.
• It helps you not to mess up your live store.

👉🏻How?

• In Shopify admin, click on Online Store > Themes.
• Locate the theme you want to duplicate.
• Click the three dots > Duplicate.

Experiment on the copy instead! Then, once you are happy with the final result, just publish it.

3.2. Understand theme support policies

Knowing the rules is a must, especially when you are playing on their platform. So, spare some time to check out the Shopify theme support policy guide about theme support. Here are some notable points:

• Different level of theme support: Free Shopify themes offer limited support (up to 60 minutes of design help), while paid themes can offer you support from the developer.
• Shopify support limitations: Shopify cannot edit checkout pages, modify third-party apps, make major code changes, add fonts, edit images, or provide custom translations.
• Before seeking assistance, Set up your store, explore theme editor options, consider switching themes, and ensure minimal code modifications.
• Other support sources: Use Shopify forums, the App Store, or hire a Shopify Partner for advanced help. 

3.3. Understand image upload requirements

Images play a crucial part when you modify Shopfiy theme templates.  Since a wrong-sized image can lead to a slow store or weird looks. Shopify also provides a separate guide about uploading images. Some key takeaways:

• Supported image formats: JPEG, Progressive JPEG, PNG, GIF, HEIC, WebP.
• Image upload limits: Can’t exceed 20MP and 20MB.
• Best practices:
  • For slideshow/ image banners: Have no text on images, simple for easy-to-read overlaying.
  • For JPEG images: Use this image type for products, banners or slideshows, page and blog posts.
  • For PNG images: Use this image type for logos, icons, borders and trims.

4. Conclusion

And there you have it – your crash course on how to edit Shopify theme! With these tricks, your Shopify store can go from drab to fab, pulling in customers like bees to honey. Your customers’ online shopping journey, thanks to your beautifully crafted storefront, is no longer a headache.

At eComStart, we’re all about helping you shine online. Want more tips to skyrocket your eCommerce game? Check out our blog for more!

5. FAQs