<aside> ⚒️ This is an opinionated guide on the ideal best practices to follow when building pages in Replo. Use it to help figure out what works best for your workflow and pages.

</aside>

General Guidelines

• [ ] YOU MUST export images at the appropriate resolution. When exporting images from Figma, ensure they are not blurry even at large sizes. If the images are blurry, request clearer images from the client.
• [ ] YOU MUST make sure your page is fully responsive. Your work must be responsive across all device sizes, not just the default ones shown for mobile, tablet, and desktop. Use the canvas resizing tool to check that every section behaves responsively.
  • [ ] YOU MUST ensure the page is responsive even at very large screen sizes (e.g., 2500px).
  • [ ] YOU MUST use the canvas resizing tool to ensure the page is responsive on Tablet Mode. While a design may not include a "Tablet" specification, it’s still essential that the Replo page is responsive across all screen sizes, including "Tablet". Here is an example of a page that did not meet these requirements.
• [ ] YOU CAN use work from previous projects to speed up your work. You can reuse old pages or layouts from other Replo projects (assuming you still have access to them), but make sure the copy and images are updated.
• [ ] YOU CAN use the section library to speed up your work. Click the “Browse” button in the top header to access the section library.
• [ ] YOU MUST use consistent values. Keep font sizes, margins, and padding values consistent. Ensure that left/right and top/down values match.

Fonts and Styling

• [ ] YOU MUST use consistent values. Keep font sizes, margin, and padding values consistent. Ensure that left/right and top/down values are matching when it makes sense.
• [ ] Make sure to always use the page and container level default fonts. The only exception to this is where a single child container has a different font style from its parent. Make sure to do a audit of the entire page you’re replicating before you start building it. This will inform how you should configure the font styles.
• [ ] Ensure that the font family of the page in Replo matches the exact same font used on the live page. This has to be true for every section of the page.

Containers

• [ ] YOU MUST name containers appropriately. Make sure ALL containers are properly named, and be sure to name top-level components with names like “Benefits Section” or “Hero Product”.

  • [ ] Do not include include brand information when naming layers.
  • [ ] Make sure to use generic names that are still informative of their corresponding section for top-level components.

• [ ] DO NOT use containers with only one container inside (aka nested containers). Nested containers can cause confusion around positioning and make it difficult to understand why certain components are arranged a certain way. There are rare exceptions to this rule.

  

• [ ] DO NOT use containers to create empty space. Instead, use gap, margin, or padding. Gap is preferred.

Products

• [ ] YOU MUST use the correct products, not placeholders. Confirm that the right products from the client’s Shopify store are used, as client designs may feature placeholder products that need to be replaced with the correct ones.
• [ ] YOU MUST use dynamic data, not hardcoded product information. If the designs include things like product titles, product description, quantity selected, etc you MUST use dynamic data attributes rather than hardcoding product data. You can read more about Dynamic Data here.
• [ ] YOU MUST ensure that products are in product containers. Products should be placed in product containers, and dynamic data should be used for as much content inside the product container as possible.

Layouts