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?
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024