Shopify Theme Development

Delirio The Label launches a new online store on Shopify

Delirio The Label is a reusable mask brand based in Hong Kong. Delirio was using a theme bought from the Shopify Theme Store, so the features of the theme were not specific to Delirio as a brand — which meant that a lot of content that could be presented was no different from other stores. Our goal was to make the overall experience of browsing through the Delirio website much more user-friendly and informative, by building a fully custom Shopify theme from scratch, that was in line with their branding.

Testimonial

It was an absolute pleasure to work with the Expertime team! From sharing their expertise in upgrading the website, to tailoring the coding to our design needs, everything was done with utmost quality of execution, efficiency and professionalism. They went out their way to create outstanding results that absolutely went above my initial vision.

Expertime has been an absolute dream to work with, amazingly talented group of people that really knows what they’re doing. I can’t recommend them highly enough, thank you from the bottom of my heart for your amazing work.

Harriet Lam, the founder of Delirio The Label, wearing a face mask from the Magnifico collection in the shade Emerald.
Harriet Lam
Founder & CEO of Delirio The Label

Process

a flow diagram showing the process and the steps taken to build Delirio The Label

Solution

  • Area 1
    Product Display

    We merged colour variants into a single product, and added colour swatches on the product page enables users to switch between variants without leaving the page.

    We also added a feature that groups colour swatches into the regular colours, versus limited edition colours, so that all variant information is displayed.

    In addition, we implemented a product media filter so that product images displayed correspond to the selected variant, rather than displaying images for all the colours available.

  • Area 2
    Product Information

    Using Shopify 2.0's custom metafields, we implemented dynamic accordions on the product page to display additional information about products such as technical specifications, and shipping information. For example, crystal jewelries have accordions displaying Healing effects, while mask products have Care guides.

    Furthermore, we used metafields to create a feature that allows the client to link different size charts for different products. For instance, all mask products will have a mask size chart linked, while other products do not.

  • Area 3
    Shipping Information

    We created a custom page template that displays shipping rates in the form of a table, that the merchant can easily modify from the backend.

    This allows our client to easily add rows of different shipping rates to the shipping table, and categorise them into different shipping regions.

    All data rendered on the front-end is accessible, and meets the standards set by the Web Content Accessibility Guidelines (WCAG). This ensures that information presented in the table is accessible to all users.

Design

After defining the Information Architecture, and coming up with the sitemap, we used the wireframes along with the branding guidelines to design a User Interface for the mobile and desktop versions of the site. We ensured that the visual design aligned with Delirio The Label’s brand image.

Design Iterations

Final Design

Technology

This project focuses on recreating the entire store from scratch to include custom features such as animations that align with Delirio’s identity. We opted to use Shopify as the platform for which we created a theme from scratch. As Shopify is visually unopinionated, it gave us full flexibility to integrate creative elements and store-specific features.

In addition to complete freedom in the use elements of creative, Shopify also has a robust all-in-one back-end system that centralises all admin-related workflows such as order management, product management, user management, and email marketing.

the theme customizer showing the product page, and the customizable blocks on Shopify for the Delirio The Label Shopify theme

Integration

Since Delirio The Label was already using Shopify, we decided to build an entirely new Shopify theme, as Shopify has a robust backend management system. We used our base Shopify theme that we built in-house to use across Shopify projects, that ensures the following:

  • High Quality Code
  • Ease of use for the merchant through the use of dynamic theme sections
  • High Performance
  • Search Engine Optimization (SEO)

With the launch of Shopify 2.0, we integrated some of Shopify’s newest features such as metafields and app blocks. We used metafields to add additional information for products such as front/side views, product care section, and the our story sections for each product. In addition to the metafields, we used Shopify 2.0’s theme section app blocks to connect our client’s store to their instagram account to display an instagram feed on the home page.

Regarding the checkout, we selected Shopify’s Shop Pay as the primary payment gateway for our client, as Shop Pay lets users make purchases using any credit card.

Hong Kong18:14

20/F EMPRESS PLAZA
TSIM SHA TSUI, Hong Kong
PARIS12:14

80 bis avenue du Général Leclerc
78220 Viroflay
NANTES12:14

10 Rue Edouard Nignon
44300 Nantes
Menu