Rising Lotus migrates to Shopify 2.0 with a new custom theme

Header

Cart item count

The previous theme did not display the cart item count in the header. To fix this issue, we added a functionality that displays a small cart bubble icon with the number of items in the cart.

Mega menu

In the previous theme, the mega menu would appear if the link had any second or third-level menu links.

The client needed a functionality that:

• displayed mega menus only for specific primary navigation links
• display an image thumbnail next to each link within the mega menu

To solve this problem, we created a theme section for the header that allows the client to add a mega menu for any primary link by specifying the title of the primary link (e.g. Shop in this case), and dynamically update the featured content. Once a mega menu is added to a primary link, the second-level and third-level navigation menus set up in the Shopify admin are displayed in the mega menu. We also developed the mega menu so that a thumbnail snippet specific to the link is dynamically displayed — which can be updated by the client.

Instagram feed

Problems

The instagram section on the previous theme were not dynamic; each image that was to be featured had to be manually uploaded into the theme and linked to Instagram. The section was limited to only displaying images, and no videos could be shown.

Solutions

To fix this issue, we recreated the entire section — using Instagram’s Basic Display API to dynamically get the first four posts from the Rising Lotus Instagram, including videos. We then developed a custom Instagram section to display those posts in the format of a marquee:

Collection page

Problems

The previous theme did not have a proper product filtering system that allows users to filter by stock, colours, sizes, price, and other features. The previous theme filters were based on tags and limited to sub-categories. For example, the bottoms collection could only be filtered into shorts and leggings — using product tags.

Solutions

With Online Store 2.0 features, we implemented a more intricate storefront product filtering section on the collection and search results pages — that lets customers filter products at variant levels such as colours, sizes, availability.

When filters are applied — such as colour filters, the product cards will display the product image in the corresponding colours:

Product page

Problems

Add to cart form

In the previous theme, the user needs to click on both the colour and size options to find out whether the variant is available. As a result, this increases user frustration as it increases the user’s interaction cost to identify whether a selected variant is sold out.

Furthermore, when a colour option is selected, it may not be obvious for users with visual impairments which colour is selected. The name of the selected colour is also not displayed anywhere except in the cart — so the user would have to add the product to their cart to know the name of the colour.

Upselling

To increase conversion rate, any upselling content was only shown in the checkout section. The upselling section also relies on a third-party app, One Click Upsell – Zipify OCU, third-party app (US$35/month).

Product information

The previous theme relies on Advanced Product Descriptions, a third-party paid Shopify app (US$9.99/month) to display additional information about products:

Solutions

To reduce the interaction cost of a user, when the user selects a colour variant, the size variants of that colour that are unavailable are instantly displayed.

To improve accessibility, we also added a functionality to display the name of the selected colour next to the Color label. We implemented a custom functionality for the store that allows the clients to link products to each other at a variant level. For instance, the Macrame Bra is linked to the Macrame Leggings. When a colour is selected, the leggings upsell block will be shown in the matching colour.

Rather than relying on third-party applications, we developed theme blocks that integrated with the Online Store 2.0 custom metafields so that the client can add unique product information for each product.

In addition to displaying regular text content, we also integrated a block to dynamically display product features with icons:

Cart

For Rising Lotus, we decided to use an AJAX cart as the previous site did so that users would not be redirected to the cart page, and can view contents of their cart from any page across the site.

Problems

Even though the previous theme uses an AJAX cart, there were few issues:

1. Since the cart takes up the full height of the viewport height, the checkout remains at the bottom right — exactly where the Chat with us button appears. As a result, the Chat with us button partially blocks the Checkout button.
2. Rising Lotus has promotions throughout the year where automatic discounts are applied. However, any automatic discounts applied are not displayed in the cart.

Solution

The new designs provided by Rising Lotus consists of a horizontal AJAX cart that slides down. We developed it so that it would never take up the full viewport height — to ensure that the checkout button was not hidden incase a live chat app is integrated.

In addition, we implemented a functionality that displays any automatic discount applied within the cart. For example, the code RLNEW50 is displayed below the line items for which it is applied to.

Size guide

Rising Lotus’ size guide page consists of two types of table data: size conversion charts and size measurement charts.

The size conversion charts help users who already know their clothing size in a specific format to convert it to equivalent Rising Lotus size, whereas the size measurement chart helps users find their clothing size using a measurement tape.

Problem

Previously, the size charts on the size guide page were entirely hardcoded. In case of any changes to the sizing of Rising Lotus clothings, the data in the table could only be updated by a developer. In addition, the size conversion charts were limited to showing conversions only for Australia and Europe for sports bras, and Australia, US and EU for Leggings.

In addition, even though each chart had a heading — the code failed to meet the Success Criterion.

Solution

The new size guide page is built so that it is fully dynamic, and allows the client to update the values in the table data anytime in the theme customizer.

Captions & Summary

Captions and summaries refer to table headings that provide additional information about what is presented in the table. To ensure that the size guide page meets the standards set by the Web Content Accessibility Guidelines (WCAG), we added an input settings so that in addition to each table having captions and summaries, the client is also able to update those table descriptions at any given time.

Sports bra size chart

Since bra sizes consist of a band size and cup size, we created three input settings for bra sizes. The client can then add as many rows to the Bra Size Conversion Chart as they want and only need to specify the US size.

The size specified then gets converted to the equivalent French, International, Italian, and Australian sizes.