A Shopify store owner wants to make the caption text below a CTA button in an image banner display in italic style.
Solution Provided:
A working CSS code snippet was shared to add to the theme.liquid file, just above the closing </body> tag:
<style>
p.image-with-text__text.image-with-text__text--caption .subtitle.subtitle--medium.subtitle {
font-style: italic !important;
}
</style>
Current Status:
The solution initially worked on desktop, but the original poster reported that the italic styling is not applying on mobile devices. The issue remains unresolved for mobile view, with the user seeking additional help to extend the fix across all device types.
Hey there,
Hope everyone is doing well. I wish to change the font-style of the caption that is under the CTA button in the image banner. I want to make it Italic. Is there a custom code that will help me out to make it happen?
I am attaching a screenshot so you can get to see more specifically:
Thanks in advance!
Cheers,
KRAFTIO
Hey @Kraftio_BG,
Welcome to the Shopify Community! Really excited to help you tackle this one.
Mind sharing your store URL so I can dive in and see exactly what’s going on? If you’ve got a password set up, just toss that my way too. I’ll take a thorough look at your setup and get you a rock-solid solution that’s clean, optimized, and works like a charm.
Looking forward to getting this wrapped up for you.
Best,
Shubham | Untechnickle
Hey @Kraftio_BG
Follow these Steps:
<style>
p.image-with-text__text.image-with-text__text--caption.subtitle.subtitle--medium.subtitle {
font-style: italic !important;
}
</style>
RESULT:
If I managed to help you then a Like would be truly appreciated.
Best,
Moeed
Thank you so much. It helped and worked out.
Have an amazing day!
Best,
KRAFTIO
Hey, Cherry,
Thank you so much for answering. Unfortunately it did not worked out with this code. But! Moeed above you answered and it worked. So you can take a look.
Thank you one more time. Have an amazing day!
Best,
KRAFTIO
Hey! Yes, you can make that caption italic with a small CSS tweak, assuming the caption has its own class or is inside a unique container under the image banner.
Try this custom CSS:
css
CopyEdit
.image-banner__text .caption,
.banner__content .caption {
font-style: italic !important;
}
If that doesn’t work right away, right-click on the caption in your browser (use Inspect) and check what class or tag it’s using. You might need to adjust the selector based on your theme.
If you’re not comfortable digging through the code or want to clean up other banner text styles too (like spacing, font size, mobile layout), I help store owners customize these exact sections every day.
Let me know if you’d like me to jump in and get it done quickly.
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.
Hey there @Moeed,
Yesterday the code was working perfectly, but apparently, on mobile the code is not working. I know it doesnt make sense, but somehow thats the situation. Do you know how to do the same on mobile, so it gets italic or its not possible?
Thanks in advance, again!
Stay safe,
KRAFTIO