How can I customize my homepage button ONLY

Solved
Highlighted
Excursionist
28 0 4

Hello,

I added a button on my homepage by using the "image with text overlay" option.  However, when I customize the button using the theme colour settings to my liking this also changes my "add to cart" button on my product pages which I do not want. Would anybody be able to help me out?

www.linesix.ca 

 

Screen Shot 2020-11-06 at 9.23.09 PM.png

I would like to take the black background and box out leaving just the white "SHOP" text. I would also like to increase the font size and underline it if possible. Thank you so much. 

0 Likes
Highlighted

Hello.....
Please share your store URL .
So that I will check and let you know the exact solution here.

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
Highlighted
Excursionist
28 0 4

Hello,

my store url is in my original post but I will list it again here:

 

www.linesix.ca 

 

Thank you so much for your help!!!

0 Likes
Highlighted
Excursionist
11 0 4

Hi,

The theme colour settings for button properties are globally set in theme. If you change the color of button property it will effect ton all linked button in site.

You need to customized some home button settings via css.

Thanks

0 Likes
Highlighted
Excursionist
28 0 4

Yes I understand that. I am looking for help with the code to change it. Thank You

0 Likes
Highlighted

This is an accepted solution.

Hello LS001,
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

#shopify-section-hero-1 .hero-fixed-width__content a.btn.hero__btn {
    background-color: black;
    color: white;
    font-size: 24px;
    text-decoration: underline;
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
Highlighted
Excursionist
11 0 4

I am a Shopify Developer and I can help you and fixed this issue! You can contact me!

0 Likes
Highlighted
Excursionist
11 0 4

Here is the solution to change the button background - 

When Shopify renders sections, it wraps each section in a <div> element with a unique id attribute:

So your this section id is  - "shopify-section-hero-1"

here is step you need to follow-

1. go to theme editor

2. find assets folder and click it

3. find your css file like "theme.scss.liquid"

4 go to very bottom of the code and paste following code and you can also change bg color your own I have set it to red.

 

#shopify-section-hero-1{
.btn {
    background: red;
}
}

 

 

Hope this help you! If any issue please let me know!

Thanks

Highlighted
Excursionist
28 0 4

Thank you both for your help

0 Likes