Product page Text size

Hey all,

website - www.alluren.co

Hoping someone can help me change the font size of the text on my product pages. I know how to change the scale but do not want to increase size over the entire website. Would really appreciate someones assistance in increasing the font size of the content tabs on the product pages as seen in the image.

I also need to fix the content headings - when I increased the text scale the content tab heading on the product page mobile view now show the words cut off. Is there a way to correct this or do I need to reduce font scale for this to be displayed correctly?

Your help would be very much appreciated.

Lauren

1 Like

@Alluren

Please add the following code at the bottom of your css file.

.main-product__tab-content {    
    font-size: 1.3rem !important;
}

.main-product__tabs button {
    text-overflow: unset !important;
    padding-top: 3px !important;
}

Hope this works.

Hi @Alluren

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottow of the file:
.main-product__tab-content {    
    font-size: 1.3rem !important;
}

.main-product__tabs button {
    text-overflow: unset !important;
    padding-top: 3px !important;
}

Hey @Alluren,

The requested changes requires to do the custom code in your theme file.

Could you please share your store url along with the collab code so that I can take a look and do the requested changes.

Thanks

1 Like

Hey,

Thank you for your response. I have tried to add this to the bottom of base.css but unfortunately it didn’t work.

Hey,

Thank you for your response. I have tried to add this to the bottom of base.css but unfortunately it didn’t work. Any other suggestions?

Lauren

1 Like

Hey @The_ScriptFlow ,
thanks for your message - you’r help would be very much appreciated!

fb0d18-4.myshopify.com

code - 7733

Hi @Alluren

Ok dear, please share your store URL and collaborator code with me so I can check and provide you with the proper solution.

I just send you request please accept it.
Thanks

Hey Daniel,

Request has been accepted :slight_smile:

Hey @Alluren :waving_hand:

You can increase the font size only on product pages using a page-specific CSS selector, so it doesn’t affect the rest of your site.

Add this to your base.css or theme.css file:

/* Increase font size for product page text only */
.template-product .product__info {
  font-size: 1.1rem; /* Adjust as needed */
  line-height: 1.6;
}

/* Adjust tab headings */
.template-product .product__accordion .accordion__title {
  font-size: 1.15rem;
  white-space: normal; /* prevents text cutoff on mobile */
}

:white_check_mark: Why this works:

  • .template-product makes sure the rule applies only to product pages.

  • white-space: normal; fixes the issue of tab titles cutting off in mobile view.

If your theme uses different selectors (like .product-info-wrapper or .tab-heading), you can right-click → Inspect Element → and replace them with the correct ones.


:hammer_and_wrench: You can check out our Shopify Partner profile — we’ve built and shared several free Shopify app solutions to help store owners. Feel free to explore our profile and see how our apps can make your Shopify experience better!

Thank you so much for your help in resolving these issues!