We helped Onia implement multiple functionalities and custom designs on their Shopify Plus Store.
Onia reached out to us to implement custom designs & functionalities on homepage, collections pages and product pages in order to maintain their branding, design and provide a great browsing experience to their customers.
Not only this, each design & functionality had to be created in a way that it would make it easier for them to be able to add/move content around easily.
A lot of Shopify store owners struggle with this one thing. They don't ask their developers to provide them customisation options. Most of the time, they don't even know if that's the thing they should be asking for.
We always make it a point to ask our clients what customisation options they would want to have. This ensures that they don't have to get in touch with us every time they need make small changes.
Eg: Changing color of the headline, positioning content left, centre or right, vertical aligning the content etc. from the editor itself.
The Process
Here are some of the Shopify tweaks we implemented:
1.) Switching Images (main & thumbnails) using color swatches
For each product style, Onia had multiple color variants and 5-6 images per color. Imagine having 5 variants with 5-6 images each. Showcasing that many images would affect the user experience.
It's quite unnecessary to display other color variant images unless the color is selected. If only images corresponding to a particular color is displayed, it makes it easy for customers to browse products and improves the user experience.
Also, if many images are loaded as soon as the user lands on the product page, website speed goes down affecting SEO, unless lazy load function is used to display images.
To de-clutter product images area, we custom coded the entire product images display functionality so that only those images are displayed that are assigned to the selected color swatch.
As a result, the user experience was greatly enhanced and the images are lazy loaded to improve website speed.
On desktop, the images are displayed with one main image & rest of the images belonging to that color as thumbnails.
On mobile, since the space is limited, the images automatically turns into a slider of a specific color that's selected, which greatly enhances the mobile browsing experience.
2.) Custom Mega Menu dropdown Styles (Total 4)
Onia wanted to display multiple links & images for their customers when they are using site's navigation to go to specific collections. It enables them to easily identify the category of products they might want to browse and buy.
We created a total of four full width mega menu styles:
1.) Displays only images along with title linked to a url.
2.) Displays links in first 4 columns and images in the next columns
3.) Displays just links centered on the screen
4.) Display a slideshow of images which people can easily scroll to view the latest and past lookbooks.
These mega menu styles are easy were created in the backend and can easily be configured either through the navigation area or the header section area, typically used for adding images.
On mobile, the layout is optimized to display only links with touch functionality
3.) Load more or Infinite Scroll Since
Load more function loads products automatically when the user scrolls down on all collection pages. For this, we added the infinite scroll function. Infinte scroll function can also be configured to add a "load more" button which will load more products when clicked instead of just loading products automatically.
With infinite scrolling, just before the user reaches the bottom of the displayed products, new products are loaded automatically. This way the can keep scrolling down until all the products have been loaded.
Also, the user doesn't have to wait or click on next page for viewing more products in the collection. If you have a lot of products on your collection pages, it's recommended to use Infinite scrolling function. Get in touch with us today if you want to create this option.
4.) Personalised Recommendations on Product page
When you make make personalized recommendations based on either your customers' browsing history or manually recommending products that go together well with the product your customer is interested in buying, it can help you increase lifetime value of your customer.
I recommend using an app called Limespot to make personalised recommendations.
5.) Custom Sections for Homepage
For homepage, we created custom sections with options to easily customise the text & images. We created multiple types of sections: Split Images Section, Split Links Section, Image with text section.
Since the sections on homepage are dynamic, they can be re-used again to display more content whether it's images, product recommendations or just text.
Results
The custom functionality, app integration and fixes were implemented and completed during the timeframe proposed. We kept their team updated throughout the implementation of these tasks and helped them to understand how to use the functions efficiently and guided them through any queries.
Here's what they had to say
"We had such a great experience working with Sagar. He was so responsive and the work was always finished very promptly at an affordable price. He is also very knowledgeable when it comes to Shopify, and as a new Shopify user, to be working with someone like Sagar and his experience, it made the whole process much easier. I would highly recommend Sagar for any Shopify project!"