Guides

Guidelines

Opinionated guidelines to follow

Suggest Edits

📘

What are the guidelines for?

While Custom Blocks enable you to build your own experiences, there are several things to consider to ensure your block is intuitive, easy to use, on brand, and compatible with a Tapcart app.

Design guidelines

  1. Bring your brand to your block, and apply familiar colors, fonts, and brand imagery.
  2. Interaction patterns of your block should mimic those used in modern mobile apps.
  3. Blocks should be responsive and look great on mobile.
  4. Blocks should be accessible, and should feature ADA complaint colors schemes & text sizes.

Click here to access a Figma file with detailed design guidelines

User experience guidelines

  1. Provide a concise & focussed user experience per block.
  2. It is important that a Custom Block can load as quickly as possible to provide the best experience to the user. Use loading states if the block requires more than 500ms second to load, and be mindful of users on slow networks.
  3. If a block requires user interaction, ensure it is clear to the user what it is they need to do (Press a button, swipe, enter text, etc).
  4. Custom Blocks should only provide navigational elements that allow the user to go forward/backward or to expand/contract content. There should be no use of navigational menus such as hamburger menus or bottom navigation bars.
  5. Do not accept payments within a block. Instead, use the addToCart app action to direct users to checkout through Tapcart.

Technical Implementation Guidelines

  1. Use the 'Import Libraries' dropdown in Block Settings to import any needed libraries. If the relevant resource isn't available there, you should manually import it in your HTML.
  2. If using Javascript, only basic Javascript is permitted currently (React is not currently supported).
  3. Any font links included directly in your source code will be removed automatically. Use the 'Import Fonts' dropdown to import any needed libraries.
  4. Avoid including sensitive values within your block such as private keys.
  5. Avoid setting a specific height or width on <body> or <html> tags, as block height is determined by block content and block width is determined by screen width.
  6. You should avoid using iFrames to accept any form of payment, and should additionally avoid iFraming an experience that contains its own navigation bar or footer, said differently, iFrames should render as components and not entire websites.

Updated 8 months ago