Top view of someone holding an phone next to laptop

RainDrops Blog: Web Design & Dev Insights

How to easily duplicate a section to another template on Shopify 2.0

Author: Ronen Hirsch - qwiqode.com

Do you have a section on one page that you want to display on another page? Of course, you could simply just create the section on the new page and re-enter all of the content and settings again... OR you could do it much quicker!

How to easily duplicate a section to another template on Shopify 2.0

Do you have a section on one page that you want to display on another page? Of course, you could simply just create the section on the new page and re-enter all of the content and settings again...

OR you could do it much quicker! This technique is especially useful for those of you who have purchased sections from qwiqode.com because our sections are PACKED with settings that control every aspect of content, functionality and styling. We hope this helps you!

This article refers to sites built on Shopify 2.0.
If you have a site on Shopify 1.0 (built before Summer 2021), then read our tutorial here

This is for any type of section on any theme but it’s especially useful for duplicating qwiqode’s Shopify sections, since they're so packed with a ton of features and settings!

Watch the video:

It’s recommended to watch the video, but here’s a brief overview. 

1. Identify the section

In the Theme Editor, navigate to the page where you have the section that you want to copy and note the name of it (i.e. "QQ Text Section").

The name of the section

2. Add the section to the new page

While still in the Theme Editor, navigate to the page that you want to duplicate the section over to. 

Over on the left, click on "Add Section" and select the same section you noted in the previous step. 

Click "Save" on the right side.

Add Section button

4. Find the names of the templates

* This step should be done twice - once for the original page and once for the new page where you want the section to be duplicated to.

Go to the page, product, blog post, etc. in the Shopify Admin. On the right side of the page, you'll see the "Theme template" selector. Take note of the name that is selector.

3. Find your template files

Go to "Edit Code" by clicking the icon of the "three dots" located in the top left of the Theme Editor - next to the name of theme. In the list of files on the left, you'll see a folder called "Templates". Search for the files with the name that you noted in the previous step and click on each one (the original and target) to open them in the editor on the right.

The prefix of the template file name should be identified by the type of page, where ‘xxxxx’ is the template name:

  • Content page: page.xxxxx.liquid
  • Product: product.xxxxx.liquid
  • Collection: collection.xxxxx.liquid
  • Blog post: article.xxxxx.liquid

Template files

4. Copy/paste your section settings

In the original file (where your section already exists), search for the "group" of data values by searching for the the name of the section that should appear beside the "type" value (I.e. “QQ-TextBlock-section”).

Minimize the groups called "blocks", "block_order" and "settings" by clicking on the arrow to the left.

Once the three are minimized, highlight and select all three and copy them by hitting Ctrl-C (Windows) or Cmd-C (Mac).

Find the data in the JSON file

Go to the "target" file and search for the group as you did in the original file in the previous step. 

Minimize and highlight the three groups and delete them. Then, immediately paste the ones you copied in the original file.

Click on "Save".

5. The section has been duplicated!

Head back to the Theme Editor and refresh the "target" page. Your duplicated section should appear there now.

That's it! That wasn't so bad, was it? 

 

*** Originally posted on https://qwiqode.com

More to read

Image for Custom and Theme-Based Website Development: What’s the Difference?

Custom and Theme-Based Website Development: What’s the Difference?

When businesses are looking to build a new site or to redesign their existing site, they can opt for either a custom website design or a theme-based website. If you are unclear about the difference between the two, this article has all of the answers for you!

Continue reading
Image for COVID-19: How to use Shopify to get your small business website up and running

COVID-19: How to use Shopify to get your small business website up and running

With most brick and mortar stores closed during this pandemic, we are seeing more and more online sales. It's relatively easy to start selling on Shopify and to continue your revenue stream.

Continue reading
Image for Migrating Your E-commerce Store To Shopify

Migrating Your E-commerce Store To Shopify

The migration of an existing store is a challenge and a hassle at first, but Shopify is a great platform that has a lot of benefits.

Continue reading

Let's keep in touch

Signup to our mailing list to receive
valuable updates.

* We won't spam you or give your email to anyone.