Shopify product page customization

I’ve set up a blank Shopify development store and now need the mobile-first product page coded exactly to the Figma file I’ve shared:
https://drive.google.com/file/d/16BAGna-X-1vQJ1HHf04geQUiRZ55l5LZ/view?usp=sharing

You can download the file and re-upload it to Figma for easier inspection. The goal is a pixel-perfect recreation using Shopify theme sections and blocks so that:

• Product images and product variants remain fully dynamic—everything must be adjustable from the Shopify theme customizer without touching code.
• The build follows Shopify Online Store 2.0 best practices (Liquid, JSON templates, section schema).

Optional Challenge – HiSmile-style Variant Selector
Take a look at how HiSmile handles variants: https://int.hismileteeth.com/products/toothpaste
Selecting an option instantly swaps the URL and refreshes gallery, price, and content with zero page reload. In a short technical note, outline how you’d replicate this behaviour for another Shopify storefront (e.g., leveraging Section Rendering API, History API, metafields, etc.).

Deliverables
1. Theme files (sections, snippets, assets) installed on the dev store and ready to transfer.
2. A brief read-me covering any settings, metafields, or app hooks used.
3. For the optional challenge, your written approach to the no-reload variant selector.

After submission I’ll review within 24 h and, if everything looks solid, we’ll hop on a quick call to discuss onboarding. Looking forward to seeing your approach.