Shopify themes, liquid, logos, and UX
hey!
i have edited my code so that all variants show in the collection page, now I added a code to get all sold out items an opacity overlay so they have 0,5 opacity. but this only works for products with no variants, this Is the code I added to theme.scss.liquid in the bottom:
}
.grid-view-item--sold-out .grid-view-item__image {
opacity: 0.5;
}
and this code worked for the products that have no variants.
other than the "product-card-grid.liquid" I have a "product-card-grid-variant.liquid" to get all variants to show in the collection page. I have tested almost every solution on Shopify but none of them does anything
Solved! Go to the solution
This is an accepted solution.
Can you try to replace this:
<div class="grid-view-item{% unless product.available %} grid-view-item--sold-out{% endunless %} product-card">
with this:
<div class="grid-view-item{% unless variant.available %} grid-view-item--sold-out{% endunless %} product-card">
This is now checking if the variant is available instead of checking the product.
Hi, can you please share:
- Your site url
- The theme you are using
- The code you added to product-card-grid-variant.liquid
With that I think I will be able to help
thanks for a fast response.
my site: www.cle-collections.com
my theme is debut.
the code in product-card-grid-variant.liquid:
{% comment %}
Renders a product card using "Grid" style
Accepts:
- max_height: {Number} Maximum height of the product's image (required)
- product: {Object} Product Liquid object (required)
- show_vendor: {Boolean} Show the product's vendor depending on the section setting (optional)
Usage:
{% include 'product-card-grid', max_height: max_height, product: product, show_vendor: section.settings.show_vendor %}
{% endcomment %}
<div class="grid-view-item{% unless product.available %} grid-view-item--sold-out{% endunless %} product-card">
<a class="grid-view-item__link grid-view-item__image-container full-width-link" href="{{ variant.url | within: collection }}">
<span class="visually-hidden">{{ product.title }}</span>
</a>
{% capture img_id %}ProductCardImage-{{ section.id }}-{{ product.id }}{% endcapture %}
{% capture wrapper_id %}ProductCardImageWrapper-{{ section.id }}-{{ product.id }}{% endcapture %}
{%- assign preview_image = variant.image -%}
{%- assign img_url = preview_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% unless preview_image == blank %}
{% include 'image-style', image: preview_image, height: max_height, wrapper_id: wrapper_id, img_id: img_id %}
{% endunless %}
<div class="product-card__image-with-placeholder-wrapper" data-image-with-placeholder-wrapper>
<div id="{{ wrapper_id }}" class="grid-view-item__image-wrapper product-card__image-wrapper js">
<div style="padding-top:{% unless preview_image == blank %}{{ 1 | divided_by: preview_image.aspect_ratio | times: 100 }}%{% else %}100%{% endunless %};">
<img id="{{ img_id }}"
class="grid-view-item__image lazyload"
alt="{{ preview_image.alt }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ preview_image.aspect_ratio }}"
data-sizes="auto"
data-image>
</div>
</div>
<div class="placeholder-background placeholder-background--animation" data-image-placeholder></div>
</div>
<noscript>
{% capture image_size %}{{ max_height }}x{{ max_height }}{% endcapture %}
<img class="grid-view-item__image" src="{{ preview_image | img_url: image_size, scale: 2 }}" alt="{{ preview_image.alt }}" style="max-width: {{ max_height | times: preview_image.aspect_ratio }}px;">
</noscript>
<div class="h4 grid-view-item__title product-card__title" aria-hidden="true">{{ product.title }} - {{ variant.title }}</div>
{% include 'product-price-listing', product: variant, show_vendor: show_vendor %}
</div>
This is an accepted solution.
Can you try to replace this:
<div class="grid-view-item{% unless product.available %} grid-view-item--sold-out{% endunless %} product-card">
with this:
<div class="grid-view-item{% unless variant.available %} grid-view-item--sold-out{% endunless %} product-card">
This is now checking if the variant is available instead of checking the product.
thanks a lot, it worked perfectly!
I've spent so much time trying to figure this out, thanks!!!
You're welcome!
Hey, by any chance can you help me out with this issue on my site. I would like for the products to not de dimmed or have low opacity. www.vicesneakers.com
Can you help me with the same issue?
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024