How to Quickly Copy Shopify Sections to Different Pages - 99 Shopify Tips (32)
如何将任意一个页面模板中的Section复制到其他页面?比如上述示例,在主页模板中我编辑设计好了一个Multicolume的内容,同时,我也希望这个内容能在其他页面呈现,比如Product产品页。


Background

How to copy a Section from any page template to another page?
For example, in the homepage template, I designed a Multicolumn section. I also want this content to appear on other pages, like the Product page.
Warning: This requires very basic code editing actions and some code knowledge. (Although the actual action is just copy and paste)

Implementation Principle
I always felt this should be an extremely simple copy-paste function, but I couldn't find it anywhere.
If you want to copy to other pages, we can directly go to the code area and copy the corresponding section from the homepage template code area to the product page code area. Let's go!

Let's Do It!
Step 1

Create a new section, no editing needed, just save. The purpose is to let this section generate in the code first, making it easier for us to find the corresponding location.
Step 2
1. For safety, please backup your theme first.

2. Then go to edit code.

3. In Templates, the codes corresponding to my two templates are: Homepage corresponds to index.json, Product page corresponds to product.json.
(Make sure to find the correct code area, because different people use different Apps, and themes may have multiple templates, etc. You need to confirm in the corresponding JSON code segment whether it's what you're looking for)


4. Find the corresponding code snippet, copy and paste from homepage index.json to product.json. And remember to modify the corresponding number in the order code segment.

5. Save, then return to the customize page, and you'll see the corresponding section.

Note: After copying, the two sections are independent - modifying one won't affect the other. If you need synchronized updates, you'll need to use other methods.
Summary
The core principle of this technique:
- Shopify page templates are stored in JSON files
- Each Section has corresponding configuration code in JSON
- Copying a Section means copying the configuration code block in JSON
- Pay attention to the numbering sequence in the order array

