Shopify themes, liquid, logos, and UX
Theme: Impulse
I'd like customers to see which sizes are sold out without clicking on the product to find out. Here's an example:
What code do I need to add & where?
Hello, @skywearthreads
Welcome to the Shopify community!
and Thanks for your Good question.
Please share your site URL,
So I will check and provide a solution here.
It can be done by doing some code customization. Please take the help of a developer and hire Shopify Expert or me
Thanks please check on PM.
I have the same problem can you help me ?
Hello, @Fitinfiniti
Welcome to the Shopify community!
and Thanks for your Good question.
Please share your site URL,
So I will check and provide a solution here.
The site is fitinfiniti.com
What I want is to make the container width bigger.
https://fitinfiniti.com/collections/women-all you can see that it's not full width.
There is a code that I need to change the max-width: but I don't find it. 😞
Thank you,.
Thanks
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.collections .container {
max-width: 100% !important;
}
@KetanKumar Thank you a lot Ketan! It works! You really helped me!
But, there is only for the collections, maybe there is a code that I should change to change the width of all the pages. Thank you!
I write this code, and seems like it works. Is this right?
.container {
max-width: 85% !important;
}
Yes, perfect
Hello, @skywearthreads
Welcome to the Shopify community!
and Thanks for your Good question.
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.out-of-stock-option::before {
position: absolute;
content: "";
width: 90%;
height: 1px;
background: #000;
transform: rotate(15deg) translateY(12px);
}
Once I add this code, how soon should I see an update on the website? It does not reflect any chance when I preview the changes. Thank you!
For reference, I am wanting to add the "strikethrough" on sold out variants of all products on my website so that customers do not have to click through each size to see what is in stock and what is not.
Thank you again!
It would show almost immediately if added correctly.
can you please share store url so i will check
I need help with this too, please can you help me?
thank you.
Hello, @hayleyj
Welcome to the Shopify community!
and Thanks for your Good question.
Please share your site URL,
So I will check and provide a solution here.
Hi! Thank you!
https://lwvqn88rc8go59ge-48633970837.shopifypreview.com/
Please lmk if that doesn’t work I’ll send the password privately?
Thanks for it
sorry but i can't see any issue give page link and screenshot.
Thanks
sorry but i can't see any issue for this store can you please share screenshot further issue
Hi there, I have the same problem. Strange the strikethrough is on one of the products but not all. Please help.
Hello, @Sunshine3
Welcome to the Shopify community!
and Thanks for your Good question.
Please share your site URL,
So I will check and provide a solution here.
Thanks for it
it can be done some customization code can you please contact PM
Hello,
I have the same problem.
please contact me if you can help.
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community!😊
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
thanks for it i have check your collection but i can't 2 price so it can be done some custom code
It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like
Can you help me with same problem?
Welcome to the Shopify community!😊
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
Hey i want Strike Through out of stock products in my Shopify Dawn Theme Please help me with that themamaklub.com
I also want to know how to solve this problem.
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community!😊
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
sorry your theme doesn't allow this its require custom code please share product girds item or product card so i will check and update
great thanks for code its also change other files also
let me know what other files you need
product from
can you please add this code and let me know
<!-- /snippets/product-grid-item.liquid -->
{% comment %}
This snippet is used to showcase each product during the loop,
'for product in collection.products' in collection.liquid.
A liquid variable (grid_item_width) is set just before the this
snippet is included to change the size of the container.
Once the variable is set on a page, all future instances of this
snippet will use that width. Overwrite the variable to adjust this.
Example
- assign grid_item_width = 'large--one-third medium--one-half'
{% endcomment %}
{% unless grid_item_width %}
{% assign grid_item_width = 'large--one-third medium--one-half' %}
{% endunless %}
{% unless width %}
{%- assign width = 310 -%}
{% endunless %}
{% unless height %}
{%- assign height = 415 -%}
{% endunless %}
{% assign on_sale = false %}
{% if product.compare_at_price > product.price %}
{% assign on_sale = true %}
{% endif %}
{% assign sold_out = true %}
{% if product.available %}
{% assign sold_out = false %}
{% endif %}
{%- assign variant = product.selected_or_first_available_variant -%}
{% capture img_id_class %}ProductImage-{{ product.featured_media.id }}{% endcapture %}
{% capture img_wrapper_id %}ProductImageWrapper-{{ product.featured_media.id }}{% endcapture %}
{%- assign featured_image = product.featured_media.preview_image %}
{%- assign img_url = featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<div class="grid__item grid-product {{ grid_item_width }} small--one-half{% if sold_out %} is-sold-out{% endif %}">
<div class="grid-product__wrapper">
<div class="grid-product__image-wrapper">
<a class="grid-product__image-link{% unless featured_image.src== blank %} grid-product__image-link--loading{% endunless %}" href="{{ product.url }}" data-image-link>
{% if featured_image.src== blank %}
<img class="grid-product__image" src="{{ featured_image.src | img_url: '1024x' }}" alt="{{ featured_image.alt | escape }}">
{% else %}
{% include 'image-style' with image: featured_image, small_style: true, width: width, height: height, wrapper_id: img_wrapper_id, img_id_class: img_id_class %}
<div id="{{ img_wrapper_id }}" class="product--wrapper">
<div style="padding-top:{{ 1 | divided_by: featured_image.aspect_ratio | times: 100 }}%;">
<img class="product--image lazyload {{ img_id_class }}"
data-src="{{ img_url }}"
data-widths="[180, 370, 590, 740, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ featured_image.aspect_ratio }}"
data-sizes="auto"
alt="{{ featured_image.alt | escape }}"
data-image>
</div>
</div>
<noscript>
<img class="grid-product__image" src="{{ featured_image.src | img_url: '1024x' }}" alt="{{ featured_image.alt | escape }}">
</noscript>
{% endif %}
</a>
{% if sold_out %}
<div class="grid-product__sold-out">
<p>{{ 'products.product.sold_out_html' | t }}</p>
</div>
{% elsif on_sale %}
<div class="grid-product__on-sale">
<p>{{ 'products.general.save_html' | t: saved_amount: saved_amount }}
{{ product.compare_at_price_max | minus:product.price | times:100 | divided_by:product.compare_at_price_max }}%
</p>
</div>
{% endif %}
</div>
<a href="{{ product.url }}" class="grid-product__meta">
<span class="grid-product__title">{{ product.title }}</span>
<span class="grid-product__price-wrap {% if product.compare_at_price > product.price %}item_with_compareatprice{% endif %} ">
<span class="long-dash">—</span>
{% if on_sale %}
<span id="ComparePrice" class="product-single__price--compare-at">{{ product.compare_at_price | money }}</span>
<span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
{% else %}
<span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
{% endif %}
<span class="grid-product__price">
{% if product.price_varies %}
{{ product.price_min | money_without_trailing_zeros }}
<span class="icon-fallback-text">
<span class="icon icon-plus grid-product__price-min" aria-hidden="true"></span>
<span class="fallback-text">+</span>
</span>
{% else %}
{{ product.price | money_without_trailing_zeros }}
{% endif %}
</span>
{%- if product.price_varies == false and variant.unit_price_measurement -%}
{%- capture unit_price_separator -%}
<span aria-hidden="true">/</span><span class="visually-hidden"> {{ 'general.accessibility.unit_price_separator' | t }} </span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
<span>
{%- if variant.unit_price_measurement.reference_value != 1 -%}
{{- variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ variant.unit_price_measurement.reference_unit }}
</span>
{%- endcapture -%}
<span class="product-unit-price">
<span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
<span>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
</span>
{%- endif -%}
</span>
{% if section.settings.product_vendor_enable %}
<p class="grid-product__vendor">{{ product.vendor }}</p>
{% endif %}
<!-- snippet/product-price.liquid -->
{% if product.title %}
{%- assign compare_at_price = product.compare_at_price -%}
{%- assign price = product.price -%}
{%- assign price_varies = product.price_varies -%}
{%- assign available = product.available -%}
{% else %}
{%- assign compare_at_price = 1999 -%}
{%- assign price = 1999 -%}
{%- assign price_varies = false -%}
{%- assign available = true -%}
{% endif %}
{%- assign money_price = price | money -%}
{% if compare_at_price > price %}
{% if price_varies %}
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<s class="product-price__price">{{ compare_at_price | money }}</s>
<span class="product-price__price product-price__sale">
{{ money_price }}
<span class="product-price__sale-label">{{ 'products.product.on_sale' | t }}</span>
</span>
{% else %}
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<s class="product-price__price">{{ compare_at_price | money }}</s>
<span class="product-price__price product-price__sale">
{{ money_price }}
<span class="product-price__sale-label">{{ 'products.product.on_sale' | t }}</span>
</span>
{% endif %}
{% else %}
{% if price_varies %}
<span class="product-price__price">{{ money_price }}</span>
{% else %}
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<span class="product-price__price">{{ money_price }}</span>
{% endif %}
{% endif %}
{% unless available %}
<span class="product-price__sold-out">{{ 'products.product.sold_out' | t }}</span>
{% endunless %}
</a>
</div>
</div>
hello, I tried and it doesn't work.
Thanks
sorry for that
but now simple change doesn't work please sent pm detail
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