Skip to content

Instantly share code, notes, and snippets.

View jtgrenz's full-sized avatar

Jon G jtgrenz

  • Gusto
  • Canada
  • 10:43 (UTC -04:00)
View GitHub Profile

Keybase proof

I hereby claim:

  • I am jtgrenz on github.
  • I am jtgrenz (https://keybase.io/jtgrenz) on keybase.
  • I have a public key ASDWiFcn-IjHYsvYDlQIeadq-C-D3ZOPym2rRN3AdzUYywo

To claim this, I am signing this object:

Works with CSS color keywords or images. If you have a non-css color / pattern, you need to upload the image with a handelized name. If the color is "aqua blue" then the file needs to be uplaoded as "aqua-blue.png". You can use jpg if you prefer by changing the file_extension and you can change from color to colour or farbe, etc by changing the option_name

-JG

{% assign option_name = "Color"  | downcase %}
{% assign file_extension = "png" %}
{% assign product_options = product.options | downcase %}

<div class="swatch-container" style="padding: 5px 0;">
@jtgrenz
jtgrenz / Options with Swatch images.md
Created August 3, 2016 17:56
Show available colours on the collection pages with a small colour swatches. Note: The colours must be CSS colour keywords to work

I tweaked the above code and now it works with image swatches too. If you have a non-css color / pattern, you need to upload the image with a handelized name. If the color is "aqua blue" then the file needs to be uplaoded as "aqua-blue.png". You can use jpg if you prefer by changing the file_extension and you can change from color to colour or farbe, etc by changing the option_name

-JG

{% assign option_name = "Color"  | downcase %}
{% assign file_extension = "png" %}
{% assign product_options = product.options | downcase %}

<div class="swatch-container" style="padding: 5px 0;">
@jtgrenz
jtgrenz / main_image_and_thumbs.md
Last active August 12, 2021 01:46
Shopify Brooklyn theme: Main image with thumbnail

Stolen from the wonderful @jake-olney

What you want:

alt

How to get it:

Go to product.liquid and:

@jtgrenz
jtgrenz / ZenDesk Widget Shopfy Bug Fix.md
Last active September 22, 2015 19:01
Fix for Zendesk Widget bug on Shopify Themes

Problem

If you have tried installing the Zendesk Web Widget into your Shopify theme but it does not show up or gives an error, this might be the fix for you

This fix should work for the following Shopify themes installed prior to September 2015 :

  • React
  • Brooklyn
  • Supply
  • Classic
  • Solo
  • Pop
@jtgrenz
jtgrenz / Search box in sidebar for Pop.md
Last active August 29, 2015 14:24
Search box in sidebar for Pop

Issue

People are asking/confused about the footer search bar in footer in Pop. They want it higher. And they want it bad.

Solution

Display the search box in the sidebar. This will make it appear higher in desktop views, and be visible in mobile menus.

@jtgrenz
jtgrenz / collection-sidebar.liquid
Created May 27, 2015 18:49
UPDATED!!! The manual link list feature requires 'reorder_' in front of the tag prefix for the link list name. ie Reorder_Size Control the display order of tag groups lists in the collection sidebar using Supply's 'advanced tag filtering' - and control the sort order of the list items within that group using a link list.
<div class="grid-uniform">
{% if settings.manual_group %}
{% assign group_array = settings.manual_group_array | split: ',' %}
{% for group in group_array %}
{% capture array %}{% unless array == blank or array == "" %}{{ array }},{% endunless %}{{group | strip}}{% endcapture%}
{% endfor%}
{% assign cat_array = array | split:',' %}
{% endif %}
@jtgrenz
jtgrenz / 0_reuse_code.js
Last active August 29, 2015 14:16
Here are some things you can do with Gists in GistBox.
// Use Gists to store code you would like to remember later on
console.log(window); // log the "window" object to the console
@jtgrenz
jtgrenz / Shopify-type-size-chart
Last active March 10, 2022 20:27
alternative size-chart snippet to provide a size chart based on product type for the shopify size chart guide
{% if template contains 'product' %}
{% assign chart = product.type | handleize | append: "-size-chart" %}
{% unless pages[chart].empty? or pages[chart].content == blank %}
{% assign size_options = 'size,taille' | split: ',' %}
{% assign size_chart_text_link = 'Size chart' %}
{% assign has_size = false %}
{% assign size_index = 0 %}
{% for option in product.options %}
{% assign downcased_option = option | downcase %}
{% if has_size == false and size_options contains downcased_option %}
@jtgrenz
jtgrenz / shopify-brand-size-chart
Last active May 7, 2016 11:00
This is a replacement for the shopify size-chart snippet that allows a different size chart to be used per vendor and requires a page called vendor-name-size-chart to work
{% if template contains 'product' %}
{% assign chart = product.vendor | handleize | append: "-size-chart" %}
{% unless pages[chart].empty? or pages[chart].content == blank %}
{% assign size_options = 'size,taille' | split: ',' %}
{% assign size_chart_text_link = 'Size chart' %}
{% assign has_size = false %}
{% assign size_index = 0 %}
{% for option in product.options %}
{% assign downcased_option = option | downcase %}
{% if has_size == false and size_options contains downcased_option %}