I want help in changing the color of the buttons on my desktop view.

Store Design
, , , ,
1

Hello guys,

I need help with a few things -

  1. How can I change the color of the buttons on the Desktop Home page - a) Shop Bestsellers b) Shop Sale

how can I change these two buttons to this color - #af7564

  1. How can I make these 2 sections in the center (Right now it is left aligned)

Section 1 - A note from Founders - I want the image to be in the center.

Section 2 - Blanketing the Indian community - I want the image to be in the center.

  1. How can I make the icons a little big on the desktop view? -

Location of the icons - Just before the footer

STORE URL : https://brownsugar.co.in/

Please let me know if someone can help me do this.

Thank you so much.

1 Like
2

Hi @Vanshchavada1

Would you mind taking a look and sharing your store’s URL along with the password if it’s protected?

1 Like
3

Yes,

https://brownsugar.co.in/

I’m so sorry, but I completely forgot to share the store URL.

Here you go.

4

Thanks for the info, check this one.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

@media only screen and (min-width: 767px){
.rich-text__inner a[href="/collections/sale"], .rich-text__inner a[href="/collections/best-sellers"] {
    color: #af7564;
}
    
div#shopify-section-template--18119072252120__gallery_K73gD6 .gallery__inner {
    grid: unset;
}
    
div#shopify-section-template--18119072252120__gallery_K73gD6 .gallery__item figure {
    width: 50%;
    margin: auto;
    height: 50%;
}
    
div#shopify-section-template--18119072252120__gallery_K73gD6 .row.full-width-row {
    max-width: 100%;
}

div#shopify-section-template--18119072252120__gallery_K73gD6 figure.aspect-ratio.aspect-ratio--adapt {
    --ratio-percent: 50.0% !important;
}

div#shopify-section-template--18119072252120__gallery_pqcyd3 .gallery__inner {
        grid-template-columns: 1fr;
}
div#shopify-section-template--18119072252120__gallery_pqcyd3 .row.full-width-row {
    max-width: 50%;
}

div#shopify-section-template--18119072252120__logo_list_F7MYXQ .logo-list.logo-list--centered-true {
    max-width: 100%;
}
div#shopify-section-template--18119072252120__logo_list_F7MYXQ .logo-list__inner {
        grid-template-columns: .3fr .3fr;
    }
}

And Save.

Result:

Made4uoRibe_0-1728080487190.png
Made4uoRibe_0-1728080487190.png978Ă—596 215 KB

Made4uoRibe_1-1728080570407.png
Made4uoRibe_1-1728080570407.png1328Ă—524 183 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
5

Hey @Made4uo-Ribe

I couldn’t find main.css(base.css, style.css, or theme.css) in my theme editor - can you help me where can I paste this code?

Thankyou

6

Please, paste it on the app.css. under Asset folder, or you can use the search more easier. Thanks!

1 Like
7

@Made4uo-Ribe okay let me try and get back to you but thankyou so much for help,

ill update you in sometime

8

Hello @Made4uo-Ribe

I have pasted the code and it solved the problem, Thank you So much.

But I have one more problem created after pasting the code - if you see the website now after the footer there are some lines of code showing on the website - anyway I can remove them?

Again thankyou for your help and time.

Best Wishes,

Vansh Chavada

9

If the code is visible on the footer, the code must not work. Did you paste it into the app.css right? if you remove the code on the app.css folder it also remove the code right? Can you see the theme.liquid on the code editor?

If it is please, remove the code on the app.css and repaste it on the theme.liquid. Follow this instruction.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “theme. Liquid” file. Find the tag and paste the code below before the tag.

And save.

Is this a third-party Shopify theme? If you’re still unable to find the theme.liquid file, it might be best to contact your developer for assistance.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
10

Hi @Made4uo-Ribe

i removed the code from app.css but still the footer code is there

Yes, I found the theme. liquid and I pasted that code in the body section.

But still, the footer lines aren’t going

And yes it is a third-party theme.

Now all my problems are solved. The only problem is the footer lines. Can you help me with that one last thing, please?

11

Did you add this code on the theme.liquid? Seems like you paste the code that i give 2 or 3x on the theme.liquid. without the tags.

You need to remove this code.

1 Like
12

Hello @Made4uo-Ribe

Yes, I had pasted that code 4 times so sorry for the confusion,

but thank you so much for helping me throughout.

This community is awesome, and so are you!

Again thank you so much for your time and efforts

Best Wishes,

Vansh!