How can I modify the font size in custom liquid?

Store Design
1

Hi

I use the following snippet in custom liquid to show different variant name in the product page:

{% for variant in product.variants %}
{% if product.selected_or_first_available_variant.id == variant.id %}
<strong> {{ variant.metafields.my_fields.variant_title }}</strong>
{% endif %}
{% endfor %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$(".no-js-hidden").on("click", function(){
var refreshint = setInterval(function(){
location.reload();
}, 1000);    });   });
</script>

Can any one tell me how can I change the font size? I want this section to replace the title of the product, and currently it’s way to small.

Thanks

1 Like
2

@Shauletay

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

Hi @Shauletay ,

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

4

@KetanKumar

check out this page:

https://www.mycozmo.com/products/cuddler-1-5-seater

p: gliask

thank you

1 Like
5

@AvadaCommerce

check out this page:

https://www.mycozmo.com/products/cuddler-1-5-seater

p: gliask

thank you

6

@Shauletay

great thanks for url yes please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/section-main-product.css ->paste below code at the bottom of the file.
.product__info-container strong:first-child {
    font-size: 24px; /* change value as you like */
}
7

@KetanKumar

thanks. is there a way to do from the custom liquid section and not through the shop code?

1 Like
8

@Shauletay

yes please send section screenshot

9

@KetanKumar

this is the code im using

{% for variant in product.variants %}
{% if product.selected_or_first_available_variant.id == variant.id %}
<strong> {{ variant.metafields.my_fields.variant_title }}</strong>
{% endif %}
{% endfor %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$(".no-js-hidden").on("click", function(){
var refreshint = setInterval(function(){
location.reload();
}, 1000);    });   });
</script>
1 Like
10

@Shauletay

can you try this code

{% for variant in product.variants %}
{% if product.selected_or_first_available_variant.id == variant.id %}
 **{{ variant.metafields.my_fields.variant_title }}**

{% endif %}
{% endfor %}