Responsive Design for a Jewelry Online Store on WordPress
A Ukrainian brand of handmade designer jewelry needed a non-standard online store to present collections, individual products, a gallery, and prepare the layout for further WordPress integration.
=== MY TASK ===
To prepare responsive, cross-browser, and interactive layout based on the Figma design for further handoff to the WordPress developer.
=== WHAT WAS DONE ===
• developed the layout for the main website pages: Home, Collection, Collection slug, Product, Single object, Gallery, Static page;
• implemented responsive layout for desktop, tablet, and mobile;
• prepared the layout with future WordPress integration in mind;
• implemented frontend logic for interactive elements;
• developed and configured a custom cart;
• implemented validation for the cart and checkout;
• implemented sliders, animations, and interactive blocks;
• prepared a non-standard product grid;
• implemented animated banners for collection pages;
• optimized the layout so the static version had green scores in Google Speed Test.
=== PROJECT FEATURES ===
The main feature of the project was its non-standard design approach to an online store. It was not a typical e-commerce template, but a visually expressive website for handmade jewelry with custom grids, animations, and separate display logic for collections.
The collection page was especially challenging. On desktop, it was implemented as a full-screen vertical slider with scroll-based interaction and animated appearance of banner elements. On mobile, the same logic was adapted into a different UX format: a horizontal image slider with the description placed below it.
The custom cart and checkout layout were also implemented separately, including field validation.
=== RESULT ===
The client received a responsive working layout of all main online store pages with ready frontend functionality for further WordPress integration.
The layout preserved the unique visual concept of the design, worked correctly across different devices, and was prepared for handoff to the WordPress developer.
=== TECHNOLOGIES ===
HTML5, SCSS, JavaScript, jQuery, BEM, Animate.css, Slick.js, WordPress-ready layout, Gulp
#layout #responsiveLayout #HTML #SCSS #JavaScript #jQuery #WordPress #Figma #PixelPerfect #BEM #Gulp #onlineStore #eCommerce #jewelryBrand #handmadeJewelry #SlickJS
=== MY TASK ===
To prepare responsive, cross-browser, and interactive layout based on the Figma design for further handoff to the WordPress developer.
=== WHAT WAS DONE ===
• developed the layout for the main website pages: Home, Collection, Collection slug, Product, Single object, Gallery, Static page;
• implemented responsive layout for desktop, tablet, and mobile;
• prepared the layout with future WordPress integration in mind;
• implemented frontend logic for interactive elements;
• developed and configured a custom cart;
• implemented validation for the cart and checkout;
• implemented sliders, animations, and interactive blocks;
• prepared a non-standard product grid;
• implemented animated banners for collection pages;
• optimized the layout so the static version had green scores in Google Speed Test.
=== PROJECT FEATURES ===
The main feature of the project was its non-standard design approach to an online store. It was not a typical e-commerce template, but a visually expressive website for handmade jewelry with custom grids, animations, and separate display logic for collections.
The collection page was especially challenging. On desktop, it was implemented as a full-screen vertical slider with scroll-based interaction and animated appearance of banner elements. On mobile, the same logic was adapted into a different UX format: a horizontal image slider with the description placed below it.
The custom cart and checkout layout were also implemented separately, including field validation.
=== RESULT ===
The client received a responsive working layout of all main online store pages with ready frontend functionality for further WordPress integration.
The layout preserved the unique visual concept of the design, worked correctly across different devices, and was prepared for handoff to the WordPress developer.
=== TECHNOLOGIES ===
HTML5, SCSS, JavaScript, jQuery, BEM, Animate.css, Slick.js, WordPress-ready layout, Gulp
#layout #responsiveLayout #HTML #SCSS #JavaScript #jQuery #WordPress #Figma #PixelPerfect #BEM #Gulp #onlineStore #eCommerce #jewelryBrand #handmadeJewelry #SlickJS
Kharkiv 
Available for hire