How to Build a Shopify Development Test Store
Every Shopify developer loves to have green field projects. These are stores that they get to build from scratch. There is little stress with modifying or adding new features, or configuring products and checkout flows. However, not every assignment is like this. Developers are more often tasked with updating an existing, active store. Every change they make potentially prevents sales which is unacceptable for clients. To avoid store outages or disabled features developers need to set up and use a Shopify Development Test Store when working on new and existing Shopify stores.
What are the Benefits of Creating a Development Test Store?
You would not wait until your company presentation to practice your speech or learn data structures and algorithms during a technical interview. Successful development comes from preparation and minimizing impacts on customers. This is why you need to set up a development test store.
When you create a development test store you create a safe sandbox environment to build, test, and complete your work. The most important part of this setup is to avoid production impacts. With this store you can add new product pages, change the cart checkout, or implement widgets for functionality without affecting end users.
I had a client who wanted to change their product data for a new theme they had never worked with. The new theme was implemented and the store was stable, but the new product records were not tested. My client wanted to test these product records by adding them to a live store. Even for quick checks, this could negatively impact the customer experience. I wanted a safer way to test these new product records, so I built a test store.
With a development test store, you are in complete control of product data variants as well as the look and functionality of the store. You can make as many changes and test as many data variants as you want without any customers being impacted. Test stores take time to build but are a liberating tool as you strive to meet your client’s requirements. Let’s talk about how to set up Shopify development test stores.
Step 1 — Download the Current Theme
There are two possible routes for downloading a theme for your development test store. If you are making adjustments to an existing client’s theme, you will need access to their store account to download their live theme.
If you are building a new store from scratch, or migrating an existing store to a new theme, you can get the theme files from the theme store. Verify with your client which theme they want before starting this process.
The first step to extending an existing store theme is to get developer access to the client’s Shopify account. This Shopify help article details how to work with a client to get collaborator access. Once you have access, log in and navigate to the Themes page within the Online Store subheading.
Here you can see the store’s active theme and a list of all other available themes:
If you are extending the current theme, you will want to download a copy of the theme to work within your test store. To do this, click on the ellipses next to the customize button and select the Download theme file button:
You will receive an email with a link to download your theme file. Clicking through the link will redirect you to Shopify where you will download a zip file with the requested theme files. Save this zip file somewhere you will remember for a later step.
For our second scenario, you are not extending a theme, but instead using a new theme. In this case, you will add a theme from the Theme Store.
Shopify offers several different free and paid themes. The default theme that ships with a new store, Dawn, is heavily used and modified. There are plenty of other themes to change the look and feel and support your store’s theme features.
To get to the theme store, navigate to the bottom of the Themes page and find the button that says Visit Themes Store. This will take you to the theme store page where you can browse hundreds of possible themes:
As a developer, you can download and work with free and paid themes for no charge. You will not have to pay to use these themes until you launch a live store. It is important to remind your client that choosing a paid theme will require them to pay whenever they want to start using their store.
Whenever we set up our test store, we will return to this themes page to add the theme to our environment. For now, all you need to know is this is where you would go to get new themes for a Shopify development test store.
Step 2 — Review Store’s Apps and Configurations
Now that we have a copy of the theme we want to develop against, we add the existing apps. If we’re only modifying theme code, why care about the apps we can not modify? Though you don’t write code for the apps the store uses, your code is impacted by the apps you have installed.
One of the most frustrating experiences I’ve had when developing in Shopify came when building a custom input form. The JavaScript and Liquid were very straightforward and I even added input validations and a character countdown to inform the user of character limits. This worked smoothly, but once I was ready to add my code, I could not remove the original input.
I combed through the template files and could not find a component or call for the component. I used the element inspector to watch for when the input was added to the DOM and used network requests to see calls made for the code. I knew that this input was not part of the theme, but was unaware of any apps already on the store. When I asked my client if she had ever modified the theme code she said no, but she had added an app for personalized product inputs.
Checking this app I found a single checkbox marked to add the input on the personalized product page. After I unchecked the checkbox, the text input disappeared from the form. Not looking at the app caused hours of headaches for a single-second fix. Don’t underestimate the effect of apps on your work.
To ensure our test store has the correct apps and configurations, go to the installed apps page under settings and record all the installed apps. Note if they are active or not and check the version of the app.
You have the what and where, but you still need to ensure that your test development store has the same configuration. Go to each app’s individual page and look through all configurations. Copy the configurations exactly as they are before moving to the next step. This may seem tedious but, ensures that your additions and changes will work the same in both stores.
Step 3 — Export Product Data
Before we review this step I would like to remind you that even as a contractor hired to fix or build in a store, you are still a guest within the store. Always ask for permission and clarify how you work with a client’s store before acting. The theme, product data, and all transaction data are the client’s property and should be respected.
A Shopify store without product data is just a marketing website. The product data allows a seller to display their items, inform the users of features, track sales, and fulfill orders. Without this data, it is very hard to verify that your changes will work as expected.
Your goal with this Shopify development test store is to get the store as close to the live store as possible. To accomplish this, you will add product records that mirror the live site. Once you get permission from the client to take product data off-site, you have two options for getting product data on your test store. You can manually set up products in the test store, or export and import a CSV of product data.
We will review a process for manually adding products to the test store in the next section. For now, we will focus on how to mass export products from an existing store. To start, we navigate to the store’s back end. From the back end or admin portal, select Products from the sidebar. This should pull up a page containing all active, draft, and archived products:
On this page, you can filter by product status and apply multiple sort filters. Apply the filters to get your desired items, or if you want to return all products you do not need to do anything. Once you have applied your desired sorting and filtering, click the Export button at the top right-hand corner:
By clicking this button you will see the following modal with multiple options for both which items to export and what type of file you want to export them in:
Select the options that apply to your desired output and save the downloaded CSV file somewhere to access it later.
Step 4 — Setup new Development Test Store
Now that we have all our theme files, app research, and product data, we are ready to create our test store. Navigate to your Shopify Partners dashboard and select the Store link on the left nav bar. In the upper right-hand corner of the screen, there will be a button that says Add store. Click on this and select Create development store:
Fill out the data about the development store you are building. For our purposes, we do not care about transferring ownership of the test store to our clients, but if you need to transfer the store later you will need to pay attention to the options that will prevent this transfer.
Now that we have set up our store, we will integrate our files and data. First, navigate to Online Store and Themes. You will be greeted with the latest version of the default Dawn theme, but this is not necessarily what we want. Instead, click the Add theme button in the Theme library section and click visit theme store if you are downloading a new theme. Navigate to the desired theme and add it to your themes.
If you are uploading a theme, select the Upload zip file option and find the zip file you downloaded earlier:
Once your theme is added, locate it on the Themes page and set it as the selected theme. Our theme is set up. Now we need to add and configure our apps.
Navigate to the app store by selecting Settings and Apps and sales channels. Here you can see your downloaded apps and access them to set app configurations. If you need to add apps you can visit the store by clicking the button Shopify App Store. You have your list of apps and configurations. Download all necessary apps and then set the configurations.
The final step for store setup is to import the data. Shopify exports its data as CSV with the idea of making it easy to import to other places. To import our products, select the Products page in the left nav bar. Once on the Products page, select the Import products button and locate your export CSV file with all your products:
If you did not export a CSV file of the products, then you will need to manually add all desired products. Open the products page on both your live store and test store and navigate to each desired product page. You will click the button Add product on your test store’s Products page and manually enter all information.
The test store may look a little different. There are no pictures for the marketing pages or the product pages. You added the theme files and the product data, but this does not include the image assets. If you need images to test the store, or you intend to use this store for long-term testing, you can add the image assets. However, I recommend adding only what you need as you do not want to spend too much time with work that does not help your client.
You now have a test store with the correct theme, all the desired product data, and the apps with the correct configuration. You have successfully set up a development test store to add new products, modify pages, and create new features.
