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
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?
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
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.
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
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>
User | Count |
---|---|
455 | |
194 | |
139 | |
61 | |
42 |