Product page template for ecommerce

the works for the product page are: Product hero section: Product gallery: 1) Dynamic variation images: linked to the product variations. - One main image container on the left with layered product builder (for the 2 variants). Buy box: Summary: I want a two-step bundle builder where the image changes when a case is selected and again when a refill is selected, showing the final product combination before adding to cart. Container 1: top description 1) Product title 2) Sub-title 3) Tag 1 4) Ratings & reviews 5) Mini product description 6) Benefit points 7) Prices box Container 2: choose your case Purpose: allow customers to select a deodorant case before proceeding to refill selection. 1) Case selection variants: Display available case colours as selectable cards. Each card contains: - Case colour name - Case image - “Add button” Interaction: When a customer selects a case: - The main product image updates to the selected colour. - On the selected colour, a container will display above the variation cards. Inside the container it will show the selected colour name and small text description. - After a case is selected, you can click on the “add” button and selected the quantities. You can also select other cases. 2) Engraving option (optional add-on) Add engraving container: Displays below the case selection. Contains: - Selected case image - Selected case name - “add engraving” button Engraving pop-up model: When “add engraving” is clicked, open a modal. Modal content: display - Selected case image - Selected case name Text input requirements: - Maximum 10 characters - Live character counter (maybe) Display clickable options such as: - Common emojis and signs - Selecting an icon inserts it into the engraving text field When customer clicks “done” on pop-up modal: - Modal is closed - Save engraving selection - Update product configuration - Display engraving summary beneath the add engraving section. Container 3: choose your refill Purpose: allow customers to select one or more refill scents and view scent details before adding them to their bundle 1. Refill variant selection: refill variant cards Displays all available refill scents as selectable cards. Each card contains: - Refill image - Scent name - Add button Refill information display - When a refill scent is selected, display a scent information container abotve the refill cards. Information container layout: - Top left – scent name. example: coconut & vanilla - Top right – mood/feeling. example: relaxing & warm - Bottom section – scent description. example: a smooth blend of creamy coconut and sweet vanilla, creating a comfortable tropical fragrance. Interaction: When a different refill scent is selected: - The information container updates instantly. - The scent name changes - The mood/feeling changes - The scent description changes - The selected refill card receives and active state Add refill functionality: Each refill card contains an add button. When clicked: - The refill is added to the customers bundle - Quantity updates automatically - Bundle price recalculates - Visual confirmation is displayed Refill pricing section: - this is displayed beneath the refill variants. - Pricing introduction containers: a small information banner explaining refill savings. Display three separate pricing boxes: - Tier 1: 1 refill, £0.00 each - Tier 2: 2 refills, £0.00 each save 5% - Tier 3: 3+ refills, £0.00 each save 15 % (best value) Interaction rules: as refills are added: - If 1 refill selected. Active price tier: £6.95 - If 2 refills selected. Active price tier: £0.00 save 5% on each - If 3+ refills selected. Active price ties: £0.00 save 15% on each refill Container 4: purchase options Purpose: allow customers to choose between a one-time purchase or a subscription plan before adding their bundle to cart 1. Purchase type selection: display two selectable purchase options. Option A: One-time purchase Option B: subscribe & save - Subscription frequency selector. dropdown box: - every 1 month, 2 months, months, 4 months, six months - Supporting text: change, pause or cancel your subscription at any time. - Large add to cart button Benefits & delivery information reviews and ratings, etc. similar to this product page in functionalities: https://wearewild.com/products/deodorant?selections=VEVmUVdsYXhUTXVKZTNIWG9yeVJaQX58WXJ3QXE0c3ZTZ3lURzhHNU82dGQtQXxzOjEy also the next next milestones would be, checkout, cart. right side pop-up cart, my account and thank you page. is this something you are interested in or can do? thank you