Pixel-Perfect transfer of design from Figma to Shopify
Task Description:
The main goal is the complete implementation of unique blocks for the premium tabletop game online store Loomino. The task included the development of custom Liquid sections with identical compliance to the layout in Figma, complex product selection logic, and adaptation for mobile devices.
Key Stages and Technical Solutions:
Development of the FBT (Frequently Bought Together) Section:
Creation of a dynamic proposal block where users can select additional products using checkboxes.
Implementation of real-time total price recalculation on the client side (JavaScript) considering discounts.
Writing logic for adding multiple products (multiple variants) to the cart with one click via Shopify AJAX API.
Custom "Product Sets" Section:
Layout of product cards considering complex graphic elements (badges "Most Popular", "Best Value" with absolute positioning).
Implementation of interactive states: changing the background color of the card and lift effect on hover to enhance UX.
Setting up flexible fields in the schema (Schema settings) for customizing meta-data and descriptions directly through the theme editor.
"What's Inside" Section (Complex Adaptation):
Implementation of the desktop version with fixed positioning of elements to maintain the complex composition of the layout.
Deep optimization for mobile devices: restructuring the grid from absolute to flow (flexbox).
Resolving the issue of blurry images (thumbnails) on smartphones by accurately calculating proportions and prohibiting stretching to full screen, which preserved the clarity of the graphics.
Working with Styles and UI:
Strict adherence to the brand color palette (#D3C089, #FBF8EF).
Styling of control elements: custom rounded buttons (border-radius: 30px) and accent colors for checkboxes.
Result:
The client received fully functional sections, managed through the admin panel, that look identical to the design. The code is optimized, contains no unnecessary dependencies, and fully complies with Shopify Theme Check requirements.
Technology Stack:
Liquid, HTML5, CSS3 (BEM), JavaScript (Vanilla JS), Shopify AJAX API.
The main goal is the complete implementation of unique blocks for the premium tabletop game online store Loomino. The task included the development of custom Liquid sections with identical compliance to the layout in Figma, complex product selection logic, and adaptation for mobile devices.
Key Stages and Technical Solutions:
Development of the FBT (Frequently Bought Together) Section:
Creation of a dynamic proposal block where users can select additional products using checkboxes.
Implementation of real-time total price recalculation on the client side (JavaScript) considering discounts.
Writing logic for adding multiple products (multiple variants) to the cart with one click via Shopify AJAX API.
Custom "Product Sets" Section:
Layout of product cards considering complex graphic elements (badges "Most Popular", "Best Value" with absolute positioning).
Implementation of interactive states: changing the background color of the card and lift effect on hover to enhance UX.
Setting up flexible fields in the schema (Schema settings) for customizing meta-data and descriptions directly through the theme editor.
"What's Inside" Section (Complex Adaptation):
Implementation of the desktop version with fixed positioning of elements to maintain the complex composition of the layout.
Deep optimization for mobile devices: restructuring the grid from absolute to flow (flexbox).
Resolving the issue of blurry images (thumbnails) on smartphones by accurately calculating proportions and prohibiting stretching to full screen, which preserved the clarity of the graphics.
Working with Styles and UI:
Strict adherence to the brand color palette (#D3C089, #FBF8EF).
Styling of control elements: custom rounded buttons (border-radius: 30px) and accent colors for checkboxes.
Result:
The client received fully functional sections, managed through the admin panel, that look identical to the design. The code is optimized, contains no unnecessary dependencies, and fully complies with Shopify Theme Check requirements.
Technology Stack:
Liquid, HTML5, CSS3 (BEM), JavaScript (Vanilla JS), Shopify AJAX API.
 |
Oleksandr Rizenko
 Lozovaya 27 0
|
Available for hire
27 Safes completed
2 arbitrations
On the service 6 years
Offer work