(SOLVED)how to build custom collection - specific variants with links directly to that variant

[Matt_Miller]

Hey

I was hoping someone on here could help me out. Will post a description of what I am trying to do.

1. have a page/collection that lists all items with the variant name  195/55R15   

2. the products listed on this page need to link to the proper variant on the product page.

Currently, I have a collection created that includes all items with the specific variant name. The problem is that the generic product is being retrieved. So once a user clicks on a product it brings them to the product page generic view. Essentially in most cases they are brought to a product page with the wrong variant selected. This is very confusing to our customers as they selected a specific size of tire and then it was switched on them when they get to the item page.

How do I generate a collection/page listing of products that use the direct variant links instead of the generic product links?

Thanks a ton,

Matt

[Brendin]

Hi Matt,

Im not sure where you are in the process, but the answer could be this liquid code

{{ variant.url }}

This returns the absolute url of a variant. Again with out knowing exactly what you have done, this is a place to start. Can you share the code for the collection you are working on?

[Matt_Miller]

Hey Brendin

Thanks for your reply!

Currently I have the automatically generated collections on my site. I still need to figure out how to apply the proper links to the collection pages

https://gogotires.com/collections/19555r15

--- edit: sorry this collection no longer exists but it was a basic collection in shopify admin that selects products by variant name

this is one page that links directly to the product but not to the specific variant I want. Even tho all the items are added here to the collection via a variant criteria on the collection settings, it still does not directly link them to that variant.

Matt

[Matt_Miller]

also,

I do not have code for the collection as it was generated with shopify. I assume I will need to have a custom coded collection page, just unsure where to start with that .

Matt

[Brendin]

No worries. If you could follow these instructions. and give us the code for you collection.liquid file we can help out a little better.

[Matt_Miller]

heres the code from collection.liquid

{% paginate collection.products by 20 %}

<header class="section-header section-header--large">
  <h1 class="section-header__title section-header__title--left">{{ collection.title }}</h1>
  <div class="section-header__link--right">
    {% if settings.collections_sort_enable %}
      {% include 'collection-sorting' %}
    {% endif %}
    {% if settings.collections_views_enable %}
      {% include 'collection-views' %}
    {% endif %}
  </div>
</header>

{% if settings.collections_tags_enable %}
  {% include 'collection-tags' %}
{% endif %}

{% if collection.description != blank %}
  <div class="rte rte--header">
    {{ collection.description }}
  </div>
  <hr>
{% endif %}

<div class="grid-uniform grid-link__container">

  {% for product in collection.products %}{% if product.type == 'Product Fee' %}{% continue %}{% endif %}

    {% include 'product-grid-item' %}

  {% else %}

    {% if shop.products_count == 0 %}
      {% unless emptyState %}
        {{ 'theme-onboarding.css' | global_asset_url | stylesheet_tag }}
        {% assign emptyState = true %}
      {% endunless %}

      <div class="grid__item">
        <div class="helper-section">
          <div class="helper-note">
            <span class="helper-icon"></span>
            <h3>{{ 'home_page.onboarding.modal_title' | t }}</h3>
            <p>{{ 'home_page.onboarding.no_products_collection' | t }}</p>
            <p><a class="admin-btn-primary" href="/admin/products/new">{{ 'home_page.onboarding.add_product' | t }}</a></p>
          </div>

          <div class="grid-uniform helper-content">
            {% assign index = 1 %}
            {% for i in (1..8) %}
              {% case i %}
                {% when 7 %}
                  {% assign index = 1 %}
                {% when 8 %}
                  {% assign index = 2 %}
              {% endcase %}
              <div class="grid__item one-half large--one-quarter">
                <a href="/admin/products" class="grid-link">
                  <span class="grid-link__image grid-link__image--product">
                    <span class="grid-link__image-centered">
                      {% capture imageUrl %}//cdn.shopify.com/s/images/themes/product-{{ index }}.png{% endcapture %}
                      {{ imageUrl | img_tag }}
                    </span>
                  </span>
                  <p class="grid-link__title">{{ 'home_page.onboarding.product_title' | t }}</p>
                  <p class="grid-link__meta">
                    <strong>$19.99</strong>
                  </p>
                </a>
              </div>
              {% assign index = index | plus: 1 %}
            {% endfor %}
          </div>
        </div>
      </div>
    {% else %}
      <div class="grid__item">
        <p><em>{{ 'collections.general.no_matches' | t }}</em></p>
      </div>
    {% endif %}

  {% endfor %}

</div>

{% if paginate.pages > 1 %}
  <hr>

  <div class="text-center">
    {% include 'pagination-custom' %}
  </div>
{% endif %}

{% endpaginate %}
 

THANKS

[Brendin]

Can we also see "product-grid-item.liquid"?

[Matt_Miller]

forsure haha thats the code im actually looking at already

{% unless grid_item_width %}
  {% assign grid_item_width = 'large--one-quarter medium-down--one-half' %}
{% endunless %}

{% unless current_collection == blank %}
  {% assign current_collection = collection %}
{% endunless %}

{% assign on_sale = false %}
{% assign sale_text = 'products.product.sale' | t %}
{% if product.compare_at_price > product.price %}
  {% assign on_sale = true %}
{% endif %}

{% assign sold_out = true %}
{% assign sold_out_text = 'products.product.sold_out' | t %}
{% if product.available %}
  {% assign sold_out = false %}
{% endif %}

<div class="grid__item {{grid_item_width}}{% if sold_out %} sold-out{% endif %}{% if on_sale %} on-sale{% endif %}">
  <a href="{{ product.url | within: collection }}" class="grid-link">
    <span class="grid-link__image grid-link__image--product">
      {% if on_sale and settings.collections_show_sale_circle %}
        <span class="badge badge--sale">
          <span class="badge__text{% if sale_text.size > 7 %} badge__text--small{% endif %}">{{ 'products.product.sale' | t }}</span>
        </span>
      {% endif %}
      {% if sold_out and settings.collections_show_sold_out_circle %}
        <span class="badge badge--sold-out">
          <span class="badge__text{% if sold_out_text.size > 9 %} badge__text--small{% endif %}">{{ 'products.product.sold_out' | t }}</span>
        </span>
      {% endif %}
      <span class="grid-link__image-centered">
        <img src="{{ product.featured_image.src | img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}">
      </span>
    </span>
    <p class="grid-link__title">{{ product.title }}</p>
    <p class="grid-link__meta">
      
      {% unless product.price == 0 %}
      
      {% capture price %}<strong>{{ product.price | money }}</strong>{% endcapture %}
      {% if product.price_varies %}{{ 'products.general.from_html' | t: price: price }}{% else %}{{ price }}{% endif %}
      {% if on_sale %}
        <br><s class="grid-link__sale_price">{{ product.compare_at_price | money }}</s>
      {% endif %}
      
      {% endunless %}
      
      {% if settings.product_reviews_enable %}
        <br><span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
      {% endif %}
    </p>
  </a>
</div>
 

[Brendin]

Ok one last question lol! How are you setting up the collection? Im gussing that in the admin you have a collection set to only show products based on the variant name?

[Matt_Miller]

yep that is 100% correct :) ty for all your help!