Shopify Web Design Workflow and Schedule

This article shares my time schedule for building a Shopify e-commerce website, including requirements confirmation, website content planning, web visual design, Shopify template selection, and Shopify app configuration. It breaks down the tasks and details of each stage(Last updated: 2022-10-09)

“Practical experience sharing, not just online information compilation.” – Irving

Hi there! I’m Irving Chen, a senior web designer. Let me quickly introduce my website development experience. I have several years of experience using WordPress for website building and web design, and in recent years, I have been focusing on Shopify e-commerce website design and development. I have a good understanding of the limitations and flexibility of these website platforms. For example, WordPress offers a high level of flexibility, allowing you to navigate the backend easily, modify page code, and utilize a wide range of templates and plugins to create a comprehensive digital presence for your website. If you have any website-related questions, feel free to fill out the contact form and leave a message or request. I will get back to you as soon as possible!

I have been making adjustments based on several projects at hand to establish a smooth SOP and plan for executing Shopify website “design,” and effectively applying them in online collaborative documents or files. I have created several template documents and software used, as follows:

  1. Shopify Website Timeline Sheet Template(Google Sheet)
  2. Shopify Website Project Template (Notion): Currently undergoing step-by-step optimization, please stay tuned!

Shopify Timeline Sheet

I have been making adjustments based on several projects at hand to identify a smooth SOP and plan for executing the design of a Shopify website. The diagram below outlines the basic steps and processes, but some stages can be parallelized. For example, basic Shopify setup can begin after purchasing a template, and it is advisable to start confirming payment gateway settings as early as possible (usually takes around one to one and a half months from application to completion). The overall timeline for website completion and launch is flexible based on actual requirements. (Pro tip: To expedite the website development process, opting for a powerful and well-designed Shopify template can significantly improve efficiency. For instance, using the Minimog Shopify Theme, which I have used in at least five websites, is user-friendly and highly recommended for reference.)

Shopify Timeline Template

Shopify Website Planning and Design

Shopify 網站規劃與設計 (Figma 模板)
  1. Brand Guideline: Includes basic elements such as logo, typography, color scheme, etc.
  2. Resource (Materials): Includes all the materials and images that will be used on the website.
  3. Requirement (List): Client’s requirements should be listed in a concise and powerful manner using a “list format”. Clear organization of requirements is crucial as it sets the foundation for smooth progress. Over-communication should never be a concern because of its paramount importance.
  4. Wireframe: I divide this into two stages. In the first stage, I quickly layout the content based on the available data and update it during discussions with the client. The second stage involves finalizing all the discussed outcomes and ideally incorporating the “complete copy” into the wireframe.
  5. Web Design: This is divided into the proposal stage and the final file stage.
  6. Shopify Theme: The selected template should be tested to identify any functional limitations. All strengths and limitations should be transparently discussed. Based on these limitations and requirements, suitable Shopify apps can be identified.
  7. Shopify App: Important Shopify apps used for critical testing and implementation steps should be documented. This not only helps with personal memory but also serves as an important file for team collaboration and handover. Recording the process using Figma is an efficient approach that saves time.
  8. SEO meta: Basic SEO meta settings and content strategy are crucial. For example, webpage title, meta descriptions, and preview can be preliminarily set based on keyword analysis. This is one of the factors affecting various SEO rankings, such as click-through rates on SERPs for specific keywords and brand image during social media previews. Many people tend to overlook or underestimate the importance of this aspect, but it requires careful consideration.
  9. Web Analytics: Website analytics tools should be set up. Essential installations include Google Analytics and Google Search Console. Additional tools such as Google Tag Manager can be considered based on specific needs. Paid options like Hotjar, CrazyEgg, and Mixpanel can also be used depending on the requirements and investment possibilities. A/B testing for webpages is also worth considering, and related functionalities are available for subscription on the Shopify App Store.
  10. Feedback (Testing): After the website is completed, testing and feedback are necessary. It’s important to gather feedback both before and after the official launch to ensure a good browsing and shopping experience for consumers.

Website Project Execution

After several years of creating dozens of websites for clients across various industries, we have developed and refined a website project execution workflow through collaboration, learning from past mistakes, and continuous improvement. This workflow enables individuals who are new to website design, including designers, developers, and clients, to gain a preliminary understanding of each executable step, reduce communication costs, and improve work efficiency.

Regardless of the platform used, the planning of website design process follows a similar structure, with the only difference being the platform-specific implementation. The diagram below illustrates the time schedule for designing a Shopify e-commerce website. Each stage is planned and adjusted flexibly based on actual requirements and circumstances, and the duration of each phase can be taken as a reference. By having a concept of “time required for execution” and “tasks,” it provides clarity for the team, clients, or project managers during the initial planning stage.

During the project execution process, there will be various challenges related to implementation, communication, and more. I will gradually share my experiences and commonly used digital tools to enhance the efficiency of discussions and collaboration between both parties. By utilizing different tool combinations for different scenarios, we can maximize the effectiveness of the project and this becomes particularly crucial during remote meetings. Remember to revisit this page regularly and bookmark it for future reference!


Importing PDF files into Miro, Figma, FigJam for viewing, note-taking, sharing, and collaboration.

How to export all pages of a PDF file for easy reading, quick note-taking, sharing, and even collaboration?


  1. PDF imported directly into Miro (as an image file)
  2. PDF imported directly into FigJam (with editable text)
  3. PDF imported into Figma through the PDF to Figma plugin (as an image file)

