Skip to main content

Creating Docs

Creating high-quality, customer-facing documentation is essential for ensuring that users can successfully implement new features within their Shopify Plus stores. This guide provides a structured approach to crafting a document that explains how to integrate a new feature, with a focus on including screenshots for clarity. By following these instructions, you'll produce documentation that meets 10SQ's standard of excellence, aiding your clients in enhancing their eCommerce platforms.

Step 1: Planning​

  • Identify the Audience: Determine who will be reading the documentation (e.g., developers, store managers) to tailor the content appropriately.
  • Define the Scope: Clearly outline what features or processes the documentation will cover. Ensure it matches the needs of your audience.
  • Gather Information: Compile all necessary technical details, including code snippets, configuration settings, and prerequisites.

Step 2: Running the Documentation Dev Server​

  • Set Up the Environment:
  • Navigate to the docs directory with cd docs.
  • Run pnpm install to install dependencies.
  • Start the Dev Server:
  • Execute pnpm start to launch the documentation development server.
  • Navigate to http://localhost:3000

Step 3: Create Doc Structure​

  • Write a brief, step by step guide on how to complete a task. Collect screenshots along the way.
  • Provide ChatGPT with the brief, appended to the following prompt: Hello, I need assistance in converting the following technical steps into a high-level documentation suitable for our customer-facing platform. The steps involve integrating a new feature into a Shopify Plus store using our technical stack. Here are the steps:

Step 4: Create Document​

  • Create the markdown document within it's respective area, either merchant, or developer.
  • Review ChatGPT output, ensure it is correct. Then create the markdown file, appending screenshots along the way. Feel free to review how screenshots are implemented within: docs/docs/merchant/cart/cart-banner.md
  • Commit
  • Create a PR
  • There is no need to include screenshots, as our build system generates a documentation preview link.