Font size and weight help in a custom liquid code

Pfunk
Visitor
2 0 1

Hello!

Im using this code to add in an inventory count to a specific product. Is it possible to add weight and font size to it that will only affect the specific Text contained in the code?

 

{% assign current_variant = product.selected_or_first_available_variant %}
<div class="inventoryNote form__label">
{% if current_variant.available %}
{% if current_variant.inventory_quantity > 0 and current_variant.inventory_quantity <= 10 %}We have {{ current_variant.inventory_quantity }} in stock
{% elsif current_variant.inventory_quantity > 10 %}We have more than 10 in stock

{% endif %}
{% endif %}
</div>

Replies 3 (3)

BSS-Commerce
Shopify Expert
3380 448 500

Hi @Pfunk ,

You can use HTML and inline CSS to style the specific text contained in your code. Here's an example where I've added weight and font size to the inventory count text:

{% assign current_variant = product.selected_or_first_available_variant %}
<div class="inventoryNote form__label">
  {% if current_variant.available %}
    {% if current_variant.inventory_quantity > 0 and current_variant.inventory_quantity <= 10 %}
      We have <span style="font-weight: bold; font-size: 16px;">{{ current_variant.inventory_quantity }}</span> in stock
    {% elsif current_variant.inventory_quantity > 10 %}
      We have more than 10 in stock
    {% endif %}
  {% endif %}
</div>

 

In this example, I wrapped the {{ current_variant.inventory_quantity }} in a <span> tag and applied inline styles to it. You can adjust the font-weight and font-size values to suit your design preferences. Feel free to modify the styles as needed.

If my solution helps, please tick marked as solutions. Thanks and have a nice day! @Pfunk 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

Pfunk
Visitor
2 0 1

Thank you so much for the help!

That worked on the actual number value but not the text around it.  Is it possible to also include a font/weight to the text?

 

This is an example of what that code did  (We have 1 in stock)

 

Once again I wanted to thank you for the quick reply and help with the issue!

Ole_
Shopify Partner
41 8 17

If you want the whole line of text to look like the number in the example, then change this line

 We have <span style="font-weight: bold; font-size: 16px;">{{ current_variant.inventory_quantity }}</span> in stock

to this:

 <span style="font-weight: bold; font-size: 16px;">We have {{ current_variant.inventory_quantity }} in stock</span>
If you find my suggestions helpful, kindly express your feedback by liking or marking them as a solution.

visionz.de