Dawn Theme - Custom Liquid in Image Banner

Goddess3
New Member
21 0 0

Hey everyone 🙂

I want to use SVG code via Custom Liquid, inside my Image banner so it will look like this in the end:

BEFORE:

before.png

AFTER:

after.jpg

 

This is the SVG code I put in the Custom Liquid element:

 

 

<div style = "margin-bottom: -10px">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 60 1440 175">
<rect width="1920" height="1080" fill="#F3F3F3"/>
<path fill="#242833" fill-opacity="1" d="M0,64L48,80C96,96,192,128,288,160C384,192,480,224,576,208C672,192,768,128,864,128C960,128,1056,192,1152,197.3C1248,203,1344,149,1392,122.7L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z">
</path>
</svg>
</div>

 

 

The text itself("Feeling disconnected...") is a Rich Text element place under the Image Banner with the gold text.  So I want the gray background of the Rich Text will be over the bottom of the Image Banner with svg wage tag please

How can I make it look like the illustration in the "After" screenshot?
Thanks in advance guys!

Replies 8 (8)

Rishihuptech
Shopify Partner
495 84 97

Hello @Goddess3 

Could you kindly share the URL for the store, please?

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
Goddess3
New Member
21 0 0

AnneLuo
Shopify Partner
529 107 105

Hi, @Goddess3 

You should add these codes to the custom liquid, and put it below the Image Banner.

<div style = "margin-bottom: -10px">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 60 1440 175">
<rect width="1920" height="1080" fill="#F3F3F3" class="svg-rect"/>
<path fill="#242833" fill-opacity="1" d="M0,64L48,80C96,96,192,128,288,160C384,192,480,224,576,208C672,192,768,128,864,128C960,128,1056,192,1152,197.3C1248,203,1344,149,1392,122.7L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z">
</path>
</svg>
</div>
<div class="text">
Feeling disconnected from your partner?Struggling with self-doubt and lack ofconfidence? Are you finding it challenging
to express your needs and desiresor perhaps ignored warning signs in relationships?
</div>
<style>
.text{
color:#fff;
padding: 60px;
text-align: center;
background-color: #242833;
}
.svg-rect {
fill:rgba(255,255,255,0)
}
.svg-container{
positon: absolute;
top: 200px
}
</style>

 

After modification, it will be displayed as follows

 

AnneLuo_0-1712838671222.png

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

 

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   Buy Me A Coffee
Goddess3
New Member
21 0 0

Not working don't know why, this is how it looks on my page:

Screenshot_59.png

 

I want the wave take over the bottom of the Image Banner:

after.jpg

 

Also, I must say, that the text itself("Feeling disconnected...") is a Rich Text element place under the Image Banner with the gold text.

So I want the gray background of the Rich Text will be over the bottom of the Image Banner with svg wage tag please

Goddess3
New Member
21 0 0

Up, please check out my reply and let me know what you think

AnneLuo
Shopify Partner
529 107 105

Can you share your store url? I understand the location issue now. Is there another point that you don't want the text content to be placed in the custom liquid?

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   Buy Me A Coffee
Goddess3
New Member
21 0 0

https://goddessfeminine.com/

 


@AnneLuo wrote:

Can you share your store url? I understand the location issue now. Is there another point that you don't want the text content to be placed in the custom liquid?

Actually the only reason that I want the text content to be in Rich Text and not in Custom Liquid is for the sense of order and organization. If you can make my wish come true via Custom Liquid then so be it! 😄

Goddess3
New Member
21 0 0

UP, guys please help me out 😞