Shopify themes, liquid, logos, and UX
Hello!
I'd like to add this wave "background"/svg-file as shown in the picture, how can I achieve this?
Thanks in advance!
Solved! Go to the solution
This is an accepted solution.
Hi @MT91,
Please change code:
.newsletter{
position: relative;
margin-top: 50px;
}
.newsletter:before {
content: '';
position: absolute;
top: -50px;
width: 100%;
height: 6rem;
left: 0;
background: var(--gradient-background);
background-image: url(https://cdn.shopify.com/s/files/1/0845/9491/7644/files/footer-bg3000.png) !important;
background-color: #fff !important;
background-position: top center !important;
background-size: cover;
}
This is an accepted solution.
Hi @MT91,
Please go to Actions > Edit code > Assets > section-footer.css file and paste this at the bottom of the file:
.footer {
padding-bottom: 0 !important;
}
.footer__content-bottom-wrapper:nth-child(2) {
max-width: none;
padding: 0;
background: #665145;
color: #ffffff;
padding-bottom: 12px;
margin-top: 12px;
}
Hi @MT91,
Do you have this background image? You can use CSS background code for it.
You have experience with code?
Hi Nam,
Yes, I have the bg image (https://cdn.shopify.com/s/files/1/0845/9491/7644/files/1.png?v=1722347735) and I also know a bit CSS and HTML. Not liquid though. I'm new to shopify. How can I add this above the footer?
Hi @MT91,
You need to create a transparent background image with wavy lines on top, like they do, I will help you add code for it
Hi Nam,
I realized that shopify doesn't support SVG. I've now created a png-file with transparent background and asymmetrical waves (not like in the first picture I showed). I'm unsure about the size but I want the background to cover the whole width on my shop responsively without getting "pixelated". Do you think 3000px width is too large?
Here's the file: https://cdn.shopify.com/s/files/1/0845/9491/7644/files/footer-bg3000.png?v=1723813420
Hi @MT91,
Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:
footer:before {
content: '';
position: absolute;
background-image: url(https://cdn.shopify.com/s/files/1/0845/9491/7644/files/footer-bg3000.png?v=1723813420);
top: -30px;
width: 100%;
height: 50px;
left: 0;
z-index: 3;
background-size: cover;
}
Hi Nam,
I pasted the code into to base.css file but nothing happens.
Hi @MT91,
Please send me the store link, I will check it
Hi @MT91,
Please add code:
.newsletter{
position: relative;
margin-top: 30px;
}
.newsletter:before {
content: '';
position: absolute;
top: -30px;
width: 100%;
height: 6rem;
left: 0;
background: var(--gradient-background);
background-image: url(https://cdn.shopify.com/s/files/1/0845/9491/7644/files/1.png) !important;
background-color: #fff !important;
background-position: top center !important;
background-size: contain;
background-repeat: repeat-x !important;
transform: rotateX(180deg);
}
Oh it works! But the background image is wrong. This is the correct one: https://cdn.shopify.com/s/files/1/0845/9491/7644/files/footer-bg3000.png
Can you help me adjust the code so the background image covers the whole width and doesnt repeat?
This is an accepted solution.
Hi @MT91,
Please change code:
.newsletter{
position: relative;
margin-top: 50px;
}
.newsletter:before {
content: '';
position: absolute;
top: -50px;
width: 100%;
height: 6rem;
left: 0;
background: var(--gradient-background);
background-image: url(https://cdn.shopify.com/s/files/1/0845/9491/7644/files/footer-bg3000.png) !important;
background-color: #fff !important;
background-position: top center !important;
background-size: cover;
}
Thank you! I adjusted the code a bit and now it looks as I desired! 😄
There's one last thing: I'd like to have a brown background color with the copyright text as in the picture. But when I try to change the background color for the copyright text the background color for the payment icons also changed. Can you help me with this?
Hi @MT91,
I checked and it shows fine, can you explain more about it?
I'm so sorry. I realized the image I wanted to show you didn't get uploaded. This is what I mean. Thanks!
This is an accepted solution.
Hi @MT91,
Please go to Actions > Edit code > Assets > section-footer.css file and paste this at the bottom of the file:
.footer {
padding-bottom: 0 !important;
}
.footer__content-bottom-wrapper:nth-child(2) {
max-width: none;
padding: 0;
background: #665145;
color: #ffffff;
padding-bottom: 12px;
margin-top: 12px;
}
Hi @MT91,
If you have any questions, you can contact me directly.
Nice to meet you 😊
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024