How can I change the 'Sold Out' badge to text in Minimal theme?

Store Design
1

Hello, I am using the Minimal theme and I want to change the Sold Out Circle badge that covers the product to a simple “sold out” text next to the price. So it would look something like

$68 - sold out

How can i achieve this?

Screen Shot 2022-02-25 at 11.00.36 PM.png
Screen Shot 2022-02-25 at 11.00.36 PM.png454×616 40.4 KB

2 Likes
2

Hello there @gavinfischenich I understand how you feel and I believe I can help you out. Inbox me your website URL so I’d access what the problem is

3

@gavinfischenich

can you please provide store url

4

www.fishersupply.us

5

@gavinfischenich

thanks for url can you try this code its proper look try

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss ->paste below code at the bottom of the file.
.badge--sold-out {top: 30px;left: 30px;width: 40px;height: 40px;font-size: 10px;}
6

That helped get rid of the circle badge, however what I would like to achieve is having “Sold Out” appear next to the price of the item. Is there code for this?

7

i dont want there to be a badge, i want it to just say sold out next to the price of the item.

1 Like
8

@gavinfischenich

yes, please share product gird item code so i will update

9

Screen Shot 2022-02-27 at 12.33.12 AM.png
Screen Shot 2022-02-27 at 12.33.12 AM.png2380×1272 577 KB

1 Like
10

@gavinfischenich

yes, please share us code

1 Like
11

{% unless current_collection == blank %}
{% assign current_collection = collection %}
{% endunless %}

{% assign on_sale = false %}
{% assign sale_text = ‘products.product.sale’ | t %}
{% if featured.compare_at_price > featured.price %}
{% assign on_sale = true %}
{% endif %}

{% assign sold_out = true %}
{% assign sold_out_text = ‘products.product.sold_out’ | t %}
{% if featured.available %}
{% assign sold_out = false %}
{% endif %}

{% if featured.title == ‘’ %}
{% comment %}add default state for product block in storefront editor{% endcomment %}
{% capture product_title %}{{ ‘home_page.onboarding.product_title’ | t }}{% endcapture %}
{% else %}
{% capture product_title %}{{ featured.title | escape }}{% endcapture %}
{% endif %}

{% if on_sale and section.settings.show_sale_circle %} {{ 'products.product.sale' | t }} {% endif %} {% if sold_out and section.settings.show_sold_out_circle %} {{ 'products.product.sold_out' | t }} {% endif %} {% if featured.title != '' %} {% unless featured.featured_image == blank %} {% capture img_id %}ProductImage-{{ featured.featured_image.id }}{% endcapture %} {% capture wrapper_id %}ProductImageWrapper-{{ featured.featured_image.id }}{% endcapture %} {%- assign img_url = featured.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

{% include ‘image-style’ with image: featured.featured_image, width: product_width, height: 480, wrapper_id: wrapper_id, img_id: img_id %}

{{ featured.featured_image.alt | escape }}
{% else %} {{ featured.featured_image.alt | escape }} {% endunless %} {{ featured.featured_image.alt | escape }} {% else %} {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %} {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }} {% endif %}

{{ product_title }}

{% if section.settings.vendor_enable %}

{{ featured.vendor }}

{% endif %} {% if featured.title != '' %}

{% capture price %}{{ featured.price | money }}{% endcapture %} {% if on_sale %} {{ 'products.product.regular_price' | t }} {{ featured.compare_at_price | money }} {% endif %} {% if featured.price_varies %} {{ 'products.general.from_html' | t: price: price }} {% else %} {% if on_sale %} {{ 'products.product.sale_price' | t }} {% else %} {{ 'products.product.regular_price' | t }} {% endif %} {{ price }} {% endif %}

{% endif %}
12

HERE IS THE CODE

{% unless current_collection == blank %}
{% assign current_collection = collection %}
{% endunless %}

{% assign on_sale = false %}
{% assign sale_text = ‘products.product.sale’ | t %}
{% if featured.compare_at_price > featured.price %}
{% assign on_sale = true %}
{% endif %}

{% assign sold_out = true %}
{% assign sold_out_text = ‘products.product.sold_out’ | t %}
{% if featured.available %}
{% assign sold_out = false %}
{% endif %}

{% if featured.title == ‘’ %}
{% comment %}add default state for product block in storefront editor{% endcomment %}
{% capture product_title %}{{ ‘home_page.onboarding.product_title’ | t }}{% endcapture %}
{% else %}
{% capture product_title %}{{ featured.title | escape }}{% endcapture %}
{% endif %}

{% if on_sale and section.settings.show_sale_circle %} {{ 'products.product.sale' | t }} {% endif %} {% if sold_out and section.settings.show_sold_out_circle %} {{ 'products.product.sold_out' | t }} {% endif %} {% if featured.title != '' %} {% unless featured.featured_image == blank %} {% capture img_id %}ProductImage-{{ featured.featured_image.id }}{% endcapture %} {% capture wrapper_id %}ProductImageWrapper-{{ featured.featured_image.id }}{% endcapture %} {%- assign img_url = featured.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

{% include ‘image-style’ with image: featured.featured_image, width: product_width, height: 480, wrapper_id: wrapper_id, img_id: img_id %}

{{ featured.featured_image.alt | escape }}
{% else %} {{ featured.featured_image.alt | escape }} {% endunless %} {{ featured.featured_image.alt | escape }} {% else %} {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %} {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }} {% endif %}

{{ product_title }}

{% if section.settings.vendor_enable %}

{{ featured.vendor }}

{% endif %} {% if featured.title != '' %}

{% capture price %}{{ featured.price | money }}{% endcapture %} {% if on_sale %} {{ 'products.product.regular_price' | t }} {{ featured.compare_at_price | money }} {% endif %} {% if featured.price_varies %} {{ 'products.general.from_html' | t: price: price }} {% else %} {% if on_sale %} {{ 'products.product.sale_price' | t }} {% else %} {{ 'products.product.regular_price' | t }} {% endif %} {{ price }} {% endif %}

{% endif %}
13

I am trying to copy and paste the code here but it will not let me.

14

how do i share it?

1 Like
15

@gavinfischenich

if possible to give me theme access so i will quiack fix

16

how do i do that?

1 Like
17

@gavinfischenich

https://help.shopify.com/en/manual/your-account/staff-accounts/create-staff-accounts