How to add images next to heading title

[BaskHour]

Hi there,

I am redesigning my website and trying to make it more on brand. Would anyone know if it is possible to add SVGs or PNGs next to a heading title, such as the screenshot shown below? My new website is not published yet but here is the link if needed: baskhour.com

Thank you 🙂

[JohnE10]

Hi,

Yes, it's certainly doable. It'll require some basic coding knowledge, but one way to go about it would be to modify the header.liquid file (in the Dawn theme) by adding 2 image tags, 1 before and 1 after the existing header tag, and then maybe wrapping all 3 elements in a flex div to control the positioning of each element.

Cheers,

[Dan-From-Ryviu]

Hi @BaskHour 

Please send me that svg or png image link so I can provide you the code to do that

[BaskHour]

Hey Dan! Thank you so much for trying to help, here is the link 🙂 
https://cdn.shopify.com/s/files/1/0710/2683/5764/files/squiggle.svg?v=1696968863 

[ZestardTech]

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

h2.rich-text__heading::before {
content: url('https://baskhour.com/cdn/shop/files/quotation-mark-icon_cb57b931-93aa-4158-bd2b-29a39ac387f6.png?v=1678239447&width=150'); /* Replace with the path to your before image */
margin-right: 10px; /* Adjust the spacing as needed */
}
h2.rich-text__heading::after {
content: url('https://baskhour.com/cdn/shop/files/quotation-mark-icon_cb57b931-93aa-4158-bd2b-29a39ac387f6.png?v=1678239447&width=150'); /* Replace with the path to your after image */
margin-left: 10px; /* Adjust the spacing as needed */
}
h2.rich-text__heading.rte.inline-richtext.h2.scroll-trigger.animate--slide-in {
display: flex;
}

[BaskHour]

Hi ZestardTech, 
I appreciate your help! This is what it looks like with your code (screenshot below). Seems like the wrap is too small and I have to make the section full width? Let me know if I can do anything else  🙂