Skip to content

Instantly share code, notes, and snippets.


Stewart Knapman stewartknapman

View GitHub Profile
stewartknapman / showcase-product-gallery.liquid
Last active May 14, 2019
Shopify section for Showcase Instagram app supplied by the app.
View showcase-product-gallery.liquid
stewartknapman / lib.js
Last active Mar 14, 2019
Commonly reused functions in JS
View lib.js
module.exports = {
Array Functions
// For each item in Array
each: function (arr, callback, ctx) {
var r;
for (var i = 0; i < arr.length; i++) {
ctx = ctx || arr[i];
r = callback.apply(ctx, [arr[i], i]);
stewartknapman /
Last active Mar 7, 2019
Shopify: Track the last viewed collection and update any continue shopping links.


Track the last collection by storing or updating a cookie on every collection page visit. If it comes across a continue shopping link then it updates that link to point back to that last collection.

Add the attribute data-continue-shopping-link to any link you want to act as a continue shopping link.

Requires the current template to be passed to it from liquid:

stewartknapman /
Created Dec 18, 2018
The scripts portion of a package.json file used for Shopify theme development

The scripts portion of a package.json file used for Shopify theme development.

To run use the command npm run build.

Watch and build JS files in the _src/js/ folder. This will create a minified file and a debug version (including a sourcemap) for development, and add them to the assets folder.

We also watch for changes the main theme.js file in the assets folder and then minify this for production.

View title-case.liquid
{% comment %}
Title case a string of text.
Usage: {% include 'title-case' string: 'my string' %}
{% endcomment %}
{%- capture str -%}{%- endcapture -%}
{%- assign small_words = 'a|an|and|as|at|but|by|en|for|if|in|nor|of|on|or|per|the|to|vs|vs.|via|with' | split:'|' -%}
{%- assign string_parts = string | split: ' ' -%}
{%- for p in string_parts -%}
{%- assign is_small = false -%}
View adopt.liquid
{% comment %}
Remove orphans from a string of text by adding a non-breaking space between the last two words.
Usage: {% include 'adopt' string: 'my string' %}
{% endcomment %}
{%- assign string_parts = string | split: ' ' -%}
{%- assign last_part = string_parts | last -%}
{% if last_part contains '&nbsp;' %}
{{ string }}
{% else %}
stewartknapman / shopify_checkout_reset.css
Last active Jun 6, 2017
A reset of the Shopify checkout stylesheet.
View shopify_checkout_reset.css
* Shopify checkout reset
/* Reset base elements */
body, h1, h2, h3, h4, h5, h6, p, h1 span.subtitle, h3.divider, #welcome, #container, #container.slim, #main, #container.slim #main, #content, #header, #container.slim #header, #header h1,
#info-bar, #footer, .footer p, #container.slim #footer, #overview, #overview h2, #overview a, #products, #done, #wallet, div.wallet-highlight, #cost, #order-num, #success, #steps, #thumbs,
#thumbs div, #thumbs td, .slim #thumbs td, #thumbs h3, #thumbs h3 span, #thumbs span, #overview .hint, #payment-type, #payment-type li, #payment-type li:hover, li.text-payment, .center,
#addresses, #email, #email label, #email input, #shipping-same label, .address-notification, #gateway-logos, #gateway-logos img, #pay-with, #pay-with h3, #payment, #or, #payment-methods li,
#payment-methods input, #credit-card-valid,, .field-with-errors, .field-with-errors input, .field-with-errors .error-message, .severe-error, .gleft, .gright, label,
stewartknapman / _scan_string.liquid
Last active May 22, 2017
Take a some Shopify content, such as product.description or page.content and add `srcset` to any of its images.
View _scan_string.liquid
{% capture func %}
{% comment %}
Scan String:
Scan a string looking for things
Content: the content to be scaned
Split: the item to split the string with
Start: the thing that says we can start collecting
stewartknapman / elementQueries.js
Last active May 15, 2017
Media queries but for elements rather than the window.
View elementQueries.js
Pollyfill for window.getComputedStyle()
if (!window.getComputedStyle) {
window.getComputedStyle = function(el, pseudo) {
this.el = el;
this.getPropertyValue = function(prop) {
var re = /(\-([a-z]){1})/g;
if (prop == 'float') prop = 'styleFloat';
if (re.test(prop)) {
stewartknapman / shopify-account-register.liquid
Last active Mar 29, 2017
Redirect the Shopify account register form to custom message pages
View shopify-account-register.liquid
{% if form.errors and form.errors contains "form" %}
{% capture error_output %}{{ form.errors | default_errors }}{% endcapture %}
{% capture reset_password %}{{ 'shopify.errors.reset_password_html' | t }}{% endcapture %}
{% capture verify_email %}{{ 'shopify.errors.verify_email' | t: customer_email: "*" | split: "*" | first }}{% endcapture %}
{% if error_output contains reset_password %}
window.location = "/pages/you-have-an-account";
{% elsif error_output contains verify_email %}