How to copy a section from one page to another in Shopify Online Store 2.0?

Background

You’re in the Shopify theme editor, you have a section that you want to copy over to another page or simply move to another page. There’s a way to do it without having to write the entire section.

A client recently asked us to make an entire page out of a section we had on their home page. We didn’t want to rewrite all the content so we moved the section to the new page. This is how you can do it too.

Solution

You have to be on the online store 2.0 themes for this to work since you’ll be changing the .json template files.

Let’s say we have a section collapsible_content on our home page and we want to move it to the FAQ page.

First, we need to find the section on the home page.

Open your theme's code, my preferred method is to pull the theme locally using the Shopify CLI.

Once your theme code is open, go to index.json (in case the section you want is on your home page).

Go through each section, in this example, I’m looking for a section of the type collapsible_row, that’s how it is named in the Shopify theme editor.

Here’s what it looks like in the index.json

You want to copy the section object entirely and paste it to your destination page. In our case, we want it in page.faq.json

The next step is to make sure you add the section id to the order array in the page.faq.json

Testing

Open your theme editor and see the section on your FAQ page.

Clean up by removing the section from index.json and its id from the order array in index.json