Show 'Color' Variants on Collection Page with Timber Theme

Highlighted
New Member
25 0 0

In the process of building a new site and trying to display color variants on a collection page with the Timber Theme. I've tried multiple things, but I cant get it to display only the color variant. Any ideas on how to do this? The color variant is option2. 

Thanks

0 Likes
Highlighted
Shopify Partner
74 0 3

Hi Anthony

It will require customization. We have done similar work on one of the Shopify websites. 

We can help you to get it done.

Thanks 

Bryan

01creativeagency@gmail.com
0 Likes
Highlighted
New Member
25 0 0

Hi Bryan, 

I understand it requires. I have a pretty decent understanding of liquid programming. Could you point me in the right direction in terms of  a resource. I'm not looking to pay for someone to do it. 

0 Likes
Highlighted
Shopify Expert
2684 67 815

Hi Anthony, 

the simple code can be similar to this:

{% for opt in product.options_with_values %}
	{% assign opt_l = opt.name | downcase %}
	{% if opt_l == "color" or opt_l == "colour" %}
	      {% for val in opt.values %}
	          <span class="color-swatch" 
	                style="background-image:url({{val | append: ".jpg"}} | asset_img_url: "32x" );
	                background-color: {{ val| split:" " | last }};"
	                >{{val}}<span>
	      {% endfor %}
	{% endif }
{% endfor %}

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
1 Like
Highlighted
Shopify Expert
9926 103 1765

^ that's a solid start.

@Anthony - is it just the swatch you want to show or are you wanting to show the variant as if it's a standalone product? Or perhaps something else entirely?

@Bryan - don't pitch for work on the forums unless it's in the dedicated Job Board section. These sort of posts will likely get marked as spam if you persist.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
1 Like
Highlighted
New Member
25 0 0

Thanks Tim and Jason. We want the variants to display as separate products and also have color swatches below each of them. 

0 Likes
Highlighted
New Member
25 0 0

Tim the code you pasted would be for color swatches correct? 

0 Likes
Highlighted
New Member
25 0 0

@Jason

I've read and did this blog post of yours: https://freakdesign.com.au/blogs/news/87395207-show-variants-as-separate-products-on-collection-page...

But I don't know if there has been changes in the Timber Theme since then, because it doesn't work if I just copy and paste. 

0 Likes
Highlighted
Shopify Partner
3 0 5

Did you ever figure out how to make this work??? I am trying to do something similar. Not sure why this isn't a more frequent question.

0 Likes
Highlighted
New Member
1 0 0

I was able to display the same product as a different product based on a specific option name. I'll paste the source code below. You can look on our collection page to see it in action.

It's fairly simple. If `product.options` contains an option named `Metal`, then display each `Metal` option as a separate card. I excluded `Platinum` because `White Gold` looks exactly the same.

Definitely needs some refactoring to clean up some redundancies looking at it now, but hopefully you guys understand most of it. Also, I was lazy and had set all my `Metals` for valid products as `option1` so the code isn't as flexible there. I would add protections there and loop through every `option` and not depend on it being `option1` if I were to update this.

 

