Liquid, JavaScript, themes, sales channels
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!
Solved! Go to the solution
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;
}
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.
Kind regards,
Diego
Hello There,
Please share me screenshot.
So that I will check and let you know the exact solution here.
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;
}
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.
Kind regards,
Diego
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.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024