Solved

Change the background of a section to a gradient

Nikki_Urban_Ink
Tourist
15 0 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!

Accepted Solution (1)

diego_ezfy
Shopify Partner
2935 562 883

This is an accepted solution.

@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

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


Kind regards,
Diego

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

View solution in original post

Replies 3 (3)

ZestardTech
Shopify Expert
5393 970 1291

Hello There,

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

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

diego_ezfy
Shopify Partner
2935 562 883

This is an accepted solution.

@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

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


Kind regards,
Diego

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

Nikki_Urban_Ink
Tourist
15 0 1

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.