How do I create a Development environment?

Shopify Discussion
1

How do I create a copy or clone of a Production site for development purposes?

As I understand it there is no full export feature, I’ve managed to export a theme and products but when I import these I have a half baked working copy due to so many other dependencies. I can’t export Collections, I tried a couple of apps that claim to be able to export and import these - most don’t work and the one I did manage to get working didn’t import or assign any of the products which belong to the the collections.

I’m not going to pay for an app that claims to be able to copy a site with no guarantees that it will work and likely poorly written for the purposes of exploiting this short-coming.

So I ask again, does Shopify really not have a way to natively export and import a site? if so I am quite simply astonished.

2

Hi,

This is Richard at PageFly - Shopify Advanced Page Builder app.

You’ve accurately identified a major pain point for Shopify developers: the lack of a comprehensive, native site cloning or export/import feature. It’s indeed astonishing, and it’s a common complaint.

Here’s a breakdown of the challenges and the most practical (albeit imperfect) workarounds:

The Core Issues:

  • Data Dependencies: Shopify’s data is deeply interconnected. Products rely on collections, collections on product relationships, themes on settings and data, and so on. A simple export/import of individual components doesn’t replicate these relationships.
  • API Limitations: The Shopify Admin API, while powerful, doesn’t provide a single endpoint to clone or fully export a store’s data and settings.
  • App Reliability: As you’ve discovered, many apps claiming to offer site cloning are unreliable or incomplete.

The Best (Imperfect) Workarounds:

  1. Manual Replication (Most Reliable, Most Time-Consuming):

    • This is the most accurate way to create a development copy, but it’s also the most labor-intensive.
    • Theme: Download your production theme and upload it to the development store.
    • Products: Use the built in product export/import. Be sure to check the imported products to ensure that all data is correct.
    • Collections: Manually recreate collections in your development store. This is tedious, but it ensures accuracy. Manually add the products to each collection.
    • Pages, Blogs, and Navigation: Manually recreate these elements.
    • Settings: Manually replicate store settings (shipping, taxes, etc.).
    • Apps: Reinstall and configure essential apps.
    • Metafields: If you use metafields heavily, manually recreate them or use an app that specifically handles metafield export/import.
    • Redirects: Manually recreate redirects.
    • Files: Manually download and reupload important files.
    • Domain: For development, use a .myshopify.com domain.
    • Payment Gateway: Setup a test payment gateway.
    • Advantages: Complete control, accuracy.
    • Disadvantages: Extremely time-consuming.

  2. Using the API (For Scripting and Automation):

    • If you’re comfortable with coding, you can use the Shopify Admin API to automate some of the replication process.
    • Write scripts to:
      • Fetch product data and create products in the development store.
      • Fetch collection data and create collections.
      • Fetch page and blog data and create pages and blogs.
      • Fetch metafield data and create metafields.
    • This is still time consuming to create the scripts, but can save time if you need to do this process many times.
    • Advantages: Automation, potentially faster than manual replication.
    • Disadvantages: Requires coding skills, still requires manual verification.

  3. Partner Account Development Stores:

    • If you are a Shopify Partner, you can create development stores.
    • These allow you to test themes and apps in a safe environment.
    • However, they don’t fully replicate a live store’s data.

Hoping my solution helps you solve your problem.

Best regards,

Richard | PageFly

3

Hi,

This is Richard at PageFly - Shopify Advanced Page Builder app.

You’re encountering a common challenge when customizing Shopify themes: overriding global elements (like the header menu) for a specific page. Here’s a breakdown of how you can achieve this with the Combine theme, focusing on best practices and flexibility:

Understanding the Challenge:

  • Global Header: The header.liquid file typically renders the main navigation menu for all pages.
  • Page-Specific Customization: You need to conditionally render your custom menu only on your designated page.
  • JSON Templates: Utilizing JSON templates allows for flexible page-specific configurations.

Solution Approach:

  1. Identify the Header Menu Rendering Logic:

    • Open your header.liquid file in the theme editor.
    • Locate the code that renders the main navigation menu. It will likely involve a for loop iterating through linklists.main-menu.links or a similar structure.

  2. Create a Page Handle or Unique Identifier:

    • Determine a unique identifier for your custom page. The most reliable method is to use the page handle.
    • To get the page handle, go to your admin panel, then online store > pages, then click on the page that you want to add the custom menu to. Then check the url, the last part of the url is the page handle.
    • Example: if the url is yourstore.myshopify.com/pages/custom-page, then the page handle is custom-page.

Hoping my solution helps you solve your problem.

Best regards,

Richard | PageFly