What code does EComposer add to my Shopify theme, and why?

Author: An Do 4599 views

EComposer theme code: the layout file, snippets and page files EComposer adds to your Shopify theme

When you install EComposer, the app adds a few files and code snippets to your Shopify theme. They might look unfamiliar the first time you open your theme code, but they’re exactly what lets the pages you build in EComposer show up on your live store. In this guide, you’ll see where to find them, what each one does, and how to remove them if you ever need to.

1. Open your theme code

All EComposer files live in your theme code, so let’s open it first and list them.

Step 1: In your Shopify admin, click Online Store to see your themes. Next, click the three-dot icon next to your live theme and choose Edit code.

Open the three-dot menu of your live theme and choose Edit code

Step 2: The code editor opens in a new tab. Press Ctrl + P (or Cmd + P on Mac) and type ecom, and you’ll see every file EComposer has added, along with the folder it sits in.

Press Ctrl + P in the code editor and type ecom to list EComposer files

2. What code does EComposer add to your theme?

EComposer adds three kinds of code to your theme: a layout file, two short snippets in theme.liquid, and a set of files for each page you save.

The ecom.liquid layout file. Right after installation, EComposer adds an ecom.liquid file to the layout folder of your theme. It’s the layout EComposer uses for the pages you build with the app.

The ecom.liquid file in the layout folder of the theme

The header and footer snippets. EComposer also adds two lines to your theme.liquid file. The first one renders ecom_header near the top of the <head> tag, so the app’s styles and settings load with your store.

The ecom_header snippet rendered at the top of the head tag in theme.liquid

The second one renders ecom_footer right before the closing </body> tag. Both lines are wrapped in a small check, so even if one of them runs into an error, your theme still displays normally.

The ecom_footer snippet rendered before the closing body tag in theme.liquid

Tip: To find these lines quickly, open theme.liquid, press Ctrl + F (or Cmd + F on Mac) and search for ecom.

Files for every page you save. Each time you save a page in EComposer, the app adds its files to your theme based on the page type: a template in the templates folder (for example index.ecom-homepage.json) and a matching section in the sections folder (for example ecom-homepage-home.liquid). Search for ecom plus the page name to find them.

The section and template files EComposer adds for a saved homepage

The app embed. Besides the code above, EComposer uses an app embed in your theme editor (App embeds). You can check its status right on the EComposer dashboard, where it should show Enabled.

3. Why does EComposer add code to your theme?

Everything your customers see on your storefront comes from your theme. So for any third-party app, EComposer included, to show content on your live site, its code and files need to be in the theme. Without them, the pages you build in EComposer simply wouldn’t appear on your store.

4. Which theme does EComposer add code to?

EComposer only adds code to the theme it’s working on, which is your live theme by default. To check or change it, open the EComposer app, go to Settings and open the Theme management tab. Then pick a theme under Choose a theme to work on and click Save.

Choose the theme EComposer works on in Settings > Theme management

5. How to remove EComposer code from your theme

If you only want to remove one page, delete its template and section files from your theme code. To remove all EComposer code at once, go to Settings > Theme management in EComposer and click Clean theme in the Danger zone. This only cleans the theme files (snippets, templates and assets) from your working theme, so your EComposer pages and data stay safe in the app.