I’ve done many site design/dev on Wordpress but this is the first time doing it on Shopify. Can someone give me a high level overview of the process? Here’s the situation:
There is a existing Shopify site with 100% working appointment (it’s a service-based store) and payment system using 3rd party apps.
Redesign is only for re-theming the store using a commercial template. All apps and functionalities stay the same.
Obviously, whatever I do in the dev environment shouldn’t affect the live store.
Although the idea is the same, this is not a dev store transferred to the client once finished since the client already has a working Shopify store.
I want to replicate the existing store to create an independent copy (with functioning 3rd party apps), apply the new theme, make necessary changes, and push the new theme to replace the existing theme on the existing store.
Here’s a high-level overview of the process you can follow
1. Duplicate the Existing Store:
Create a duplicate of the existing Shopify store to serve as a development environment.
You can duplicate the store using the “Clone” feature within the Shopify admin or by creating a new development store. 2. Set up the Development Environment:
Install the selected commercial template in the development store.
Configure the theme settings and customize the appearance to match the desired design.
Replicate the existing site’s structure, including navigation menus, collections, and pages. 3. Test and Validate Functionality:
Ensure that all third-party apps used in the live store are installed and properly configured in the development store.
Test the functionality of each app, including the appointment and payment systems, to ensure they work correctly within the new theme.
Make any necessary adjustments or updates to align with the new design. 4. Migrate Customizations and Content:
Transfer any custom code modifications made in the live store to the development store’s theme files.
Migrate any custom content, such as images, blog posts, or product descriptions, to the development store. 5. Test and Review:
Thoroughly test the development store to ensure all functionality, including appointment booking and payments, is working as expected.
Review the overall design, layout, and responsiveness of the new theme across different devices and screen sizes. 6. Prepare for Launch:
Notify the client of the progress and schedule a convenient time for the transition to the new theme.
Make a backup of the live store, including the theme files, settings, and content, as a precautionary measure.
Hope this can help. Let us know if you need any further support.
Wow, this is great! Thank you so much for the detailed explanation!
One question. After the new site is ready to go, is it just a matter of just switching the dev version to become the live version? I apologize if it’s a trivial question.
Hi, it depends on your case.
Let’s assume you are doing your development in the development store. When you are done you have two choices.
You will by easy steps transfer the ownership to your client, delete the store password and you are done.
You want to transfer your work to the current client’s Shopify administration. In that case, you have to download the final theme form the dev store, load it to the client’s administration, and put it live. Important! You have to realize that all support work you did around the development must be finished again in the current client’s administration. Stuff like navigation, creating meta fields, importing media and pictures, and more.
