For our team’s project, we need to implement a client facing Tetris-like design feature for developing custom roof rack configurations. The client is already using a Shopify storefront so it was prioritized that this feature be compatible with Shopify. This has lead to many challenges and dead-ends.
The team has decided that the react library, react-grid-layout, is a great library for our needs. However, inserting custom react components into the Shopify storefront is challenging. Currently our best workaround is a Hydrogen, a react based Shopify stack. The hydrogen storefront works with the existing Shopify storefront in parallel, can host the custom react components embedded directly into the proxy store, and can host a database in Oxygen if need be.
Hydrogen allows us to build a custom react based Shopify storefront, we plan to embed our react app, using the react-grid-library, into. The hydrogen store will be connect to the existing Shopify store through the Shopify API and have access to the existing products and information. The team will also need to develop a Shopify App that is admin facing so that the client can easily add or edit the product information for the Hydrogen store, so that dimensions can be displayed in the react app accurately.
Due to the fast nature of the course and project, we don’t really have alternatives because they have already lead to dead ends. This is the best working approach we have so far and will be the option we pursue as along as possible.
Due to the size of the products we are customizing and the precision for object placement by the client, the current UI will most likely end up using scroll bars to see the entire image. This is not optimal for UX but may be a development point we concede for the sake of progress. Due to the scroll bar design, we will also be prevented from placing the library of design elements on the left or right hand side, which also was my preference for the placement. Again, design concession for the sake of progress.
The has been delayed on development due to the extensive research we had to put in on compatible Shopify integrations. We think we found what will work and have already made progress towards out MVP.
