How to Clone a Shopify Homepage for Customized Landing Pages

[houssamalissa]

How can I clone my home page?

The reason I ask is I want to create 2 or 3 separate landing pages targeted at different audiences. I want them to be largely the same but with some minor differences.

Anyone know how I can do this?

[Luna]

Hi, @houssamalissa! 

This is Luna, from Shopify. What a great question! You can most definitely duplicate the work you have already done on your home page. Let me share the steps with you to do so. 

In order to duplicate your theme, you can follow these steps here: 

1. From your Shopify admin, go to Online Store > Themes.
2. For the theme that you want to duplicate, click Actions > Duplicate.

The duplicate theme appears on the Themes page. It is named Copy Of + the name of the theme that you duplicated. Feel free to edit that as you wish. Once you are ready, you can start to make the small home page changes to your copied theme without altering the live theme. Please note that if you already have 20 themes added to your Shopify admin, then you'll need to delete one before you can duplicate another. You can learn more about this here: Duplicating themes. 

I’d love to hear more about your business plans! Are you going to open multiple websites for each target audience? 

Looking forward to hearing from you,

[houssamalissa]

 Hi Luna,

Thanks for getting back to me!

So actually no, I'm just going to have one website - however I am going to create multiple different product landing pages for my three main demographics of customer. Each one will pitch the product according to their particular interests / use-cases.

So in terms of duplicating - what would actually be important is being able to duplicate individual pages within the same website rather than creating separate websites. Does that make sense? And would the method you've outlined achieve that?

Thanks 🙂

[Luna]

Hey, @houssamalissa. 

That's a great question! Thank you for clarifying that. If you are hoping to duplicate your home page multiple times within the same theme, the strategy I suggested won't be ideal. This would require you to copy and multiply pieces of code from your theme that have already been written. 

Your homepage template is the index.liquid file for most themes. That being said, you would need to then edit it to make the necessary adjustments. You could create a new page template with the formatting of the index.liquid page. However, this is not going to be a straightforward process if you are unfamiliar with coding. I suggest considering hiring a Shopify Expert to help you with this. 

If you're going to edit the code of your theme, I highly recommend duplicating your theme first. It's also important to know how to roll back to an older version of your theme, that way if something goes wrong, you are covered. 

Or, you could consider a third-party app such as PageFly Landing Page Builder. Before downloading an app, I suggest reaching out to their support team to clarify if the app will suit your needs. You can find their contact information on the app page. For example: here. To browse other options, check our Shopify app store here.

In the meantime, how has everything been going with your business? If you have any questions, please let me know!   

[Artmacfarland]

Please make this easier, and also a way to save sections and paste them on to other pages, this is way to complicated.

[PageFly-Victor]

Thank you so much, @Luna for mentioning PageFly. 

With PageFly, Free Landing page builder app, you can create a home page for free and then using Import/ Export function to import that home page from a store for another store (Which also installs PageFly). This process will take less than 3 minutes!

Let's give it a try, we also provide 24/7 support live chat when you need helps.

PageFly with love ❤️

[CartesianRob]

Hmm, seems like the answer is no then. That's pretty lame from Shopify isn't it.

[stefaniebarre]

Yes. This is a basic functionality to allow flexibility. 

[Artmacfarland]

Yeah You would 100% think shopify has this, Or at least to have me save my sections and just copy and paste it to other pages... This seems so complicated. 

[Rafo]

Well there is a way to duplicate page without using any external apps. Here's how I do it:

1. Go to Online Store --> Themes and press customize next to active theme
2. Click on Home Page on top of the screen and from dropdown select Pages, see screenshot
   
3. On this dropdown you can see names of all existing page templates (this will be important later on!). Next press Create template at the bottom of dropdown and assign a name to it (in our case that will be landing-page) and create a template
4. On the same screen, in top left corner click on three dots and click edit code
   
5. Code editor should open in new tab and first thing you want to do is find a template you want to duplicate. So your homepage has name of index.json. Other page templates have this naming convention page.{template-name}.json, and remember on step 3. there is a list of all those page template names. So lets say you want to duplicate template by the name of contact-us, you would search for page.contact-us.json (there is a search field in the top left, don't search it manually). Click on the file and you should be able to see it's code on the right in the code editor. Copy and paste everything, don't leave out or change anything.
6. Now find a template you created, this will be page.landing-page.json and paste all the code and press save in top right corner.
7. Last is just to assign this template to a real page, go back to you Shopify admin dashboard, go to Online Store -> Pages, add new page in top right corner, and after giving it a title, under theme template select the landing-page and you should be good to go!

I know it's not easiest solution, but once you understand the process, it should be easy to repeat and consistent!

[HYDAWAY]

Spot on! Please move this post to the top of the page. Above Shopify's poor response.

[atom6246]

Legend!

To simplify for others - Copy the code from index.json (this is your default page), then paste everything in the created page (ex. page.created.json) replacing whatever was previously there.

[Sege]

Excellent simplification.  Thanks to you too.  

[Sege]

Excellent.  Thanks so much for this!  IT SAVED me a ton of time, and possibly cash too.  

[Puur]

Top info. Thank you so much 🙂 It worked and was not so difficult after all ! Strange that @Shopify with ALL the upgrades they create they really fail on this topic !

[richertim]

Okay, so now this person has 2 or 3 landing pages... how then does the system know which landing page to show which customer? Or do all 3 landing pages just exist and the person would have to click the one they want... this seems counter intuitive.. I would want 3 different landing pages that would then be selected based on SEO and where the person is searching from... like say 3 different cities... without needing a whole new store front, just a different page. 

[Rafo]

System doesn't determinate anything, there is only one main landing page (or it's usually called homepage) and it will be show when user visits your domain (for example https://example.com) and other 2 pages will be under pages, so they will page https://example.com/pages/new-york and https://example.com/pages/chicago. System show's what is found in index.json.

[richertim]

Okay, just getting my head around this. So the person, once on the store front would then select their city from a menu, that would take them to the appropriate page... What we are wanting to do is have a our storefront like our website... for example https://example.com/edmonton/landingpage-edmonton  or https://example.com/calgary/landingpage-calgary  each subfolder would have same pages but adjusted for each city, names changed, SEO adjusted. This is easy to do on a regular site but does not seem to be an option in shopify.

[goodera]

THANK YOU