How Advanced Shopify Custom Development Creates a Better User Experience

For Paravel, a seller of high-quality, innovative, and responsibly produced luggage, bags, and other traveling accessories, custom functionality is a must. The products they produce and sell are one-of-a-kind, so to them, offering a one-of-a-kind shopping experience to their customers was necessary.

Paravel needed a lot of basic eCommerce functionality to make it possible to run practical operations through its online store. Originally, they were built on an open-source platform called Spree, which has a lot of adherents and supporters because of the very fact that it is an open-source platform.

Spree, like other open-source platforms such as Magento, is extremely customizable. It can also be integrated with a very large number of third-party plugins and apps, it is highly scalable, and it exhibits a level of UI-intuition that makes developing a mobile-friendly interface easier.

While this is just a quick snapshot of the various functional features of Spree, some of them come at the same high cost as other open-source platforms. They may be nearly limitless in functionality, but they require a lot of development time and even more experience to accomplish. Without extensive coding experience or a background in development, platforms like Spree can quickly exhaust resources.

Paravel needed that one-of-a-kind shopping experience, but they also needed an out-of-the-box solution that offered a lot to their eCommerce merchants. The trouble for them was how could they get their already meticulously designed and developed eCommerce store from Spree to a more capable platform?

A Thorough Migration Process

After communication with our sales team, Paravel decided that a move to Shopify Plus was the answer – with a few stipulations. Among other things, Paravel did not want to experience any negative effects from the migration and they wanted their new store to offer all of the functionality of their Spree store and then some. To do so, Paravel needed more than a Shopify Plus partner – they needed a Shopify Plus expert.

While Spree offered nearly limitless options for customization, Shopify Plus, as a hosted eCommerce SaaS platform, could offer them so much more. With the help of a development team like 1Digital^Ⓡ, Shopify Plus could offer them all of the customizations that Spree offered and more. Shopify Plus also offered heightened security features, guaranteed uptime, fast site speed, similar compatibility with third-party apps and plugins, acceptance of a number of payment options, immense scalability, and much more. Paravel was, at this point, tasked with moving their existing Spree store, and it’s design and functionality, to Shopify Plus.

For some, the process of a website migration is harrowing, but we knew otherwise. With hundreds of successful migrations in the rearview and a team of developers to back our efforts, we knew it could be done with no trouble whatsoever. It just would take a thorough process.

The process was intensive, but nothing 1Digital^Ⓡ Agency couldn’t execute with flying colors. The project required the migration of 32 product fields (including names, descriptions, images, prices, and more) as well as more than 4,000 customer accounts and orders each. To do this, we set up a temporary Linux server and wrote a custom script to draw and categorize this information from the Spree inventory of their original site.

To move it over, we created another custom script to connect to the Shopify API before properly importing all of the relevant fields. During the process and afterward, data was checked in order to ensure that it was landing correctly in the new store, so that not only would nothing be lost, but it would all populate where it was supposed to go.

Our thorough process prevented the loss of data, but what about the loss of traffic? If there’s one thing that turns off eCommerce clients from the prospect of a replatforming (even if it will come with huge benefits), it’s the fear of losing traffic or domain authority.

Luckily, our migration process prevents damage to SEO as meticulously as it prevents data loss. With Paravel, as we have done with every migration project, we collected all of the URLs associated with their website and then set up 301 redirects to the associated URLs on the new Shopify website. Unsurprisingly, Paravel suffered no loss in traffic or fluctuation in ranking after the migration was complete.

Support – Just in Case

Migrating to Shopify went along without a hiccup, and Paravel was well on its way to a new Shopify Plus store with enhanced functionality and a better user experience, but just to be safe, we included a free 30-day support period with the migration project. Any Shopify migration agency with a proven process should do so; it’s just part and parcel of a successful migration strategy.

The length of free support periods vary according to the scope of the project, but in the case of Paravel’s migration, we allotted 30 days. This gave them a full month’s time to investigate their new website and address any migration bugs that might pop up – which we would fix, free of charge.

Even after, we allowed them to remain on retainer, asking no deposit of them; simply billing for any changes that they would log after the free website support period ended. Little things like these go a long way towards ensuring good customer service, and we aim to ensure that migrations go smoothly, even when everything is checked, double-checked, and checked again.

A Newly Developed Website

But it wasn’t over with a migration. Paravel had criteria for the move associated with the customer experience that the new site would offer, and to ensure that, we had to develop a brand new Shopify Plus website for them.

As part of their project, 1Digital^Ⓡ Agency’s developers crafted a brand new homepage for them that was better brand integrated and helped to position their products in a more desirable light. It featured updated product and background imagery that better aligned with the interests and perceptions of their target market. Consider the sleek, sophisticated impression of the new homepage, below, with a still of the old homepage beneath it.

For visitors to their homepage, the new layout is immediately striking not only for the superior aesthetics of its imagery but for the most concerted effort it makes to place the value of Paravel’s products front and center. You will also note that there is a menu at the top of the new homepage layout that was lacking in the previous design; the way to access their products previously was by scrolling down the page to where there was a button labeled “shop the collection”. The new page features much better site navigation features, as you can see above.

Scrolling down the homepage, visitors can see reviews via a sliding banner, learn more about popular product categories, and even see how customers are using the products via social media, as you can see in some of the screenshots below.

In addition to the homepage, 1Digital^Ⓡ crafted a new category page template along with an “Our Story” page for Paravel, on top of several other system pages. Among those pages that were developed were their cart and checkout pages, login pages, gift certificate pages, and “Thank You” pages. Finally, we customized a number of content pages including their “FAQ” and “Terms” pages.