Utilize tools (using the free plan is sufficient, as it comes with limitations; for details on the limitations, please refer to the official website)

  1. Miro: Online collaborative whiteboard tools
  2. Figjam: Online collaborative whiteboard tools
  3. Figma: Online collaborative UI design tools, paired with Figma plugins – PDF to Figma

Use cases or scenarios

Sometimes clients or stakeholders provide me with their self-made PDF files for reference, which may include website page descriptions, detailed wireframe requirements, and so on. Especially when there are numerous pages and a significant amount of text, it becomes cumbersome to switch between design software and PDF files for viewing. It is more efficient to directly import the entire PDF into the design software for reading and editing.

However, in the past, I used to export PDF files as image files through Acrobat. Even when adjusting the resolution parameter to the highest level, the result was not as good as expected (it was still somewhat compressed?!). Alternatively, I would import the PDF into Photoshop or Illustrator and adjust the parameters before exporting, but this process was cumbersome and time-consuming.

Later on, using these three methods, I eliminated the long-standing pain I had been experiencing. It removed the small steps and provided a direct solution! Miro, FigJam, and Figma all allow quick login with a Google account, streamlining each step of the process to the maximum. Moreover, they allow note-taking while conducting online meetings and sharing screens, providing a seamless and enjoyable experience.

Note: If the other party provides a PowerPoint file, you can first use the built-in export function to export it as a PDF file.

Design and Marketing Tools

  • ActiveCampaign: Email marketing and newsletter system (the best alternative to MailChimp)
  • Canva: Online graphic design tool, a real lifesaver if you don’t have a designer on your team! It solves all your marketing, social media, graphic design, and presentation needs with a wide range of templates.
  • Envato Elements: Unlimited downloads of paid resources including images, videos, music, sound effects, graphic designs, illustrations, presentation templates, and more. This is a platform I frequently use for various materials.
  • GetResponse: All-in-one marketing platform that includes email marketing, landing page creation, marketing automation, and more. You can start with a free account and upgrade as needed. This software is similar to Hubspot.
  • PickFu: An online research tool that allows you to conduct tests, optimizations, and instant consumer surveys to replace guesswork. With PickFu, you can instantly gather opinions from up to 500 US consumers. By seeking collective wisdom, it helps you make better business decisions.
  • SurveySparrow: Omnichannel Experience Management Platform for conducting customer satisfaction surveys across various channels.
  • Qwary: A CX (Customer Experience) platform that helps businesses collect customer feedback and improve shopping experiences and product performance through beautifully designed professional surveys. It allows measurement of NPS, CSAT, and CES.
  • Opinion Stage: Create free quizzes, polls, and forms with visually appealing designs and good functionality. It also offers paid plans to increase the number of responses per month.
  • Typeform: Elegant online form builder.
  • UXPressia: Quickly create professional Customer Journey Maps, Personas, and Impact Maps with various ready-to-use templates.
  • Surfer: SEO tool primarily used by content editors. It offers AI-generated SEO copy, keyword recommendations, SEO audits, and a visually appealing interface.
  • CopyAI: An AI-powered copywriting generator that creates high-quality copy for your business.
  • ABtesting AI: Have you tried optimizing your website with AB testing? Try AI testing with a free plan available.
  • Frase: Use AI to assist in searching, writing, and optimizing SEO articles with ease.
  • AppSumo: One-time payment platform for discounted digital software (greatly reduces costs).
  • Tidio: Design a high-quality online chat tool for your website.
  • Help Scout: Online customer support platform (alternative to Zendesk).
  • HeySummit: Host virtual online summits.
  • SimplyBook: Online appointment scheduling system and app booking software.
  • Liinks: One-page multi-link website that integrates multiple social and official website links.
  • LearnWorlds: Create and sell online course websites.
  • Teachable: A platform for creating and selling online course websites.
  • Make: A visual automation workflow tool that allows data integration and seamless movement between various software applications, enhancing work efficiency.
  • Piktochart: An information chart design tool.
  • ClickMagick: While searching for AB testing tools, I came across ClickMagick, which offers this functionality. After watching introductions from other YouTubers and finding it user-friendly, I decided to give it a try.
  • MotionElements: A platform for professional video materials, templates, and plugins.
  • MotionVFX: A platform for professional video materials, templates, and plugins.
  • Payoneer: A secure and fast one-stop solution for cross-border payments.
  • Wise: A cross-border account for international payments and receipts.
  • Surfshark: I recently started using Surfshark VPN, and it’s been great! Originally, I wanted to browse certain foreign websites that automatically redirected me, but using a VPN solved this problem.
  • Firstory: The most comprehensive and powerful podcast hosting platform for platform deployment, sponsored subscriptions, and advertising revenue. It eliminates all the tedious publishing processes by automatically distributing your recorded audio files to platforms such as KKBOX, Apple Podcasts, Spotify, and Google Podcasts.
  • Continuously collecting and researching more…

If you have any questions, please feel free to fill out the form and leave a message or email me at You can also reach out to me through the Facebook or have a direct online chat. Let’s communicate and grow together! You can check out my web design portfolio to see my work. Join the Shopify website design and development learning community on the Line group to exchange ideas and learn together! However, please note that users in the United States cannot join the Taiwan Line group. Therefore, I have also created a Telegram community where valuable experiences from both platforms will be shared and organized. To further understand our services, you can add Irvinglab’s Line@ official account and leave a message for us.

Leave a Reply

Your email address will not be published.