Shopify Quick Wins

Here at vvast we’re firm fans of Shopify, mainly due to the ease and flexibility it gives you in being able to build an eCommerce site fast and professionally. Our developer Andy has come up with some quick wins to help you get started.

Shopify is a great development platform to work on. Using Liquid templating together with Javascript and CSS gives you a really adaptable toolkit for solving problems and building custom functionality. After two months of theme editing and development on Shopify, these are my two best tips for getting set-up:

1: Get Shopify theme kit working

Every developer has their favourite code editor and methods for working locally – it doesn’t need to be different when working on a Shopify theme. Although the themes tab in your store is great for managing and customising themes, it’s unlikely that you’ll want to edit lots of code in there. Themekit gives you an easy way to download theme files so you can work on them locally. Then it will watch for changes and automatically update the store when you make edits! Working this way also makes it easy to use Git to version manage your project. Head to this repository for all the tools and instructions you’ll need to get Themekit set up:

2: Log out Liquid objects

Liquid objects are what define the contents of your pages. For example, the ‘product’ object defines all the properties of a specific product, such as ‘title’ and ‘price’ etc. Being able to log these objects out easily to check what they are is very helpful when building a Shopify theme. If you create a snippet file called ‘dump.liquid’ in your theme with the following code…

<script type=”text/javascript”>
console.log(“Dumping”);
console.log({{ dump | json }});
</script>

… you’ll be able to easily log out any of your store’s values and see what they are by including this line in any of your template files:

{% include ‘dump’ with [variable to log out] %}

Now just open DevTools and click the console tab to see what you’ve logged out!

Happy hacking.