The importance of a high-quality responsive website design is critical to eCommerce nowadays, and 1Digital^Ⓡ developers were careful to prepare an updated responsive website for Paravel as part of the project. In the interest of Paravel’s user experience, the new responsive design by 1Digital^Ⓡ automatically adapts to smaller screens, resizing and reformatting text accordingly.

Advanced Development – Category Page Functionality

When 1Digital^Ⓡ developers transferred over all of the information associated with Paravel’s product categories, we also added in some new functionality for them to pass along to their customers thus improving customer experience.

We installed a Metafield Editor into their category page template so that Paravel could make quick changes to some of the badges that appeared on their category page display. This allowed them to edit custom fields so that promotions associated with “new,” “bestseller,” or “featured” products could be more prominently displayed.

This seemingly simple feature gives a lot of power back to Paravel’s admins to make quick and easy changes to the display of their website without working with a developer. A man can be given a fish or taught the art, and we provided detailed instructions to Paravel on how to use and manage the app so that they would easily be able to make changes even after the project had closed.

Similarly, 1Digital^Ⓡ developers created Product Swatches and Quick View functionality on Paravel’s collections pages. We created a custom script for their Shopify Plus collections page that was able to fetch and display the desired information.

The script for these swatches also ensured that when a customer clicked on the swatch associated with the color of interest, the product image would be displayed in that color. In addition, it would display the applicable pricing associated with the change as well as any options for “personalization,” or, if necessary, an “out of stock” message.

Advanced Development – Product Page Functionality

Paravel places a huge emphasis on customer experience, and as such, they required a great deal of additional functionality out of their product page template, including added abilities to help personalize the shopping experience.

Therefore, as part of the advanced development aspect of the project, 1Digital^Ⓡ helped create a new and better set of features to personalize the shopping experience on their website, specifically on their product page.

We configured their product page template so that it displayed similarly to their old Spree store. We then created a stick “add to cart” bar that would remain at the bottom of the product page display. That was the easy part.

We also developed a tool for their product page template that would allow shoppers to personalize their shopper experience and make it more realistic. In addition to offering their customers the ability to see what a given bag (or other product) would look like using the swatch functionality described above, Paravel also gives its customers the ability to personalize their products.

Paravel was interested in the conversion-boosting features of a realistic tool that would allow its customers to actually see what their products would look like once personalized, so we created a tool enabling them to do so.

The tool we built for Paravel displayed a popup with the words “Personalize” when a customer visited the product page We then created a tool that would enable the customer to personalize the product according to the style and color of the lettering that would appear as a monogram with their initials.

This tool displays as a widget on the product page after the customer clicks on “Personalize” and is very easy to manipulate and customize according to their preferences. In order to ensure that the product would display the personalization properly, we had to create a custom script that would accurately display the letters that the customer had entered, in the style they selected, over the right area of the product, as can be seen in the image below. As a final level of functionality, we created a “Nylon Template” that would enable Paravel’s customers to customize their products with embroidered letters instead of hand-painted letters or Appliqué.

There were a few more customizations we created for Paravel’s product pages, including the implementation of four tabs from the product pages on their old Spree store via HTML coding. We also recreated the “Choose Your Own Adventure” functionality from Paravel’s Spree store, which enables customers to further personalize Paravel’s products with Applique and hand-painted designs, on top of a few other customizations to preserve the integrity of the original functionality that appeared on their Spree store.

Integration with Critical Apps

To secure the functionality of their new Shopify Plus store and ensure a smooth, enjoyable user experience, 1Digital^Ⓡ Agency had to integrate Paravel’s new store with its business-critical apps.

Among other things, Paravel’s customers relied on reviews and testimonials that Paravel was able to draw and display via YotPo, which we ensured was seamlessly integrated for them. Paravel also relied heavily on the use of Zaius for customer engagement and CRM, so we performed that integration as well as the aforementioned.

On top of these, Paravel makes use of the functionality afforded not only by RJ Metrics but also by Talkable. These apps provide valuable data to Paravel’s admins and allow for secure referral marketing programs.

1Digital^Ⓡ Agency integrated all of these apps with Paravel’s new store in addition to  coding and developing their new Shopify Plus website. We concluded this project, comprehensive in scope, entailing a migration and advanced custom development, with no hang-ups. That is to say, the client experienced no undue interruptions in business, no loss in traffic, and moved onto a newly developed store with advanced custom functionality without so much as a hiccup. To do that takes experience and thorough processes, both of which 1Digital^Ⓡ integrates into our workflow.

The Complete Solution

Some providers tune their services to one or two highly specialized services, but we know that the problems faced by eCommerce merchants are diverse. If we were only able to offer development services, we wouldn’t have been able to migrate Paravel from Spree to Shopify Plus, which is one of the leading eCommerce platforms for online merchants. Similarly, if we limited ourselves to performing migrations, we wouldn’t have been able to customize their new store the way they wanted.

Shopify Plus design and development services, even when paired with our migration services, are only a small snapshot of what 1Digital^Ⓡ Agency offers. On top of our Shopify custom design services, we also offer comprehensive digital marketing campaigns including highly competitive, thoroughly researched, and targeted SEO and PPC campaigns.

This success story hinges on the fact that we were able to migrate Paravel off of Spree and onto a newly developed Shopify Plus store with advanced functionality. Many of our other eCommerce case studies focus on other eCommerce platforms like BigCommerce design and development, similar Magento services, and digital marketing campaigns. Take a look through our repertoire, and if you want to see how we can solve the problems that face your online business, give us a call at 888-982-8269.

Download PDF