Crystal Clear Memories Shopify Plus Store

Desktop view

Overview

Shopify Plus Store which offers an improved user experience, streamlined functionality and enhanced visual aesthetics, ultimately contributing to increased customer satisfaction and engagement by investing time and effort into reworking metafields, conducting A/B testing for the homepage banner, and resolving responsiveness and cross-browser issues.

The Task

The owner of the existing website built on the Shopify Plus Plan recognized the need for enhancements and sought to incorporate custom features, such as an announcement bar, to enrich the customer experience and provide additional opportunities.

Furthermore, the owner believed that a thorough review of the Shopify store structure and theme was necessary to ensure optimal principles were applied. This included creating proper templates for future pages and revamping the liquid files to enable more flexible customization through the Customize editor.

There were also concerns regarding the usage of metafields by the previous developer, specifically in relation to variations, prompting a search for improved approaches and best practices in implementing metafields.

Client also flagged issues with custom shipping rates app developed by a previous developer.

Deliverables

Completion date: 06/04/2023

Delivery Rates Custom Application

  1. A Condition Logic was added: if the client wants to display information according to a certain criterion, i.e. if there is a Rush Shipping delivery method in the delivery types, and the delivery date is subject to certain criteria, then display certain information, otherwise display other information. Example [[ if rates.name = = “Rush Shipping” | delivery_date < 2022-12-25 ]] Arrives before Christmas to [[ address.state ]]! [[ else ]] Christmas delivery to [[ address.state ]] not guaranteed. [[ endif ]] Added support for formatting dates with [[ rates.name == “Value Shipping” | delivery_date.date | format: “format” ]]
  2. A Condition Template has been created for the Announcement bar that works with the API and allows you to output the return from the api based on criteria to the client, if he wants to output information from a variable specifying its name or search criteria, [[ FieldName ]]
  3. Laravel Framework has been used for this custom App which connects with Shopify Store through GraphQL API.

UI/UX Improvements

  1. In order to meet the specific needs of the store, a thorough investigation and rework of the metafields usage were conducted. This ensured that the metafields were implemented in a manner that aligned with the store’s requirements and provided the necessary flexibility for managing product variations effectively.
  2. The banner on the homepage “Build your perfect 3d crystal” was A/B tested after its redesign by a 3rd party vendor in order to define which option is the most pleasant for the user’s eye. Through this testing process, valuable insights were gained to identify the option that resonated the most with users and enhanced the overall appeal of the website.
  3. To guarantee a seamless experience across different devices and browsers, a comprehensive effort was made to address any responsiveness and cross-browser compatibility issues. By thoroughly testing and resolving these issues, the website now ensures consistent functionality and visual appeal, regardless of the device or browser used by visitors.

Related Services