For some reason the theme I’m using has a larger size text for the metafields than the body. How do I change the text size? I’ve been trying for 2 hours now and I can’t find any solution that works. It’s the single line text metafield. Please and thank you.
1 Like
Hey @LiamsUSA
Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.
Best Regards,
Moeed
Hello @LiamsUSA
Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.
Deleted this
2 Likes
Hello @LiamsUSA
- In your Shopify Admin go to online store > themes > actions > edit code
- Find Asset > theme.css and paste this at the bottom of the file:
.product__subheading p {
font-size: inherit;
}
hello @LiamsUSA
Shopify themes usually render metafields with their own CSS class, so all you need is a tiny override in your theme’s stylesheet. Here’s how to target that single-line text metafield and shrink it down to match your body copy:
1. Find the right selector
- In your browser, right-click the metafield text and choose Inspect.
- Look for its wrapping class or data- attribute—for example you might see something like .
2. Add your override CSS
- In Shopify Admin, go to Online Store → Themes → Actions → Edit code.
- Open assets/base.css (or theme.css / component-product.css, wherever your theme keeps global styles).
- At the very bottom, paste something like this (adjust the selector you found):
/* Match single-line metafields to body text size /
.product__metafield–singleline {
font-size: 1rem; / or whatever size your body text uses */
line-height: 1.5;
}
- If your selector uses a data- attribute it might look like:
[data-metafield-type=“single_line_text_field”] {
font-size: 1rem !important;
}
3. Save and preview
Refresh your storefront page and the metafield text should now be the same size as your body text.
Did not work, tried this earlier and just tried again.
Tried this, can’t get it to work.
Hey @LiamsUSA
Follow these Steps:
-
Go to Online Store
-
Edit Code
-
Find theme.liquid file
-
Add the following code in the bottom of the file above tag
RESULT
If I managed to solve your problem then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
This worked, thank you!
1 Like
Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.