Shopify themes, liquid, logos, and UX
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:
AFTER:
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>
Hello @Goddess3
Could you kindly share the URL for the store, please?
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
Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!
Not working don't know why, this is how it looks on my page:
I want the wave take over the bottom of the Image Banner:
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
Up, please check out my reply and let me know what you think
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?
@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! 😄
UP, guys please help me out 😞
Find Global Growth Opportunities For Your Business with Shopify AcademyLearn how to exp...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025