Change the background of a section to a gradient

Technical Q&A
1

Hi,

I am using the Impulse theme and want to change the background of my ‘image with text section’ on the homepage to be a gradient. Can anyone advise if this is possible?

The store is cassius2.myshopify.com

Passsword is geepre

Many thanks!

2

Hello There,

Please share me screenshot.
So that I will check and let you know the exact solution here.

3

@Nikki_Urban_Ink , do this to fix it in 20 seconds:

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:
.main-content [id*='shopify-section']:nth-child(2){
background-color: background: rgb(32,201,151);
background: linear-gradient(90deg, rgba(32,201,151,1) 0%, rgba(251,4,209,1) 100%);

padding: 40px 0px !important;
margin-top: 0px !important;
margin-bottom:0 !important;

}

diego_ezfy_0-1626247307966.png
diego_ezfy_0-1626247307966.png1285×647 257 KB

You can generate the gradient background in this website and then replace it with the 2nd and 3rd line of the code that I’m sharing.

This is the simple solution, but not the ideal. Ideally you’d want to have a developer to code an additional fields at the within the “Image with Text” section and wire them up with CSS, then you’d be able to have individual gradient colors for each section, hence giving you greater control and freedom to A/B test.

diego_ezfy_1-1626247493584.png
diego_ezfy_1-1626247493584.png351×206 3.26 KB

Kind regards,
Diego

4

Hi Diego,

Many thanks for your help, that works perfectly!

Can I also ask, is it possible to add an image that will overlap 2 sections? I want to add a heart on each page that will overlap the header image and the rich text section below, so it will float over the 2.