Skip to content

Instantly share code, notes, and snippets.


David Little drabbytux

View GitHub Profile
drabbytux / plain-js-make-image-change-javascript.js
Created Sep 18, 2020
Thumbnail changes variant, Plain Javascript
View plain-js-make-image-change-javascript.js
To be placed at bottom of theme.js, or main JS file that doesn't use jquery.
document.addEventListener("DOMContentLoaded", function(){
thumbnails = document.querySelectorAll('img[src*="/products/"]');
function addEventListenerList(thumbnails) {
for (var i = 0, len = thumbnails.length; i < len; i++) {
thumbnails[i].addEventListener('click', thumbImageSwap, false);
drabbytux / 1 Remove Variants from Single Option Variants that are sold out
Last active Oct 11, 2019
Remove variables from single variant selector on product pages that are sold out
View 1 Remove Variants from Single Option Variants that are sold out
{% comment %}Place this at the bottom of the section/product.template.liquid file{% endcomment %}
{% if product.options.size == 1 %}
var product_variants_removed = [
{%- for variant in product.variants -%}
{%- unless variant.available -%}
'{{ variant.title }}',
{%- endunless -%}
{%- endfor -%}
drabbytux / gist:c2b42736ed543b236cbf6ee956917e64
Last active Mar 4, 2018 — forked from carolineschnapp/gist:9122054
Order form to use in a page or collection template.
View gist:c2b42736ed543b236cbf6ee956917e64
{% comment %}
If you are not on a collection page, do define which collection to use in the order form.
Use the following assign statement, replace 'your-collection-handle-here' with your collection handle.
{% assign collection = collections.your-collection-handle-here %}
Use the assign statement outside of this comment block at the top of your template.
{% endcomment %}
{% paginate collection.products by 100 %}
drabbytux / theme.js
Created Jan 30, 2017
Hide variants that are sold out theme.js portion
View theme.js
/* Remove variants that are sold out in the dropdown */
if(typeof arr_titles_to_remove != 'undefined' ){
var $addToCartForm = $('form[action="/cart/add"]');
var i_title;
for (i_title = 0; i_title < arr_titles_to_remove.length; ++i_title) {
jQuery('.single-option-selector option').filter(function() { return jQuery(this).text() === arr_titles_to_remove[i_title] }).remove();
drabbytux /
Last active Dec 15, 2016
Add a date picker to get delivery dates on your cart page


  1. Add this to the bottom of the Assets/theme.js file:
$(document).ready( function() {
  $(function() {
    $("#date").datepicker( { 
      minDate: +1, 
      maxDate: '+2M',
    beforeShowDay: jQuery.datepicker.noWeekends
View delivery-date.liquid
{{ '//' | stylesheet_tag }}
{{ '//' | script_tag }}
<div style="width:300px; clear:both;">
<label for="date">Pick a delivery date:</label>
<input id="date" type="text" name="attributes[date]" value="{{ }}" />
<span style="display:block" class="instructions"> We do not deliver during the week-end.</span>
drabbytux /
Last active Dec 13, 2016
Limiting purchase quantities
layout title sidebar_title description nav
Limiting purchase quantities
Limiting purchase quantities
Learn about a workaround and an app for limiting purchases.
group weight
drabbytux / shipping-cart.js
Last active Oct 30, 2018
Shipping cart JS
View shipping-cart.js
* Module to add a shipping rates calculator to cart page.
* Copyright (c) 2011-2016 Caroline Schnapp (
* Dual licensed under the MIT and GPL licenses:
* Modified by David Little, 2016
drabbytux / Shipping Calculator for
Last active Jul 1, 2020
Add a shipping rates calculator to your cart page
View Shipping Calculator for
  1. Copy this code and paste it at the bottom of your Assets/vendor.js file, or if your theme doesn't have a vendor.js file, place it at the very top of the theme.js file. (At the moment, POP requires this to be added at the very bottom of the theme.js file, followed by the next bit).

  2. Add this to the bottom of the Assets/theme.js file: {
  submitButton: theme.strings.shippingCalcSubmitButton,
  submitButtonDisabled: theme.strings.shippingCalcSubmitButtonDisabled,
  customerIsLoggedIn: theme.strings.shippingCalcCustomerIsLoggedIn,
  moneyFormat: theme.strings.shippingCalcMoneyFormat                                     
drabbytux /
Last active Dec 16, 2016
Add an agree to terms and conditions checkbox
layout title sidebar_title description nav
Add an agree to terms and conditions checkbox
Add a terms and conditions checkbox
Add an Agree to terms and conditions checkbox to the cart page of your online Shopify store.
You can’t perform that action at this time.