Change the background of a section to a gradient

Solved
Nikki_Urban_Ink
Tourist
10 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!

0 Likes
Pallavi
Shopify Expert
2235 370 484

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
0 Likes

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

◦ Product page slider & thumbnails with swiping for free themes: Minimal | Debut | Brooklyn | Supply
◦ Replace apps with simple copy/paste code snippets. Examples clicking here.
0 Likes
Nikki_Urban_Ink
Tourist
10 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. 

 

0 Likes