Having spent about 9 years now developing for Shopify we've had our fair share of complex problems brought to us by clients.  For the most part Shopify is amazing at providing the ability to stand up a site instantaneously and quickly add on a ton of functionality via the app store while still providing a ton of ability for developers to go in and customize.

That being said, there are still some limitations.  The addition of the Storefront API has enabled skilled developers to go ahead and break free of the hosted Shopify "theme" realm by building out custom frontends while still leveraging Shopify as a CMS, checkout and admin console for managing orders.  This is awesome for a variety of reasons such as routing control, ability to run multiple web applications ie. using Ghost to supercharge your blog and in general being able to optimize your site as far as making it a Progressive Web Application (think offline browsing & one-page application speed).

Most of the merchants we work with, both enterprise and startup, use Shopify as it's secure and has the ability to evolve to meet their business strategy needs.  For that reason, even if the budget is there 99% of the time it makes sense to go with the hosted Shopify theme environment instead of building out a custom frontend.  Even if the client has a 6 figure annual budget for development they simply don't want to wait to see if an up-sell application could increase their avg. order value by developing it in-house.... with Shopify they can give it a go within minutes. For the most part this is awesome, but admittedly for a developer creates a handicap when problems requiring somewhat more complex solutions come along.

Thankfully VUE is here and it's here to stay, having recently surpassed React in stars on GitHub.  The nice thing about Vue is that it's super lightweight and can be served via CDN which is HUGE because that means...we can use it within the context of a hosted Shopify Theme !

That's right, we can use VueJs to build custom pages within a Shopify hosted theme.  BOOM!

All starting with this snippet...

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

Let's assume our client is trying to sell custom floor mats for vehicles.  In general these mats come in 5 base color variations with 5 stitching color options and 5 heel pad options.  If we were to do this the traditional method in Shopify we'd be at 125 variants and we haven't even gotten to vehicle specific sizing.  Now let's say color doesn't affect price, so we abstract this to a line-item property, but rather the client uses 19 different sizings ie. 2 pc front mats vs 4pc mat set with variations of the pattern depending on car size for pricing.  We're now at 19 variants...but now the client wants the customer to be able to select multiple patterns (ie. 2 pc front mats and trunk liner) , show the aggregated price of the two items together and add them to cart simultaneously.

Talk about a headache...without Vue we'd have a mess of code and when the client decides to go in a new direction we'd have quite a mess to untangle...

Thankfully with Vue we can create a function that automatically shows only the available patters based on API response for selected vehicle, automatically sum selected patterns and easily attach a function that adds multiple variants / products (if we want to include a leather cleaning kit 😈) to the cart with a single click.

If you'd like any code hints feel free to drop me a line =)