Suokko: wedding ring configurator integration
- App development
- Fashion and apparel
Team
Tech Lead, 2 Full Stack Developers, QA, Project
Manager, Account Manager
Technologies
Shopify Theme Liquid, HTML, CSS, SCSS, Native,
JavaScript (ES6+), Webpack, Ajax, API, Section
Rendering API, Storefront API, GraphQL,
Bitbucket
Time
2 months
The task
+75%
conversion rate
+100%
usability
+92%
code quality
Suokko is a Finnish family-owned business offering novelty watches and jewelry from renowned brands – necklaces, earrings, and rings, including wedding rings.
Previously, we developed and launched an app for the ring configurator for the Suokko store. This time we picked up and customized the Shopify theme to keep up with the modern requirements for the UX and the website’s loading speed.
After the Shopify 2.0 Store features upgrade, the client opted to change the store theme and chose the Dawn 2.0, one of the free themes offering Online 2.0 store functionality. However, this theme required improvement to fully fit the business goals of the client. And that’s where we stepped in.
As the client had no layouts, we gathered all the requirements and wishes of the client for the necessary changes. Based on these requirements, we created layouts using best practices and offered the most effective solutions based on our expertise.
Our team completely redesigned the navigation menu. There are now advanced font settings so that font sizes or special outlines can be changed without any hassle. Also, it became possible to customize the look of buttons, icons, and much more at the section and theme level. Thus, the customer can make the navigation structure more efficient and intuitive.
We minimized the footer to make it look clearer and more lightweight.
The subscription form is now positioned as a separate block on the homepage. We connected social networks to the website to display posts from them as a standalone block on the homepage.
In addition, we removed non-essential settings and moved contact information to the navigation menu.
The most significant change was to the product page.
We have carried out a feature to display product variants in stock as a separate button. Once you press it, a popup appears and shows the currently available variants.
Also, added dropdowns for choosing one.
Our team implemented the display of the diamond video in a specific popup and ensured that the third-party service’s video is responsive.
We’ve added sliders to the desktop – in a popup, and on a mobile device – a common slider. The images are displayed only for the selected product variant, in our case by color.
On the collections page, we added a download button instead of the default pagination. The filter buttons have also been redesigned.
The product grid section now includes a promotion block for informational purposes. A block’s settings allow you to set its background – a picture or a video, which collection it will appear in, or how many columns it will take up. It’s possible to add a link with text, adjust its height and width, and add a button. In this block, you can also include a Shop image button, which displays a list of featured products when clicked.
As we said above, contacts have been added to the navigation menu in a separate sidebar. When you click one of the communication methods, you will see the appropriate action – for example, a phone number, a form, or a chat will appear.
The registration and login forms now appear as separate sidebars without switching to another page.
The Ajax shopping cart was also not included in the theme, so we developed it as well.
In the end, our client got a unique, and flexible website that looks great on any device. Here’s what our client says about working with us:
For more details, the full review is available on our Clutch profile.