Shopify themes, liquid, logos, and UX
I want it to be pale like the attached image (Shopify Brooklyn Theme) for out-of-stock products. I did research for this but it didn't work. The codes didn't work. I am using the theme called Motion. I would be glad if you help
My store
https://7gunmarka.myshopify.com/
Solved! Go to the solution
This is an accepted solution.
@Yedigunmarka – like so? 😉
Sorry, I was looking at collection tiles with my answer above … all you need to do is open the file /snippets/product-grid-item.liquid and find the following code in line 26:
<div class="grid__item grid-product {{ grid_item_width }}{% if settings.quick_shop_enable %} grid-product__has-quick-shop{% endif %}" data-aos="row-of-{{ per_row }}" data-product-handle="{{ product.handle }}" data-product-id="{{ product.id }}">
Then replace it (add that final attribute, actually) with …
<div class="grid__item grid-product {{ grid_item_width }}{% if settings.quick_shop_enable %} grid-product__has-quick-shop{% endif %}" data-aos="row-of-{{ per_row }}" data-product-handle="{{ product.handle }}" data-product-id="{{ product.id }}"{% unless product.available %} style="opacity: 0.5;"{% endunless %}>
… and you're set.
Hope this solves it.
Mario
@Yedigunmarka - it’s not a difficult thing to accomplish, but without knowing the theme source code it’s very likely step by step instructions won’t hit the nail on the head.
what I would do is, apply a class to the given product the collection page, by checking its availability. Like …
<div class="grid__item{% unless product.available %} product-soldout{% endunless %}<!-- there are more css classes here -->">
And then modify the opacity for that class via CSS like …
.grid__item.product-soldout {
opacity: 0.5;
}
Note: I don’t have access to the Motion theme, so you might be best off looking for grid__item and adding the unless-block there; I assume the product-object is available there.
Hope this helps … Mario
I'm sorry. I can't find collection page css. I have collection only or main collection.. I check your codes but i can't find 😞
Start looking in /templates/collection.liquid. You should at least find references to files which should eventually be responsible for rendering the product grid items.
@Yedigunmarka – alright, I see that's an OS 2.0 setup. In that case, look into the .liquid files in the /sections folder!
Mario
@r8r Sorry. I've looked at all of them. Could you please come in and have a look?
This is an accepted solution.
@Yedigunmarka – like so? 😉
Sorry, I was looking at collection tiles with my answer above … all you need to do is open the file /snippets/product-grid-item.liquid and find the following code in line 26:
<div class="grid__item grid-product {{ grid_item_width }}{% if settings.quick_shop_enable %} grid-product__has-quick-shop{% endif %}" data-aos="row-of-{{ per_row }}" data-product-handle="{{ product.handle }}" data-product-id="{{ product.id }}">
Then replace it (add that final attribute, actually) with …
<div class="grid__item grid-product {{ grid_item_width }}{% if settings.quick_shop_enable %} grid-product__has-quick-shop{% endif %}" data-aos="row-of-{{ per_row }}" data-product-handle="{{ product.handle }}" data-product-id="{{ product.id }}"{% unless product.available %} style="opacity: 0.5;"{% endunless %}>
… and you're set.
Hope this solves it.
Mario
@r8r Done. Thank you so much. I would like to make a payment to you, but paypal and other payment methods are closed in Turkey. Please forgive me. God bless you
@Yedigunmarka – no problem, thanks still. If you're in a generous mood, you can donate money to a cancer research in both our names!
Mario
Donated. Don't worry. Thank you🙏🏻
Hi. I’m trying to add opacity (get rid of the greying) to my sold out items so that all of the items are clear to see like the original photo. I’m also trying to get these items to appear in a grid instead of collage. My shopify doesn’t seem to give a grid or collage option. Any help would be great. Thanks!
Hello Mario
This code works great! Is it also possible to reduce only the opacity of the image and not at the tag?
Hello
I also want to reduce the opacity of sold-out products but cant find collection.liquid
Using Refresh Theme
URL: www.sonashi.pk
@r8r I'm sorry. I can't find collection page css. I have collection only or main collection.. I check your codes but i can't find
Hello. My sold out images are greyed out in Brooklyn theme. I would like them to be the same as the non sold out images (but keep the ‘sold out’ icon. My second issue is that my sold out items are appearing larger than my non sold out items. I would like them to all be the same size. Any help would be hugely appreciated. Thanks. I am lukewilliamsart.myshopify.com
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