Code to create custom badges for Spotlight theme 2.0

Store Design
1

Just wondering if anybody has successfully created custom badges for Spotify Spotlight theme. I realise I have to edit the card-product.liquid file and customise the css. Can anybody share code for this?

Ideally I would like to have a badge for Pre-Order based on a tag added at product level.

2

Hi @Emilio8

You can try to use this code in your Online store > Themes > Edit code, open card-product.liquid file,

Find this line of code in line 122

Add below code under it

{% if card_product.tags.size > 0 %}
  
    {% for tag in card_product.tags %}
      - {{ tag }}
    {% endfor %}
  

{% endif %}
3

Hi Dan,

Thanks but that is not what I am after. Your solution adds all the existing tags to the product card.

Instead, all I wish to do is have an option to change the Out Of Stock badge to Pre-Order for some product by adding a tag to the product.

I know I can change the language file, but that would not give me the option to use Out Of Stock and Pre-Order

Thank you

4

Please find this line of code in line 128 of card-product.liquid file

{{- 'products.product.sold_out' | t -}}

Replace with this code. Please replace “your custom tag” with your tag

{% if card_product.tags contains 'your custom tag'  %}
  Pre-Order
{% else %}
  {{- 'products.product.sold_out' | t -}}
{% endif %}
5

Thank you!

6

Very welcome