Change font size in Debut them/ product page

[Miha_Zoubek]

Hello

how to change only font size and color of the fonts in the product page of Debut theme? in product-price.liquid where this is defined, i see that if i define different size and color, this is than changed also on collection page.

I would like to change it only in product page.

tnx

miha

[May · Accepted solution]

Hi, Miha!

This is May from Shopify. Thank you for posting your question!

It looks like you are trying to change the font size and color for your product price? If this is the case, you are correct! When you change the code in ‘product-price.liquid’, the font size and color will also change on the collections page. I am not an expert in coding, therefore I am not 100% certain whether or not this is the best approach. However, I find that you can avoid this by making a duplicate ‘product-price.liquid’ file. Then, after you create this file, you can add the styling and reference this inside ‘product-template.liquid’. I will explain this in more details below!

Before making any changes to your code, I highly recommend making a duplicate of your theme, in case of any unintended results. After you make a duplicate,feel free to follow these steps!

    1. For starters, you will want to go to your theme code editor by going to your admin, click on ‘Online Store > Actions > Edit code’.

    2. In your ‘Snippets’ folder, select ‘product-price.liquid’, and copy all of the code inside the file.

    3. Right below ‘Snippets’ folder, click on ‘Add a new snippet’, and call your new snippet ‘product-page-price’.

    4. Now, you’ve created a new file called ‘product-page-price.liquid’! Then, paste your code from ‘product-price.liquid’ here.

    5. To change the price’s font size and color, you’ll want to search for ‘price-item’, and add this code inside the triangle bracket:

style=”font-size: 20px; color: #000;”

    Add this code to ‘price-item--regular’ to change your regular product price, and ‘price-item--sale’ to change your sale price. You can adjust your font size by adjusting the number after ‘font-size:’ and your color by changing the hex color value after ‘color:’.

    6. Click ‘Save’.

Now, let’s use this file!

    1. Go to your ‘Sections’ folder, and select ‘product-template.liquid’.

    2. Search for ‘product__price’.

    3. Replace

{% include 'product-price', variant: current_variant %}

with

{% include 'product-page-price', variant: current_variant %}

    4. Click ‘Save’.

If you are not comfortable with making this change, I highly suggest reaching out to our Shopify Experts. Alternatively, since you are using a theme made by Shopify, our theme support may be able to look into making the change as well if your account is eligible!

Please let me know if this isn't quite what you were after, or if you have any other questions!

Kind Regards,

May

Shopify Support

[Miha_Zoubek]

May,

thank you very much. That is exactly what I did 🙂

miha

[Vital_HC]

Hello, I am having the same problem. I need to make the product price bigger on the product page, but when I check my snippets there is no file name of product-price.liquid. What should I do?

[May]

Hi, @Vital_HC!

Are you using Debut theme? What theme version are you currently on? If you are on the newest version of Debut, you should be able to find 'product-price.liquid' inside the 'Snippets' folder.

The tutorial above may not work if you are trying to edit themes other than Debut. If you are wanting to edit Shopify themes other than Debut, our theme specialists may be able to look into making the change for you if your account is eligible. Please let me know if you'd like to explore this route!

Kind regards,

May.

[gofuturefresh]

How do I change color of font of the product title but each product must have a different color.

[May]

Hi, @gofuturefresh!

Changing product titles font with different colours for each product requires advanced coding skills which is beyond my capability. In this case, I highly recommend reaching out to a Shopify Expert or start a new topic in Shopify Design forum, and hopefully other experts here can provide some insights on how to achieve this. 

Let me know if you have any follow up questions. 

Kind regards,

May.

[arvincharchi]

Hi, Can this be done on venture theme? I need to increase the size of the price on the product page