Shopify themes, liquid, logos, and UX
i really need help with this, I'm using the impulse them and i'm having trouble with making the out of stock product visible but display out of stock. I will be happy if this works.
You can try inside your anchor tag put this:
{% if product.available != true %} disableClick {% endif %}
then css :
.disableClick{
pointer-events: none;
}
Or this
{% if product.available == true %} href="{{ product.url | within: collection }}" {% endif %}
tested working.
Can you please shed more light on how i can apply the code sir?
I don't have this paid theme, so i need your help to find the right file.
This file likely called 'grid-product_XXXXXX.liquid', and is under snippets in your theme.
Find that file, copy and paste here inside </> icon on top.
Confirm you want unclickable if no stock ok.
the only snippet i found that is close to is this 'collection-grid-item.liquid'
{%- liquid
unless grid_item_width
assign grid_item_width = 'small--one-half medium-up--one-third'
endunless
unless background_position
assign background_position = 'center center'
endunless
if block.settings.title != blank
assign title_output = block.settings.title
else
if collection.empty?
assign title_output = 'home_page.onboarding.collection_title' | t
elsif collection_title
assign title_output = collection_title
else
assign title_output = collection.title | escape
endif
endif
-%}
<div class="grid__item {{ grid_item_width }}">
<a href="{{ collection.url }}" class="collection-item collection-item--{{ settings.collection_grid_style }}" data-aos="row-of-{{ per_row }}">
{%- liquid
if settings.collection_grid_image == 'collection' and collection.image
assign collection_image = collection.image
else
assign collection_image = collection.products.first.featured_media.preview_image
endif
-%}
is this the right one sir?
@topmost1 wrote:the only snippet i found that is close to is this 'collection-grid-item.liquid'
this the right one ?
I think this is the one. Copy the whole file and paste into </>.
I need to find the 'a' tag and add a little code. Then it will work.
I don't understand what you mean by copying the whole file into </> sir. and also you said you need to find a tag and input some code sir.
@topmost1 wrote:I don't understand what you mean by copying the whole file into </> sir. and also you said you need to find a tag and input some code sir.
It's quite easy to copy the whole file. Just go to that file, click 'Ctrl' + 'A' on your keyboard to select whole file. Then 'Ctrl' + 'C' to copy.
Then come here paste into </> (look at top right of this editor),
by clicking 'Ctrl' + 'V'.
Click 'Post'.
Alternatively I can sent you collaborator request to access your theme.
here is the code
{%- assign fixed_aspect_ratio = false -%}
{% unless image_size == 'natural' %}
{%- assign fixed_aspect_ratio = true -%}
{% endunless %}
<div class="grid__item {{ grid_item_width }} hover-grow" data-aos="row-of-{{ per_row }}">
<div class="grid">
<div class="grid__item">
{%- if article.image -%}
<a href="{{ article.url }}" class="article__grid-image" aria-label="{{ article.title | escape }}">
{%- if fixed_aspect_ratio -%}
<div class="image-wrap">
<div
class="grid__image-ratio grid__image-ratio--cover grid__image-ratio--{{ image_size }} lazyload"
data-bgset="{% render 'bgset', image: article.image %}"
data-sizes="auto">
</div>
<noscript>
<img class="lazyloaded" src="{{ article.image | img_url: '400x' }}" alt="{{ article.title | escape }}">
</noscript>
</div>
{%- else -%}
<div class="image-wrap" style="height: 0; padding-bottom: {{ 100 | divided_by: article.image.aspect_ratio }}%;">
{%- assign img_url = article.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<img class="lazyload"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080]"
data-aspectratio="{{ article.image.aspect_ratio }}"
data-sizes="auto"
alt="{{ article.image.alt | escape }}">
<noscript>
<img class="lazyloaded" src="{{ article.image | img_url: '400x' }}" alt="{{ article.title | escape }}">
</noscript>
</div>
{%- endif -%}
</a>
{%- else -%}
<div class="article__grid-image">
{%- if fixed_aspect_ratio -%}
<div class="image-wrap">
<div
class="grid__image-ratio grid__image-ratio--cover grid__image-ratio--{{ image_size }} lazyload">
</div>
</div>
{%- endif -%}
</div>
{%- endif -%}
</div>
<div class="grid__item">
<div class="article__grid-meta">
{%- if section.settings.blog_show_date or article.tags.size > 0 or articles.comments_count > 0 -%}
<div class="article__date">
{%- if section.settings.blog_show_tags and article.tags.size > 0 -%}
{%- for tag in article.tags -%}
{% if tag contains "_" %}{%- assign tag_starts_with = tag | slice: 0 -%}{% if tag_starts_with == "_" %}{% if tag_count %}{%- assign tag_count = tag_count | minus: 1 | at_least: 0 -%}{% endif %}{% continue %}{% endif %}{% endif %}
<a href="{{ blog.url }}/tagged/{{ tag | handle }}">{{ tag }}</a> ·
{%- endfor -%}
{%- endif -%}
{%- if section.settings.blog_show_comments and article.comments_count > 0 -%}
<a href="{{ article.url }}#comments">
{{ 'blogs.comments.with_count' | t: count: article.comments_count }}
</a> ·
{%- endif -%}
{%- if section.settings.blog_show_date -%}
{{ article.published_at | time_tag: format: 'month_day_year' }}
{%- endif -%}
</div>
{%- endif -%}
<a href="{{ article.url }}" class="article__title">{{ article.title }}</a>
{%- if section.settings.blog_show_author -%}
<div class="article__author">by {{ article.author }}</div>
{%- endif -%}
{%- if section.settings.blog_show_excerpt -%}
<div class="rte article__excerpt">
{%- if article.excerpt.size > 0 -%}
{{ article.excerpt }}
{%- else -%}
{{ article.content | strip_html | truncatewords: 40 }}
{%- endif -%}
</div>
{%- endif -%}
</div>
</div>
</div>
</div>
It is wrong file.
The file is collection-grid-item.liquid under snippets.
Could be quite big file, but no problem.
I've created an account with only the theme access AND I'VE INBOX YOU WITH THE LOGINS
Not received access code yet. You can PM url directly and i send you request also.
SENT NOW SIR.
USE THE HOLIDAY 2021 THEME SIR.
Hi, it's done.
You can check with a all variants out-of-stock product.
The code edit is at product-grid-item.liquid.
PLEASE DO YOU USE THE THEME "HOLIDAY 2021"
@topmost1 wrote:PLEASE DO YOU USE THE THEME "HOLIDAY 2021"
Yes, it's the theme at top, unpublished.
To test, you can create a test product and set the stock to 0.
Also need help with this and would like to remove sale proce from sold out items. Any help would be appreciated, thanks
HI, maybe you can show your site link so that someone may help.
thank you, let me know if you need anything else
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