Link to home
Start Free TrialLog in
Avatar of John Le
John Le

asked on

How Do I fix this Shopify Collection Page Glitch/Problem?

Hello there!
Link to all products: https://chattanooga-shoe.myshopify.com/collections/all

The Issue:
When you filter the site by "size", products with color variants that are SOLD OUT in that particular size still appear in the main grid instead of being hidden. This is due to an app that we are using to split the color variants from one product and present them on the main collection table.

Why It's Happening:
We've installed an app called "Variants on Collection Page" to split the colored variants from within an individual product page onto the main collection table, resulting in all our products being displayed with their respective color variants beside them. The main issue we are running into here is that the app doesn't work well with the filter app we're using, Power Tools Suite, because the filter creates collections based on tags that it has auto-tagged. An example of how the issue manifests:

Let's say we have a product called "Roma Shoe" with three color variations, gray, brown and black. They have a full size run from Size 5 to 10, but size 7 in gray is SOLD OUT. Since "Roma Shoe" has two other colors, brown and black, that still have size 7 available, the main product (that encompasses all three colors) in the back end is still going to be tagged by Power Tools Suite "size-7" to be put into the auto-collection "7". There is no way for the filter app or the variant splitting app to know that size 7 in gray is SOLD OUT because the filtered results are basically a glorified list of collections created by auto-tags. From the collection page it would make it appear as though the gray shoe is in stock in size 7, but when you click through to the product page you find out it is a LIE and no longer in stock.

Here is a script that "Variants on Collection Page" had me put above the "</head>" tag in theme.liquid:

<!-- GSSTART Show variants. Do not change --> {% if request.path contains "/products/" %}{% else %}<script type="text/javascript"> gsVSCollectionId = {% if collection.id > 1 %} "{{ collection.id }}" {% else %} "0" {% endif %}; gsVSCollectionTags = '{{ current_tags | join: '&' | replace: "'", "\'" }}'; gsCollectionProdCnt = {{ collection.products_count }} ; gsCollection = { {% if collection.products %} {% paginate collection.products by 50 %} {% for product in collection.products %} {% assign imagescount = product.images | size %} {% if imagescount > 1 %} '{{ product.handle }}' : [ {% for image in product.images limit:2 %} "{{ image | img_url: '256x' }}", {% endfor %} ], {% endif %} {% endfor %} {% endpaginate %} {% endif %} }; </script> {% if collection.products %}<script type="text/javascript" src="https://gravity-apps.com/variantmanager/js/shopify/image_swap2857.js?v=fed0087fc192e9e4d860e8ac20954ea2"></script>{% endif %}{% endif %} <!-- Show variants code end. Do not change GSEND --> <!-- Image swap code end. Do not change GSEND -->

Open in new window



Here is a script that "Variants on Collection Page" had me put above the "</body>" tag in theme.liquid:

<!-- GSSTART Show variants BODY. Do not change -->{% if collection.products %} <div style="display: none !important;"> {% paginate collection.products by 50 %}{% for product in collection.products %}{% assign imagescount = product.images | size %}{% if imagescount > 1 %} <div style="display: none !important;" class="gsProductVariants" gsProductHandler="{{ product.handle }}" >{% assign variantImgsUsedStr = "" %} {% assign variantBySizeUsedStr = "" %}{% assign sizeoptionnr = 0 %} {% for option in product.options %}{% capture optioncaseins %}{{option | downcase}}{% endcapture %}{% if optioncaseins contains "size" %}{% assign sizeoptionnr = forloop.index %}{% endif %}{% endfor %} {% for variant in product.variants %}{% assign featuredImageSize = variant.featured_image | size %}{% if featuredImageSize > 0 %}{% if variantImgsUsedStr contains variant.featured_image %}{% else %}{% assign variantImgsUsedStr = variantImgsUsedStr | append: variant.featured_image %}{% assign canAddVariant = true %}{% if sizeoptionnr == 1 %}{% assign optionCheckVal = ";" | append: variant.option2 | append: ";" %}{% if variantBySizeUsedStr contains optionCheckVal %}{% assign canAddVariant = false %}{% else %}{% assign variantBySizeUsedStr = variantBySizeUsedStr | append: ";" | append: variant.option2 | append: ";" %}{% endif %}{% endif %} {% if sizeoptionnr == 2 %}{% assign optionCheckVal = ";" | append: variant.option1 | append: ";" %}{% if variantBySizeUsedStr contains optionCheckVal %} {% assign canAddVariant = false %}{% else %}{% assign variantBySizeUsedStr = variantBySizeUsedStr | append: ";" | append: variant.option1 | append: ";" %}{% endif %}{% endif %}{% if canAddVariant == true %} <p variantpriceid="{{ variant.id }}" originalprice="{{ product.price | money_without_trailing_zeros }}" minprice="{{ product.price_min | money_without_trailing_zeros }}" variantPrice="{{ variant.price | money_without_trailing_zeros }}"></p> <p varianttitleid="{{ variant.id }}" sizeoptionnr="{{ sizeoptionnr }}" optionuidtwo="{{ product.id }}{{ variant.option2 | escape }}" optiontwo="{{ variant.option2 | escape }}" originaltitle="{{ product.title | escape }}" variantTitle="{{ variant.title | escape }}" optionuid="{{ product.id }}{{ variant.option1 | escape }}"></p> <span variantid="{{ variant.id }}" gsvariantimage="{{ variant.featured_image | img_url: '256x' }}"></span> {% endif %}{% endif %}{% endif %}{% endfor %} </div>{% endif %}{% endfor %}{% endpaginate %}{% endif %} {% if collection.products %} <div style="display: none !important;" class="gsProductImages" > {% paginate collection.products by 50 %}{% for product in collection.products %} {% assign imagescount = product.images | size %}{% if imagescount > 1 %}{% for image in product.images limit:1 %} <span gsProductHandle="{{ product.handle }}" firstImage="{{ image | img_url: '256x' }}"></span> {% endfor %}{% endif %}{% endfor %}{% endpaginate %} </div> </div> {% endif %} <!-- Show variants code end BODY. Do not change GSEND -->

Open in new window



We need help in figuring out how to make the collections page filter out items that are SOLD OUT so that customers don't have to click through to the product page, only to discover supreme disappointment. Thank you in advance for any insight, ideas, inspiration or solutions.
This question needs an answer!
Become an EE member today
7 DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform.
View membership options
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.