Re: Dawn theme: Add a section with image/svg on top of the footer

Solved

Dawn theme: Add a section with image/svg on top of the footer

MT91
Excursionist
17 0 3

Hello!

 

I'd like to add this wave "background"/svg-file as shown in the picture, how can I achieve this?

 

Thanks in advance!Untitled-1.jpg

Accepted Solutions (2)
namphan
Shopify Partner
1605 201 219

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;
}
Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com

View solution in original post

namphan
Shopify Partner
1605 201 219

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;
}
Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com

View solution in original post

Replies 15 (15)

namphan
Shopify Partner
1605 201 219

Hi @MT91,

Do you have this background image? You can use CSS background code for it. 

You have experience with code?

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com
MT91
Excursionist
17 0 3

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? 

namphan
Shopify Partner
1605 201 219

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

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com
MT91
Excursionist
17 0 3

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

namphan
Shopify Partner
1605 201 219

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;
}
Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com
MT91
Excursionist
17 0 3

Hi Nam,

I pasted the code into to base.css file but nothing happens.

namphan
Shopify Partner
1605 201 219

Hi @MT91,

Please send me the store link, I will check it

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com
namphan
Shopify Partner
1605 201 219

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);
}
Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com
MT91
Excursionist
17 0 3

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? 

namphan
Shopify Partner
1605 201 219

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;
}
Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com
MT91
Excursionist
17 0 3

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?

namphan
Shopify Partner
1605 201 219

Hi @MT91,

I checked and it shows fine, can you explain more about it?

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com
MT91
Excursionist
17 0 3

I'm so sorry. I realized the image I wanted to show you didn't get uploaded. This is what I mean. Thanks!

 

copyright.jpg

namphan
Shopify Partner
1605 201 219

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;
}
Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com
namphan
Shopify Partner
1605 201 219

Hi @MT91,

If you have any questions, you can contact me directly.
Nice to meet you 😊

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com