How can I add a gradient to a Craft theme footer?

Store Design
1

Hello, looking for code or a way to add a gradient into craft theme footer, tried

“#shopify-section-footer { background: linear-gradient(27deg, rgba(210,120,242,1) 0%, rgba(252,201,137,1) 100%) !important; } .site-footer { background: transparent!important; }”…

Do not have a theme.scss file

2

Hello @Enviromugs ,

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code

Go to Assets folder → base.css file

Add this following code at the bottom of file:

#shopify-section-footer {
  background: linear-gradient(27deg, rgba(210, 120, 242, 1) 0%, rgba(252, 201, 137, 1) 100%) !important;
}

.site-footer {
  background: transparent !important;
}

Save and preview

Hope this can help. Let us know if you need any further support.

Ali Reviews team.

3

Hi @Enviromugs

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

with the craft theme, you should try to add the code to the file base.css

Hope you find my answer helpful!

Best regards,

Richard | PageFly

4

Hi, @Enviromugs .

Follow These steps,

Go to the online store theme and go to base.css file paste the code mentiond below.

footer.footer.color-background-1.gradient.section-sections--19556171907383__footer-padding {background-image: linear-gradient(135deg, rgb(24, 42, 115) 0%, rgb(33, 138, 174) 69%, rgb(32, 167, 172) 89%);}

Result:

websensepro_0-1688972409420.png
websensepro_0-1688972409420.png1347×310 39.4 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

5

Hello @Enviromugs

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

.newsletter__wrapper.color-accent-1.gradient.content-container.isolate.content-container--full-width.section-template--15480072470782__1637170833db1b0e8f-padding {
    background: linear-gradient(27deg, rgba(210,120,242,1) 0%, rgba(252,201,137,1) 100%);
}
.footer:not(.color-background-1) {
    background: linear-gradient(27deg, rgba(210,120,242,1) 0%, rgba(252,201,137,1) 100%);
}
6

Thanks so much!