Skip to content

Instantly share code, notes, and snippets.

@carolineschnapp
Created October 4, 2016 15:15
Show Gist options
  • Star 12 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save carolineschnapp/f55f44ffd2dcf6eeeda6c2812ea7f94f to your computer and use it in GitHub Desktop.
Save carolineschnapp/f55f44ffd2dcf6eeeda6c2812ea7f94f to your computer and use it in GitHub Desktop.
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.
{% 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 %}
{% if downcased_option contains 'color' or downcased_option contains 'colour' %}
{% assign color_option_index = forloop.index0 %}
{% assign has_color = true %}
{% endif %}
{% endfor %}
{% comment %}
If we have a Color option, let's create a list of
all available colors for that product, ordered alphabetically.
Let's not include the color featured on the collection page.
Let's not include colors that are sold out.
{% endcomment %}
{% if has_color %}
{% assign featured_color = product.images.first.variants.first.options[color_option_index] %}
{% assign colors = '' %}
{% for variant in product.variants %}
{% if variant.available %}
{% assign color = variant.options[color_option_index] %}
{% unless featured_color != blank and color == featured_color %}
{% if colors == blank %}
{% assign colors = color %}
{% else %}
{% assign colors = colors | join: '|' | append: '|' | append: color | split: '|' | uniq | sort %}
{% endif %}
{% endunless %}
{% endif %}
{% endfor %}
{% comment %}
If the product is available in any color other than the one featured on the collection page.
{% endcomment %}
{% if colors.size > 0 %}
<small style="display:block; font-size: 85%; color: #555;">
{% if featured_color == blank %}
Available in
{% else %}
Also available in
{% endif %}
{% for color in colors %}{% if forloop.first %}{% elsif forloop.last %} and {% else %}, {% endif %}{{ color }}{% endfor %}
</small>
{% endif %}
{% endif %}
@emdad-bd66
Copy link

Hi, carolineschnapp,

Can you help me to write details code for mega menu of shopify.

Best regards,

Emdad

@PureBoardshop
Copy link

Hi Caroline, would you be able to help with getting all variant images to show on collections pages?

So If I have a red shoe, a green shoe, and a blue shoe all listed as variants of 1 product, how can I get all three colors to show on a collection page so user know we have more then one color at a glance?

I am using the Venture theme. I'd appreciate any help!

Thx.

@CSMia
Copy link

CSMia commented Mar 30, 2017

Hi Caroline,

Amazing what you do. I'm no expert in coding but slowly I can get around some tasks. I'd like to know from you if is possible to click on a product in my Shopify store and have it added to an order form instead of being added to the cart.
I'd like c;lients to use a custom order form I was able to create using JotForm and add products with all their attributes, Price, Item #, Description and price. When done, submit order to us. We'll contact them to finalize payment.
I was able to embed the form into my store but do not know how to take
take it to the next level as I describe.

Thanks very much

CsMia

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment