Fix Shopify Mobile Page: Match Figma Design and Make Functional

IMPORTANT NOTE: THE WORK IS ALMOST FINISHED BUT NEEDS ADJUSTMENTS AS SOMEONE STARTED THE WORK AND LEFT IT UNFINISHED. IT JUST NEEDS TO BE COMPLETED.

YOU CAN SEE THE CURRENT MOBILE PREVIEW HERE: https://7vwtgyr3w2lwx1ho-70025052457.shopifypreview.com/products/the-starry-night-vincent-van-gogh

The provided Figma URL https://www.figma.com/design/rZCJ6oGbWXAXuPKG36uqM5/Art-%26-See-website-backup-2.0?node-id=82-15530&t=Ty4kteUtW2hGU08Z-1will serve as the visual reference for the mobile product page design.

The Current preview is broken and the design inconsistent with the figma file, and a lot of functionalities missing, your goal is going to be complete the job to meet my expectations.

---------------------------------
This was my original requirement:

Objective:
The objective is to convert the provided Figma design into a fully functional Shopify mobile product page. The mobile page should seamlessly integrate with the existing custom-developed desktop product page, ensuring that all visual elements and interactive features are fully operational and integrated with Shopify's backend system.

Deliverables:
A custom Shopify mobile product page optimized for mobile devices.

Implementation of all specified functionalities:
1. Image galleries
2. Product variants

Add-to-cart functionality
1. Bottom sheets / modals for additional information
2. Seamless integration with Shopify's features.
3. 100% functionality with complete integration with the backend.
4. Smooth animations and easy dismissal options for modals and bottom sheets displaying additional information (e.g., size guides, product details).
5. Floating Checkout positioned at the bottom of the screen.

Functional Requirements:
User Interface (UI) Implementation:
1. Accurately replicate the Figma design using Shopify's Liquid templating language, HTML, CSS, and JavaScript.
2. Ensure responsive design for various mobile screen sizes and orientations.
2. Maintain visual consistency with the existing desktop product page while optimizing for mobile viewing and interaction.

Product Information Display:
1. Implement a mobile-optimized product image gallery with swipe functionality.
2. Display product title, price, and description in a clear, easy-to-read format.
3. Show product variants (e.g., sizes, colors) with an intuitive selection interface.
4. Include product availability status and estimated shipping information.

Interactive Elements:
1. Develop a mobile-friendly add-to-cart button with clear visual feedback.
2. Implement bottom sheets / modals for displaying additional information (e.g., size guides, product details) with smooth animations and easy dismissal options.

Create expandable sections for product details, shipping information, or customer reviews.
1. Implement a dynamic Floating Checkout positioned at the bottom of the screen.

Shopify Integration:
1. Integrate with Shopify's product data, including variants, inventory, and pricing.
2. Implement dynamic updates for price and availability based on selected variants.
3. Ensure seamless integration with the shopping cart and checkout process.

Performance Optimization:
1. Implement lazy loading for product images to improve page load times.
2. Optimize all assets for fast mobile loading (target: under 2 seconds for initial load).

Cross-device Consistency:
1. Ensure that all product information and functionality available on the desktop version is accessible on the mobile version, potentially in a different layout or through expandable sections.

Non-Functional Requirements:
User Experience:
Ensure smooth scrolling and touch interactions throughout the page.
Implement intuitive navigation back to product listings or category pages.

SEO:
Maintain proper semantic HTML structure for SEO optimization.
Implement schema markup for product information.

Compatibility:
Ensure compatibility across major mobile browsers (Chrome, Safari, Firefox).
Test on various mobile devices to ensure consistent functionality and appearance.

Accessibility:
Implement proper ARIA labels and ensure the page is navigable via screen readers.
Maintain sufficient color contrast for readability.

The provided Figma URL:
https://www.figma.com/design/rZCJ6oGbWXAXuPKG36uqM5/Art-%26-See-website-backup-2.0?node-id=82-15530&t=Ty4kteUtW2hGU08Z-1
(will serve as the visual reference for the mobile product page design)

The developer should accurately translate the design into a functional Shopify page while ensuring all the specified requirements are met.