We helped SugarlashPRO implement new designs on their existing Shopify Plus Store.
SugarlashPRO's team reached out to us to implement the complete redesign of every page on their website.
The previous design of SugarlashPRO had very limited options for adding images or text and most of the elements were hard-coded by their developers.
When we started implementing their designs, our goal was to provide them with as many options we could to simplify addition of content on their Shopify store.
For us it's important to provide options to our Shopify and Shopify Plus clients so that they can make simple changes themselves rather than contacting us all the time.
The Process
Here are some of the key functionalities we implemented:
1.) Different desktop & mobile experience for product pages
SugarlashPRO's team designed mobile and desktop versions of product pages differently.
The desktop version is quite similar to many other sites with functionality and layout including two column layout with images & product info, variants as buttons/swatches and quantity as buttons to choose the qty from 1-8 and last but not the least, accordion function for description of the product.
Each product page features a full width image that's different for every product type. We created a section for them to be able to easily add images based on the product type right through the editor.
But when you look at mobile, the design changes to incorporate touch functionality and ease of browsing of the product pages. As you can see from the image, the product form containing the variants, quantity and buy button is hidden & only displays when the floating button "Select Options" is clicked.
Instead of "Select Options", "Buy Button" is displayed when there's only one variant.
2.) Homepage Sections
The redesign included custom sections that would display different images on desktop & mobile. So, we added this functionality in all of the sections containing images so that their team is able to add different images optimised for mobile and desktop.
Even though mobile images are hidden on desktop and vice versa, the mobile images aren't loaded when accessing from the desktop. This is to ensure that the page load speed is not affected both on desktop and mobile.
We suggested this to our another Shopify Plus store client Onia as well and implemented the functionality to display mobile optimised images on mobile & desktop.
3.) Custom Mega Menus
SugarlashPRO wanted to implement 2 styles of dropdown menu. The first mega menu is used to display all of the important links under the categories they want their customer to find.
The second mega menu is used to display primarily images in a grid format.
On mobile, only the links are displayed and the images gets hidden. The links are added using the inbuilt navigation functionality and the images are added through the editor. This makes it quite easy for their team to add links & images.
4.) Custom events, blog, about, contact and several other pages.
Since all the pages had to be redesigned, we added sections from homepage to include full width image section, text over image section, rich text section, custom blocks of images & text section for content to be added.
Pages only allows static sections to be added but implementing blocks is still possible using block type function in schema. This also makes it possible to drag the content and change the sections order within the page.
Results
SugarlashPRO's team simply loved the site with custom desktop & mobile redesign and how flexible was the site to edit from the theme editor. It took around 8 weeks to implement custom design, QA on both desktop and mobile and providing their team with all the details on how to edit the pages.
Here's what they had to say
"Sagar has helped me on a number of projects now and am extremely pleased with his work for this redesign project! Everyone at SugarlashPRO loved the redesign and a quick turn around time. Thanks for the hard, amazing work, Sagar!"