How to add images next to heading title

BaskHour
Tourist
7 0 2

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 🙂

Screen Shot 2023-10-09 at 4.54.44 PM.png

Replies 5 (5)

JohnE10
Shopify Partner
91 10 13

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,

If my reply was helpful, Like and Accept. Or Buy Me a Beverage
App Development/Custom Modifications, Visit My Gig and let me how I can help
For help with your store speed optimization, Check Out My Other Gig
Feel free to email with any questions: ProjectCoder10@gmail.com

Dan-From-Ryviu
Shopify Partner
6944 1313 1339

Hi @BaskHour 

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

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

BaskHour
Tourist
7 0 2

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
Shopify Expert
5366 961 1286

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;
}

 

ZestardTech_0-1696915180856.png

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
BaskHour
Tourist
7 0 2

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  🙂

Screen Shot 2023-10-10 at 4.21.43 PM.png