Shopify Strategy


A Step by Step Shopify Development Plan

By David Conforti

The E-commerce world is confusing and it can be tough to know where to turn for advice. We have scaled Shopify businesses from 0 to millions of dollars in sales using these strategies. Read on!

How to start:


Now you’ve decided to use Shopify for your e-commerce business. Great call: of all the e-commerce platforms out there, Shopify is by far the most robust and promising ecosystem to be a part of with great plugins for subscriptions, customer support, analytics, and more. With Shopify you can create some rockstar stores like these:


First things first - let’s evaluate your starting point: Is this a new product or store? Are you migrating from a different platform? Do you have sales? What is the current painpoint either you or your customers are experiencing? Do you have data to back it up?

If you are launching a site from scratch, a surefire strategy is to follow conversion best practices, keep the site simple and easy to use, and start to gather data to refine your user journeys with. If you have existing customers, it's important to dive into the conversion data to see where users are getting lost or abandoning their carts. Regardless of if you are starting a site from scratch or have done millions of dollars in sales, this is a great 9 step framework for formulating a Shopify development plan:

Step 1: Identify your audience
Step 2: Conduct a competitive analysis
Step 3: Craft functional requirements
Step 4: Wireframe the site (spend more time upfront planning... your timeline and budget will thank you)
Step 5: User interface design
Step 6: Development :)
Step 7: QA, testing, launch
Step 8: Monitor and maintain
Step 9: Conversion rate optimization


Here's a behind the scenes look

Step 1

Audience. Let's dissect your audience demographics. Are they 18-24 years old in metropolitan areas or are they 28-35 in more suburban areas? Do they land on your page from an Instagram ad and thus are usually on mobile? Or is this a product that people are searching for while at their computers?

These factors will play a large role in how the site is laid out, the design approach, and conversion rate tactics used. For sites that users are primarily accessing on their phone, poor mobile optimization is the #1 reason for poor conversion rates and high abandoned carts. Being thoughtful and decisive about who you speaking to with your site is paramount in the early stages of the project.

Step 2

Competitive Analysis. Who are your competitors and what are they doing? Chances are they have put a fair amount of research into their store. Use their work as a jumping off point. Competitors provide a great resource for general aesthetic of a site, interesting features, and conversion rate tactics.

For instance, some stores may include a cool Call to Action button, Free Shipping incentives in the cart, or a helpful quiz to help customers find the rigth product for them, like sipsetter. speaking to with your site is paramount in the early stages of the project.

This is our wireframing process to help us get a sense of layout and features

Step 3

Craft functional requirements. Like anything, it's much easier to attack a project with a plan. This step is where we put together the research we did in Step 2 into a document that spells out what we would like the site to accomplish.

If your customers are coming from social ads or mostly purchasing on their phone, let's consider a mobile-first design. Implementing a collection page is a great way to give potential customers an overview of your products. If the target audience is younger, consider using Klaviyo to harness the power of SMS marketing as opposed to just email. Subscriptions are a great way to increase recurring revenue and keep consumers engaged with your product - we can use Recharge for that. This is a great starting point for most sites. If your company is a bit bigger, consider Glew for super granular analytics.

Step 4

Wireframing. Begin the wireframing process. Now we dive into Figma to start our low-fidelity wireframes. Wireframing is the process of blocking out our pages and layouts without adding too much detail. This allows you to visualize sitemaps and general page structure in a time efficient way.

For example, on the home page we would show the hero section, a mini collection section, a section for product recommendations, etc. With this all laid out we can go ahead start the beautification process in UI design.

This "Complete the look" module is a great way to increase average order value

Step 5

User Interface design. Armed with a full prototype we march ahead into design. Using brand guidelines, assets, and an aesthetic direction we set out to make the site a true work for art.

We utilize Figma’s prototype tool so that you can see the designs in action and gather user feedback before we even move into development. Everyone is eager to jump into development, but its crucial to not leave design until the visual assets, copy, and sitemap are totally finalized and agreed upon by all stakeholders.

See? Just a bit prettier than the wireframes

Step 6

Development.The development process is a straightforward, but time consuming process so stay patient! An enterprise level implementation can take as long as 6+ months. For smaller sites, you should budget at least 2 months of pure development work.

The good news is that with all the leg work we have done up front, there should be no questions left when we move into development. This allows us to be heads down and focused on our goal.

Step 7

QA, testing, and launch. Time to test! When the site is finally ready to test on the Shopify development environment, stakeholders should review the work and align on launch date.

As is common with large scale projects, timelines can get delayed so make sure to budget enough time and resources for these projects. You will see the returns come busy season.

Step 8

Monitor and maintain. Congratulations! Your site is live. Now it is time to start generating revenue, making sure any bugs that arise are squished quickly, and monitoring how users are interacting with the site.

Hotjar is a great tool for tracking heatmaps, user journeys, and pain points on the site. This will let you know exactly where users abandon their carts, get lost, or are willing to be upsold.

Hot jar let's us see exactly how users are interacting with our site and where they get confused

Step 9

Conversion rate optimization. Now that customers are using your site, let's work on making the site the best it can be. Every site is different in ways it can increase it conversion rate, but there are a few staples that always work.

Suggested products that curate a "for you" selection for each customer are a great way to serve repeat customers with exactly what they are looking for. Nosto is an app that allows you to easily incorporate this in your shop.
Another strategy is to offer a free shipping threshold... because who doesn't love free shipping?! This tracking bar will pop up when a customer adds a product to their cart saying, "$10 more dollars until free shipping!". Works like a charm.

Offering free shipping, bundle discounts, or a subscription service is a surefire way to increase conversions

So there you have it! All of the steps to design, develop, and optimize a Shopify store. It is a tough but rewarding process and here at Varfaj, we have a lot of fun with it. Feel free to fill out our application for a free Shopify Audit with our Shopify Director below!


Elevate your business.