Shopify themes, liquid, logos, and UX
Hey everyone,
I was wondering how to remove the Sale button in my store. I'd like to have it removed from every page and keep the Sold out button.
Any help is greatly appreciated!
URL: https://glowee.nl/
Thank you.
try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/component-card.css ->paste below code at the bottom of the file.
.card__badge {
display: none;
}
Thank you @KetanKumar
This removed the Sale button on every page as wanted, but also removed the Sold out button which I would like to keep. Do you know how to do this?
Thank you!
sorry but i can;t see sold out! please show me
@KetanKumar No problem, I have removed your code so you can see the Sold out button now.
great thanks for update
You're welcome!
Still looking to get this done, anyone know how to do this?
i have just clear asap do you need remove sale and show to soldout right?
Correct, I’d like to remove the Sale buttons but keep the Sold out buttons. Thank you!
great thanks for asap clear
yes please sent product card gird code so i will check and update
@KetanKumar No problem and thank you for assisting me.
Did you mean component-product-grid?
This is the code:
.product-grid .grid__item {
padding-bottom: 2rem;
}
.product-grid.negative-margin {
margin-bottom: -2rem;
}
@media screen and (min-width: 750px) {
.product-grid .grid__item {
padding-bottom: calc(5rem + var(--page-width-margin));
}
.product-grid.negative-margin {
margin-bottom: calc(-5rem - var(--page-width-margin));
}
.product-grid.negative-margin--small {
margin-bottom: calc(-1rem - var(--page-width-margin));
}
}
product-card-liquid:
{% comment %}
Renders a product card
Accepts:
- product_card_product: {Object} Product Liquid object (optional)
- media_size: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
- show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
- add_image_padding: {Boolean} Enables padding on the image to space out the grid
- show_vendor: {Boolean} Show the product vendor. Default: false
- show_image_outline: {Boolean} Show card outline. Default: true (optional)
- show_rating: {Boolean} Show the product rating. Default: false
Usage:
{% render 'product-card', show_vendor: section.settings.show_vendor %}
{% endcomment %}
{{ 'component-rating.css' | asset_url | stylesheet_tag }}
<div class="card-wrapper">
<div class="card-information">
<div class="card-information__wrapper">
{%- if show_vendor -%}
<span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
<div class="caption-with-letter-spacing light">{{ product_card_product.vendor }}</div>
{%- endif -%}
{%- if product_card_product.featured_media -%}
<h3 class="card-information__text h5">
<a href="{{ product_card_product.url | default: '#' }}" class="full-unstyled-link">
{{ product_card_product.title | escape }}
</a>
</h3>
{%- endif -%}
{% comment %} TODO: metafield {% endcomment %}
<span class="caption-large light">{{ block.settings.description | escape }}</span>
{%- if show_rating and product_card_product.metafields.reviews.rating.value != blank -%}
{% liquid
assign rating_decimal = 0
assign decimal = product_card_product.metafields.reviews.rating.value.rating | modulo: 1
if decimal >= 0.3 and decimal <= 0.7
assign rating_decimal = 0.5
elsif decimal > 0.7
assign rating_decimal = 1
endif
%}
<div class="rating" role="img" aria-label="{{ 'accessibility.star_reviews_info' | t: rating_value: product_card_product.metafields.reviews.rating.value, rating_max: product_card_product.metafields.reviews.rating.value.scale_max }}">
<span aria-hidden="true" class="rating-star color-icon-{{ settings.accent_icons }}" style="--rating: {{ product_card_product.metafields.reviews.rating.value.rating | floor }}; --rating-max: {{ product_card_product.metafields.reviews.rating.value.scale_max }}; --rating-decimal: {{ rating_decimal }};"></span>
</div>
<p class="rating-text caption">
<span aria-hidden="true">{{ product_card_product.metafields.reviews.rating.value }} / {{ product_card_product.metafields.reviews.rating.value.scale_max }}</span>
</p>
<p class="rating-count caption">
<span aria-hidden="true">({{ product_card_product.metafields.reviews.rating_count }})</span>
<span class="visually-hidden">{{ product_card_product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}</span>
</p>
{%- endif -%}
{% render 'price', product: product_card_product, price_class: '' %}
</div>
</div>
<div class="card card--product{% if product_card_product.featured_media == nil %} card--text-only card--soft{% endif %}{% if product_card_product.featured_media != nil and show_image_outline %} card--outline{% endif %}" tabindex="-1">
<div class="card__inner">
{%- if product_card_product.featured_media -%}
{%- liquid
assign featured_media_aspect_ratio = product_card_product.featured_media.aspect_ratio
if product_card_product.featured_media.aspect_ratio == nil
assign featured_media_aspect_ratio = 1
endif
-%}
<div{% if add_image_padding %} class="card__media-full-spacer"{% endif %}>
<div class="media media--transparent media--{{ media_size }} media--hover-effect"
{% if media_size == 'adapt' and product_card_product.featured_media %} style="padding-bottom: {{ 1 | divided_by: featured_media_aspect_ratio | times: 100 }}%;"{% endif %}
>
<img
srcset="{%- if product_card_product.featured_media.width >= 165 -%}{{ product_card_product.featured_media | img_url: '165x' }} 165w,{%- endif -%}
{%- if product_card_product.featured_media.width >= 360 -%}{{ product_card_product.featured_media | img_url: '360x' }} 360w,{%- endif -%}
{%- if product_card_product.featured_media.width >= 533 -%}{{ product_card_product.featured_media | img_url: '533x' }} 533w,{%- endif -%}
{%- if product_card_product.featured_media.width >= 720 -%}{{ product_card_product.featured_media | img_url: '720x' }} 720w,{%- endif -%}
{%- if product_card_product.featured_media.width >= 940 -%}{{ product_card_product.featured_media | img_url: '940x' }} 940w,{%- endif -%}
{%- if product_card_product.featured_media.width >= 1066 -%}{{ product_card_product.featured_media | img_url: '1066x' }} 1066w,{%- endif -%}
{{ product_card_product.featured_media | img_url: 'master' }} {{ product_card_product.featured_media.width }}w"
src="{{ product_card_product.featured_media | img_url: '533x' }}"
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
alt="{{ product_card_product.featured_media.alt | escape }}"
loading="lazy"
class="motion-reduce"
width="{{ product_card_product.featured_media.width }}"
height="{{ product_card_product.featured_media.height }}"
>
{%- if product_card_product.media[1] != nil and show_secondary_image -%}
<img
srcset="{%- if product_card_product.media[1].width >= 165 -%}{{ product_card_product.media[1] | img_url: '165x' }} 165w,{%- endif -%}
{%- if product_card_product.media[1].width >= 360 -%}{{ product_card_product.media[1] | img_url: '360x' }} 360w,{%- endif -%}
{%- if product_card_product.media[1].width >= 533 -%}{{ product_card_product.media[1] | img_url: '533x' }} 533w,{%- endif -%}
{%- if product_card_product.media[1].width >= 720 -%}{{ product_card_product.media[1] | img_url: '720x' }} 720w,{%- endif -%}
{%- if product_card_product.media[1].width >= 940 -%}{{ product_card_product.media[1] | img_url: '940x' }} 940w,{%- endif -%}
{%- if product_card_product.media[1].width >= 1066 -%}{{ product_card_product.media[1] | img_url: '1066x' }} 1066w,{%- endif -%}
{{ product_card_product.media[1] | img_url: 'master' }} {{ product_card_product.media[1].width }}w"
src="{{ product_card_product.media[1] | img_url: '533x' }}"
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
alt="{{ product_card_product.media[1].alt | escape }}"
loading="lazy"
class="motion-reduce"
width="{{ product_card_product.media[1].width }}"
height="{{ product_card_product.media[1].height }}"
>
{%- endif -%}
</div>
</div>
{%- else -%}
<div class="card__content">
<h2 class="card__text h3">
<a href="{{ product_card_product.url | default: '#' }}" class="full-unstyled-link">
{{ product_card_product.title }}
</a>
</h2>
</div>
{%- endif -%}
<div class="card__badge">
{%- if product_card_product.available == false -%}
<span class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}">{{ 'products.product.sold_out' | t }}</span>
{%- elsif product_card_product.compare_at_price > product_card_product.price and product_card_product.available -%}
<span class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}">{{ 'products.product.on_sale' | t }}</span>
{%- endif -%}
</div>
</div>
</div>
</div>
Still looking for help, thank you!
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