{% assign METAL = "Metal" %}
{% if product.options contains METAL %}
  {% assign option = product.options_with_values | where:"name", METAL | first %}
  {% for value in option.values %}
    {% if value == "Platinum" %}
      {% assign found = true %}
    {% else %}
      {% assign found = false %}
    {% endif %}

    {% for variant in product.variants %}
      {% if found == false and variant.option1 == value %}
        <div class="grid__item grid__item--{{section.id}} {{ grid_item_width }}">
          <div class="grid-view-item m-margin-bottom-none{% unless product.available %} product-price--sold-out grid-view-item--sold-out{% endunless %}">
            <a class="grid-view-item__link grid-view-item__image-container" href="{{ product.url | within: collection | append: "?variant=" | append: variant.id }}">
              {% capture img_id %}ProductCardImage-{{ section.id }}-{{ variant.id }}{% endcapture %}
              {% capture wrapper_id %}ProductCardImageWrapper-{{ section.id }}-{{ variant.id }}{% endcapture %}
              {%- assign img_url = variant.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

              {% unless variant.image == blank %}
                {% include 'image-style' with image: variant.image, width: max_height, height: max_height, small_style: true, wrapper_id: wrapper_id, img_id: img_id %}
              {% endunless %}

              <div id="{{ wrapper_id }}" class="grid-view-item__image-wrapper js">
                <div style="padding-top:{% unless variant.image == blank %}{{ 1 | divided_by: variant.image.aspect_ratio | times: 100}}%{% else %}100%{% endunless %};">
                  <img id="{{ img_id }}"
                       class="grid-view-item__image lazyload"
                       src="{{ variant.image | img_url: '300x300' }}"
                       data-src="{{ img_url }}"
                       data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                       data-aspectratio="{{ variant.image.aspect_ratio }}"
                       data-sizes="auto"
                       alt="{{ variant.image.alt | escape }}">
                </div>
              </div>

              <noscript>
                {% capture image_size %}{{ max_height }}x{{ max_height }}{% endcapture %}
                <img class="grid-view-item__image" src="{{ variant.image.src | img_url: image_size, scale: 2 }}" alt="{{ variant.image.alt }}" style="max-width: {{ max_height | times: variant.image.aspect_ratio }}px;">
              </noscript>
              <div class="c-negative-transform-medium">
                <div class="h4 grid-view-item__title">{{ product.title }}</div>
                {% if section.settings.show_vendor %}
                  <div class="grid-view-item__vendor">{{ product.vendor }}</div>
                {% endif %}
                <div class="grid-view-item__meta">
                  {% unless product.compare_at_price > product.price %}
                    <span class="starting-at"><i>Starting at</i></span>
                  {% endunless %}
                  {% include 'product-price' %}
                </div>
              </div>
            </a>
          </div>
         </div>
        {% assign found = true %}
      {% endif %}
    {% endfor %}
  {% endfor %}
{% else %}
  <div class="grid__item grid__item--{{section.id}} {{ grid_item_width }}">
    <div class="grid-view-item{% unless product.available %} product-price--sold-out grid-view-item--sold-out{% endunless %}">
      <a class="grid-view-item__link grid-view-item__image-container" href="{{ product.url | within: collection }}">
        {% capture img_id %}ProductCardImage-{{ section.id }}-{{ product.id }}{% endcapture %}
        {% capture wrapper_id %}ProductCardImageWrapper-{{ section.id }}-{{ product.id }}{% endcapture %}
        {%- assign img_url = product.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

        {% unless product.featured_image == blank %}
          {% include 'image-style' with image: product.featured_image, width: max_height, height: max_height, small_style: true, wrapper_id: wrapper_id, img_id: img_id %}
        {% endunless %}

        <div id="{{ wrapper_id }}" class="grid-view-item__image-wrapper js">
          <div style="padding-top:{% unless product.featured_image == blank %}{{ 1 | divided_by: product.featured_image.aspect_ratio | times: 100}}%{% else %}100%{% endunless %};">
            <img id="{{ img_id }}"
                 class="grid-view-item__image lazyload"
                 src="{{ product.featured_image | img_url: '300x300' }}"
                 data-src="{{ img_url }}"
                 data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                 data-aspectratio="{{ product.featured_image.aspect_ratio }}"
                 data-sizes="auto"
                 alt="{{ product.featured_image.alt | escape }}">
          </div>
        </div>

        <noscript>
          {% capture image_size %}{{ max_height }}x{{ max_height }}{% endcapture %}
          <img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: image_size, scale: 2 }}" alt="{{ product.featured_image.alt }}" style="max-width: {{ max_height | times: product.featured_image.aspect_ratio }}px;">
        </noscript>
        <div class="c-negative-transform-medium">
          <div class="h4 grid-view-item__title">{{ product.title }}</div>
          {% if section.settings.show_vendor %}
            <div class="grid-view-item__vendor">{{ product.vendor }}</div>
          {% endif %}
          <div class="grid-view-item__meta">
            {% unless product.compare_at_price > product.price %}
              <span class="starting-at"><i>Starting at</i></span>
            {% endunless %}
            {% include 'product-price' %}
          </div>
        </div>
      </a>
    </div>
  </div>
{% endif %}

 

0 Likes