Dylan Hunt Shopify Guides and Resources

This site is a collection of things I have struggled with while learning to code. I am by no means an experienced developer, and don't claim to be, but I want to document things I found difficult, and try to make them more simple for others. If anyone benefits from any of these guides my job here is done.

I started learning to code while working at Shopify and I have been practicing a ton while working on a number of projects.

I plan to blog about HTML, CSS, JS, and Ruby on Rails. If there are any guides you would like to see, please reach out on the About page.

Happy Coding!

- Dylan Hunt


by: Dylan Hunt | Published: May 16, 2018 17:12

Alright, I see a lot of people asking for this and wanted to provide a guide to help anyone looking to do this. If you have a product such as a swimwuit that has 10 colors, you may want to keep it as one product, but to make your collection page look more 'full', so here is how you can turn that one product into 10 different ones on the collection page, but have the product page stay the same as one product with many variants.

You'll need to update your product loop to change the information to update to the right variant URL's and such, but that part above is the most complex. Comment below if you're struggling.

Read More >>


by: Dylan Hunt | Published: May 11, 2018 15:53

Alright, so this was something I searched for around the shopify universe and was not able to come up with a guide, so here we go.

We are going to start by adding a nice filter on the theme to filter by the sizes that are available between ALL products on the currently selected page. The guide below ASSUMES that the size is the 2nd option. if it is the first for you, change the 1 to a 0.

I am adding this code to the theme alongside the other filters, which is often in a snippet called filters, but might just be in your collection-template.liquid section.

Next we need to add the tags of each size (or color depending how you're doing this) to the products in the store. This is by far the most annoying part of making this happen on your store.

By adding the tags, we ensure that the right products ALL show up on the site when the filter by the size, which really acts as a tag filter with Shopify's URL filtering

Now its time to make sure that we ONLY show the products that are in stock. So we will do this by removing matching the variants available in that specific product, with the tag filter, and determine if it matches.

The code below will go in the area on your site that has the product grid item. Usually this is called product-grid.liquid and is a snippet, but it will be clear if you find the product for loop in the collection template.

With those two codes added you should be good to go in any theme to filter any collection by the size or color in stock.

Read More >>


by: Dylan Hunt | Published: April 02, 2018 17:54

Hey, it took me a lot of searching to determine how to do this and its actually really simple without additional JS libraries. If you add &muted=1 to the URL of the embedded video, then it will ensure it is fully muted. Here is an example code

Read More >>


by: Dylan Hunt | Published: March 07, 2018 15:59

Hey guys. I get asked to implement this a lot, so here is a simple bit of code that can be put in the theme.liquid at the bottom before or into the app.js or theme.js file to smooth scroll to anchor links on your site. Don't know what an anchor link is? An Anchor link is a link from one spot on the page to another, and normally it just jumps you to that spot, but smooth scrolling shows the user whether they are moving up or down, and is just a nicer experience. here is the code: If you are implementing this in the theme.liquid, add after. If you are putting it into the app or theme.js, paste it as is at the bottom.

Read More >>


by: Dylan Hunt | Published: November 10, 2017 16:03

Hey guys, This script will allow you to offer a free gift if the price is over a certain price. I set it up here to allow for 4 items to be chosen to be a free gift. This will come along with a bit of work to setup the frontend, but bundling to offer a free gift has been really popular on Shopify lately and I wanted to start the dialog here.


This will ensure that if your cart is over $75 and one of the 4 product id's marked with x's is in the cart it will be free.

Read More >>


by: Dylan Hunt | Published: July 07, 2017 16:01

Here is the code to show the inventory quantity of each product on a collection or product page, instead of just showing the first available variants. Note, this guide will only show if inventory is below 4.

Read More >>


Need help implementing any of these guides?

Contact Me