Shopify Theme Development
Rising Lotus migrates to Shopify 2.0 with a new custom theme
Rising Lotus is an activewear brand based in Hong Kong. The previous theme for Rising Lotus was built in 2020. Founded in 2016 by Vivien So, Rising Lotus continuously finds ways to put comfort first with designs that make the wearer feel good — both inside and out. Throughout the years, we’ve built a close-knit community filled with empowerment, confidence and positivity.
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.
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.
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.
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:
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.
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:
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.
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).
The previous theme relies on Advanced Product Descriptions, a third-party paid Shopify app (US$9.99/month) to display additional information about products:
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:
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.
Even though the previous theme uses an AJAX cart, there were few issues:
- 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.
- Rising Lotus has promotions throughout the year where automatic discounts are applied. However, any automatic discounts applied are not displayed in the cart.
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.
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.
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.
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.