Shopify Custom Framing Configurator Tool

Development of Custom Frame Configurator for Shopify Integration Introduction We require the development of a custom frame configurator to be integrated into our Shopify store. The configurator should allow users to customize their frames in real-time, with dynamic previews reflecting the selected choices, and enable users to add their customized product to the cart for checkout. What we will provide: Pre-configured products: All frame products and variants will be pre-configured and ready to be incorporated into the configurator. Each frame will have various options like color, size, and material, which need to be configurable by the user. Test Shopify store: We will provide a test Shopify store where the configurator can be developed and tested. Product and configuration details: We will supply all necessary details for product cataloging and configuration, including descriptions, images, and pricing information for each variant. Key Features and Requirements: Dynamic Frame Preview: The page should open with default preset choices (e.g., default image, default support, etc.). A dynamic preview of the frame should be shown, which updates based on the user’s selections (image, dimensions, support, frame, passepartout, etc.). Image Selection: The user can upload their own image or choose from available images on the site. If an image is uploaded, the system should automatically switch to "Free proportions" mode for the dimensions. Dimension Selection (Numeric Input): Users can input custom width and height values (in cm), with limits (minimum 10x15 cm, maximum 140x140 cm). There should be quick selection buttons for standard formats (e.g., 3:2, 4:3, 16:9, A4), which will lock the dimensions according to the selected aspect ratio. The default mode should be "Free proportions" unless an image is uploaded. Support Selection: The user can choose between the following support options: Photo Paper (10€/m²) Canvas (20€/m²) No support (no print) The price should be calculated based on the selected support material (price per square meter). Outer Frame Selection: The outer frame will have a thickness of 4 cm and a price of 10€/m. The user can choose a color from a pill selector, filtering all available frame models in the chosen color. The price will be calculated based on the perimeter (length) of the selected frame. First Passepartout Selection: A numeric input for the dimensions of the first passepartout (minimum 2.5 cm, maximum 15 cm) for each side. The user can also choose the color of the passepartout via a pill selector. The price will be calculated based on the area of the passepartout (price per square meter). Second Passepartout Selection: This will function similarly to the first passepartout but will be optional and applied only if the first passepartout is selected. The price will be calculated based on the area of the second passepartout. Second Frame Selection (External to the Second Passepartout): Available only if the first frame is chosen with the required features to allow a second frame. This frame will have a thickness of 2 cm and a price of 5€/m. The user can select the color from a pill selector, which filters the models by color. The price will be calculated based on the perimeter of the second frame. Front Part Selection: Available options: Glass (15€/m²) Plexiglass (18€/m²) Mirror (20€/m²) None (0€) The price will be calculated based on the area of the front part, which depends on the frame dimensions (including the artwork, passepartout, etc.). Back Part Selection: Available options: Cardboard (15€/m²) MDF (18€/m²) Florentine Paper (20€/m²) The price will be calculated based on the area of the outer frame. For frames smaller than 20x30 cm, there will be options for back parts suitable for placing the frame on a surface. Hanging Hooks Selection: The user can choose between three fixed hook options. Each hook option will have a fixed price. Summary Box: A summary box should display all the selected options, showing a breakdown of the customized frame and the associated prices. Dynamic Price Calculation: The price should be dynamically updated based on the user’s selections (support, frame, passepartout, hooks, etc.). The pricing formula should include: Support + Outer Frame + First Passepartout + Second Passepartout + Second Frame + Front Part + Back Part + Hanging Hooks. Image Generation: The final product preview image (including all selected components) should be generated dynamically. The uploaded image should be cropped and adjusted according to the selected dimensions. A schematic with the product dimensions (including measurements) should also be generated dynamically. Responsive Design: The configurator should be fully responsive, adapting to various devices (desktop, tablet, mobile). Backend Management: A backend system should be provided for easy management of the configurator (products, prices, variants, etc.). The backend should allow easy updates for options, pricing, and images. The system should also track orders for customized products. Shopify Integration: The configurator should seamlessly integrate with Shopify for both order processing and product inventory management. Once the user finalizes their customization, they should be able to add the custom product to the cart and proceed to checkout through Shopify. Development Timeline: We estimate that the project will take approximately [X weeks] for development, testing, and integration with the Shopify store. Weekly meetings are requested to track progress and address any issues.