Shopify themes, liquid, logos, and UX
I am trying to override the font-size set in the theme editor in my third-party theme. The Shopify theme editor setting goes up to 160px only—I would like my text to be huge.
I can't seem to specify the selector (in my custom CSS) well enough to override the theme.
Here is my preview link. I would like to style "More Goodness" (and the subtext) on the banner/hero image.
Solved! Go to the solution
This is an accepted solution.
In your liquid file (For Heading) :
[data-wetheme-section-id="{{ section.id }}"] .content-wrapper--text_static h1 {
font-size: 200px !important;
}
This will look something like this in your markup:
[data-wetheme-section-id="template--16842095952038__af3e824e-6ca9-4ac4-9510-a07cb14e4a66"] .content-wrapper--text_static h1 {
font-size: 200px !important;
}
In your liquid file (For subtext) :
[data-wetheme-section-id="{{ section.id }}"] .content-wrapper--text_static h4 {
font-size: 120px !important;
}
This is an accepted solution.
In your liquid file (For Heading) :
[data-wetheme-section-id="{{ section.id }}"] .content-wrapper--text_static h1 {
font-size: 200px !important;
}
This will look something like this in your markup:
[data-wetheme-section-id="template--16842095952038__af3e824e-6ca9-4ac4-9510-a07cb14e4a66"] .content-wrapper--text_static h1 {
font-size: 200px !important;
}
In your liquid file (For subtext) :
[data-wetheme-section-id="{{ section.id }}"] .content-wrapper--text_static h4 {
font-size: 120px !important;
}
Thank you! Worked like a charm.
Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025Learn how to increase conversion rates in every stage of the customer journey by enroll...
By Shopify Mar 5, 2025