Skip to content

Instantly share code, notes, and snippets.

Caroline carolineschnapp

Block or report user

Report or block carolineschnapp

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@carolineschnapp
carolineschnapp / available-colors.liquid
Created Oct 4, 2016
Snippet that says 'also available in colors x and y' on the collection page when a product is available in more than 1 color. To include in product-loop.liquid, or product-grid-item.liquid.
View available-colors.liquid
{% comment %}
Do we have a Color option?
If so, is it the first, second or third option of that product?
We will need to access values so we need that color index.
{% endcomment %}
{% assign has_color = false %}
{% assign color_option_index = 0 %}
{% for option in product.options %}
{% assign downcased_option = option | downcase %}
@carolineschnapp
carolineschnapp / Have search box open by default.md
Created May 9, 2016
Have search box open by default in #Venture
View Have search box open by default.md

What you have

Alt text

What you want

Alt text

How to get it

@carolineschnapp
carolineschnapp / multiple images for a variant.md
Created Mar 31, 2016
"Grouped variant images". Solution good for all themes, no change to markup required.
View multiple images for a variant.md

What to do

  1. Use the alt text to associate the additional images - besides the variant image - to the option value. Example: say you have 3 images that show the Blue variants, then a) associate the first image as variant image to all Blue variants, and b) set the alt text of the 2 additional images to 'Blue'.
  2. Copy+paste the code found in the product.liquid snippet below at the bottom of your product.liquid template.

How that works, essentially

Only the images associated to the currently selected variant are shown. Other images are hidden.

What to expect, the specifics

@carolineschnapp
carolineschnapp / bottom-align slide text and button.md
Created Mar 26, 2016
Bottom-align slides' text and button in #Brooklyn theme
View bottom-align slide text and button.md

What you have

Alt text

What you want

Alt text

How to get it

@carolineschnapp
carolineschnapp / Show all drop-down links in drawer.md
Created Mar 21, 2016
Show all drop-down links in the menu drawer in the #Brooklyn theme
View Show all drop-down links in drawer.md
@carolineschnapp
carolineschnapp / remove-sold-out.liquid
Last active Mar 6, 2019
Remove sold-out variants
View remove-sold-out.liquid
{% comment %}
Remove sold-out variants.
Only works for products that have one option.
It won't work with products that have two or three options, like Size and Color.
See: https://docs.myshopify.io/themes/customization/products/hide-variants-that-are-sold-out
{% endcomment %}
{% if product.options.size == 1 %}
<script>
var $addToCartForm = $('form[action="/cart/add"]');
@carolineschnapp
carolineschnapp / disable-sold-out.liquid
Last active Mar 6, 2019
Disable sold-out variants
View disable-sold-out.liquid
{% comment %}
Disable sold-out variants.
Only works for products that have one option.
It won't work with products that have two or three options, like Size and Color.
See: https://docs.myshopify.io/themes/customization/products/hide-variants-that-are-sold-out
{% endcomment %}
{% if product.options.size == 1 %}
<script>
var $addToCartForm = $('form[action="/cart/add"]');
@carolineschnapp
carolineschnapp / pick-an-option.liquid
Last active Mar 6, 2019
Make 'Pick an option' the default choice in product drop-down menus
View pick-an-option.liquid
{% comment %}
See https://docs.shopify.com/themes/customization/products/how-to-add-a-pick-an-option-to-drop-downs
{% endcomment %}
{% unless product.selected_variant %}
{% if product.variants.size > 1 %}
<script>
var $addToCartForm = $('form[action="/cart/add"]');
if (window.MutationObserver && $addToCartForm.length) {
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
@carolineschnapp
carolineschnapp / remove overlap.md
Created Mar 12, 2016
Remove overlap of content over slideshow in #Venture theme
View remove overlap.md

What you have

Alt text

What you want

Alt text

How to get it

@carolineschnapp
carolineschnapp / hide variant images.md
Created Feb 18, 2016
Hide variant images on the product page, so that a variant image is shown as main image only when its corresponding variant is selected.
View hide variant images.md

The goal

Hide the thumbnails of variant images on the product page.

How to do that

  1. Add a class of 'variant-image' to the wrapper of each thumbnail that is a variant image. See first product.liquid snippet.
  2. Hide all .variant-image elements with CSS in the theme's stylesheet. See second style.scss.liquid snippet.
You can’t perform that action at this time.