Skip to main content

QA/QC checklist

This work is implment and extended further n the Shopify App Requirements and our experience in developing Shopify apps: https://shopify.dev/docs/apps/store/requirements

Impact Assessment:​

Should this feature/update affect previous customers?​

Determine if the new feature/update will affect existing customers and their workflows. Consider the potential implications for users who are already familiar with the app's functionality and may be impacted by changes.

For example, you release a new design for the FE widget. You should make it a template, or a design option for customer to choose for themselves. Never decide on behalf of customers what they want. Simply we have no rights.

What are the potential impacts on existing functionalities?​

Analyze potential changes or disruptions to current functionalities and user experiences. Consider how the introduction of new features or updates may interact with existing features and affect the overall user experience.

Design compliance​

Is this feature is following Shopify app design guideline?​

Ensure adherence to Shopify's design principles and UI/UX guidelines. Verify that the feature aligns with Shopify's recommended design patterns. and user interface conventions to provide a consistent user experience across the platform.

Does it maintain consistency with the overall Shopify UI/UX?​

Prioritize consistency in design even if it means sacrificing aesthetics for uniformity. Consistency in design elements and user interactions enhances usability and familiarity for users, facilitating easier navigation and understanding of the app's functionality.

It is better to be consistently ugly than inconsistently good looking. It is easier to address design issues in a consistently ugly app than in an inconsistently good looking app.

Security - Super Important​

Is this feature exposing any credetials to storefront?​

Evaluate whether the feature exposes sensitive information such as access tokens or other credentials to the storefront (via theme or meta field). Ensure that no confidential data is inadvertently exposed to unauthorized parties, as this could pose a significant security risk.

This action is forbidden. This is a very **important **. This is a very **important **. This is a very **important **

Are there any potential vulnerabilities in data handling? Like API without authentication.​

Assess the feature's data handling mechanisms for potential vulnerabilities, such as API endpoints lacking proper authentication or insecure data storage practices. Implement robust security measures to safeguard against data breaches and unauthorized access.

Is this feature showing protected customer data publicly? Like email, name, address?​

Evaluate if any sensitive customer information, such as email addresses, names, or addresses, is inadvertently displayed to the public or unauthorized users. Ensure compliance with Shopify's guidelines on protecting customer data and prevent any unauthorized access to private information.

Like if a review app like Air reviews, is it showing customer emails to storefront publicly which may allow other to crawl it easily.

We have agreed to Shopify Customer Protected Data, so we asked for approval accessing these information, we must not expose it: https://shopify.dev/docs/apps/store/data-protection/protected-customer-data

Performance​

Is this feature affecting storefront bundle size of our app? Does the bundle size increase?​

Measure the impact on the app's bundle size and optimize where possible. Implement techniques such as lazy loading, image compression, and code-splitting to minimize the bundle size and improve performance. Check for lazy-loading, image preloading, image compression, code-splitting for React component (React.lazy), CSS dynamic import, etc.

What is the impact on page load times? Use Pagespeed Insight.​

Utilize tools like Pagespeed Insight to quantify the effect on page load times and identify areas for optimization. Aim to improve the overall performance of the app to provide a seamless user experience.

View:https://shopify.dev/docs/apps/store/requirements#a-performance-score

Scalability​

What is the edge case of this feature? How many in volume can it handle?​

Determine the upper limit of the feature's scalability and ensure it meets expected demand. Even though we use Firebase Functions, a serverless platform, we will need to measure since if we use Shopify API, it comes with throttling, so we cannot serve infinite traffic.

Some other cases, with Shopify Metafield we cannot store as much as we want. Like with Size chart, we allow customer to store thousands of campaigns. Which made it unable to store on Shopify Meta field. We need to make sure that we are well aware of all limit: https://trello.com/c/y1HO4xOe

Is this feature gonna cost a lot in fee? How much would it be in small, mid, big and massive scenario?​

Estimate potential costs across different usage scenarios (small, mid, big, massive). See Firebase and Google Cloud Pitfalls

Compatibility:​

Is this causing CSS conflict?​

Check for conflicts with CSS styles of popular Shopify themes or some of these checklist:

  • Are we adding prefix to our CSS?
  • Are we using CSS variable instead of inline style.
  • Are we having CSS that making large impact like styling the p tag, body tag, or worst *. If we do, we need prefix.

Is this feature working well with OS 2.0 theme and Vintage theme?​

Test compatibility with Shopify's OS 2.0 theme and Vintage theme. Mostly if OS 2 approach working or not. In 2024, Vintage theme is deprecated and removed. So less care on this, it is something to bear in mind.

Best Practices and Shopify friendly approaches​

Is this approach ultilizing Shopify best practice for Approach?​

  • OS 2.0 (Embed block and App Block)
  • Meta field
  • Shopify Extension driven approach (Post-purchase, Checkout UI, etc)
  • Shopify Functions driven approach

API Usage​

Is this approach asking for any new scopes for Shopify API? Is it that necessary?​

Assess if additional API scopes are necessary for the feature's functionality. Minimize the scope of API access to only what is required for the feature, ensuring compliance with Shopify's API usage guidelines.

User Experience:​

Does previous customer need to perform any actions to use this feature? If do, should it work out of the box, or require a further step?​

Determine if users need to take any additional steps to use the feature and ensure a seamless user experience. Aim for intuitive usability and consider whether the feature should work out of the box or require additional setup steps.

Is the onboarding process intuitive for users?​

Streamline the onboarding process for new users to minimize friction and enhance user adoption. Provide clear instructions and guidance to facilitate a smooth transition for users.

Testing and Documentation:​

Is there comprehensive documentation for developers and users?​

Provide detailed documentation to assist both developers and end-users. Document the feature's functionality, usage instructions, and troubleshooting steps to support developers and ensure a positive user experience.

Are there clear rollback procedures in case of issues?​

Establish clear procedures for rolling back changes in case of emergencies. It is stated on the Go live procedure

Feedback Mechanism:​

Is there a mechanism in place to gather feedback from users?​

Implement feedback channels to collect user input and suggestions. Provide avenues for users to share their feedback and insights to inform future updates and improvements.

How will you address and incorporate user feedback for future updates?​

Outline strategies for incorporating user feedback into future iterations of the app. Establish a process for prioritizing and addressing user suggestions to enhance the app's functionality and user experience.

If it is noted in your backlog, it is recommended to keep a connection with customer who is expecting your feature improments.

Support​

Have the support team aware of this new update. If there a problem/question, what should it be about?​

Ensure that the support team is informed about the new update and equipped to handle related inquiries or issues. Anticipate potential user queries or issues and provide support resources accordingly.

Does we have Devzone functionality beforehand to fix potential issues?​

Just like Batman, always prepare a protocol for things that has not yet happen. It is best to anticipate what customer may encounter beforehand. Before a function in the devzone to fix it if it take place. For example:

  • If customers may have problems with OS 1, OS 2 theme conflicts with our app, have a button to fix it.
  • If customer failed to sync the data to app in the installation step, have a button to fix it.

It is about preparation over resolution.

Have I prepared extra logging for my app? Like in webhook, pubsub so when needed, I can easily trace it?​

View Error Handling best practices:

  • Implement robust error handling mechanisms to gracefully handle exceptions and edge cases.
  • Log errors and exceptions for debugging purposes, ensuring visibility into potential issues.
  • Monitor error logs regularly and prioritize resolution of recurring or critical errors.`