Issue increasing the size of vendor text on product page

[KatieFlintham1]

Hi,

I’m using the Aurora theme & am trying to increase the vendor text size on my product page.

I’ve added a line of code into the template to set the heading size but it doesn’t seem to work.

Can any help please?

Thanks

[juanvisbal]

Hi, can you send a link to preview your theme? Thanks.

[KatieFlintham1]

https://uk-school-shoes-uk.myshopify.com/products/alvin-snr-boys-leather-trainers-black

password: school

thank you

[juanvisbal]

Thanks. using the Theme Editor:

1. Click Customize to the right of your theme to open it.

2. Go to Theme settings and open the Custom CSS section. It should look something like this:

   

3. Paste the following code:

.product-general-info-block__vendor {
  font-size: var(--gsc-fz-11);
}​

• Click Save on the top right.

You can decrease the 11 in the parenthesis all the way down to 1 to increase the font size. Here’s all the font values:

--gsc-fz-1: 4.6rem;
    --gsc-fz-2: 4rem;
    --gsc-fz-3: 3.6rem;
    --gsc-fz-4: 3.2rem;
    --gsc-fz-5: 2.8rem;
    --gsc-fz-6: 2.6rem;
    --gsc-fz-7: 2.4rem;
    --gsc-fz-8: 2.2rem;
    --gsc-fz-9: 2rem;
    --gsc-fz-10: 1.8rem;
    --gsc-fz-11: 1.6rem;
    --gsc-fz-12: 1.4rem;
    --gsc-fz-13: 1.3rem;
    --gsc-fz-14: 1.2rem;

Let me know if I can help any further.

[KatieFlintham1]

Hey, thank you for your help but it doesn’t change that value.

Could you advise if I’ve missed something?

[juanvisbal]

It seems the custom code did not save. Could you share a screenshot of where you’re adding the code?

[BSS-Commerce]

Hi @KatieFlintham1 ,

Step 1: Go to Admin → Themes → Edit code

Step 2: Find the theme.js file or global.js

Step 3: Add the following code at the end of the theme.js or global.js file

const spanTitleElement = document.querySelector('.product-details__rte span');
if(spanTitleElement) {
    spanTitleElement.style.fontSize = "17px"
}

const liElements = document.getElementsByTagName("li");
if(liElements) {
    for (let i = 0; i < liElements.length; i++) {
      const liElement = liElements[i];
      const spanElements = liElement.getElementsByTagName("span");
    
      for (let j = 0; j < spanElements.length; j++) {
        let spanElement = spanElements[j];
        spanElement.style.fontSize = "14px";
      }
    } 
}

Result:
When not changing the font size:

After fixing the font size:


Hope it helps @KatieFlintham1 !

[KatieFlintham1]

Hey, not exactly what I was after on this post, but it did still help! Thank you