Tools Used

Shopify: For store and product data management.

Replo: For visual development and page building.

Figma: For design specifications and asset exporting

Process Overview

- initialized a Shopify development store and configured the "Magic Box" product with its title, description, images, price, and variants.

- successfully connected the Shopify store to Replo and created a new page following the specified naming convention.

- built the page systematically, section by section, directly referencing the Figma design.

- applied styling by inspecting elements in Figma and translating their properties into Replo's style panel, creating reusable styles for consistency.

- established dynamic data connections, linking page elements like the product title and description, price, comparison price, variants, options directly to the live Shopify product data.

- Finally, I tested and adjusted the design across desktop, tablet, and mobile breakpoints to ensure full responsiveness.

Challenges & Professional Insights

-Image Gallery User Experience: While building the product details section, I identified a potential UX enhancement. The design features a main image with a vertical thumbnail gallery on the side. For an ideal user journey, selecting a color variant (e.g., "Red") should update all the thumbnails to show multiple different angles of that red product. The provided assets included one primary image per variant. To build the feature as designed while working within these constraints, I implemented the gallery to feature the single available image for the selected color. This was a practical exercise in developing from available assets while noting valuable opportunities for future UX improvements.

-Rresolved a challenge where the documentation for creating a dynamic "Product Box" was out of sync with the user interface. I discovered through experimentation that the correct method was to convert a standard Container, which reinforced my ability to adapt and problem-solve when encountering such discrepancies.

Conclusion

I successfully completed the project, delivering a functional and responsive landing page that accurately mirrors the Figma design.