Dawn theme - image with text, multirow button color change

Solved

Dawn theme - image with text, multirow button color change

Tedez
Tourist
5 0 1

Hi
I searched the universe for an answer but couldn't find one, so here I am looking for help.
- how to change the background color of the button in that section (image with text. multirow), as currently the background is set up the same as the whole section. And this is really what Im after. If the section background is black, I want button background to be i.e. blue. Not the border, not the text, the button background color.
Will that code change do that?
- if so, which CSS (at this version of Dawn) to edit and where? Or maybe a new code is required?
It would be great if we could change the size of the button too.

 

there is a sort of similar post from 2021 but that was more about what we can customize in the panel ourselves now, so not that helpful.

https://community.shopify.com/c/online-store-and-theme/change-button-color-in-quot-image-with-text-q...

 

Thanks

 

 

Thanks

Accepted Solution (1)

Sheesh_b
Shopify Partner
516 113 117

This is an accepted solution.

Hi @Tedez 

I'm adding this solution for Dawn 12.0.0 version and I'm not sure if this will work for previous versions.

Copy below code from Github file and replace the code.

https://github.com/impulsebyte/Dawn-12.0.0-Multirow-Custom-Button-Color/blob/470e45c8e0ded4aec335389...

 

It'll add two more options in multirow section customization where you can change the color and that'll be different to section.

Sheesh_b_0-1699377969544.png

 

Each color can be set separately.

Sheesh_b_1-1699378017409.png

 

Thanks

Sheesh B

 

We're here to simplify website creation for those looking to establish a strong online presence. Book a meeting slot if you want to discuss. It's FREE. BOOK NOW | Try Shopify for $1 for 3 Months: Shopify Trial | Shopify Web Store Developer |
LIKE or mark as ACCEPTED SOLUTION

View solution in original post

Replies 6 (6)

SBD_
Shopify Staff
1829 271 415

Hey @Tedez 

 

In the Custom CSS section, you can set the button's background colour like this:

 

a.button {
  background-color: blue;
}

 

Here's a screenshot - let me know if I'm not understanding your question.

Scott | Developer Advocate @ Shopify 

Tedez
Tourist
5 0 1

Hey SBD

Thank you very much for that.
It works indeed with "image with text" unfortunately it doesn't work with "featured product"  despite the Custom CSS section being there. 

And most importantly this is not the solution for the multirow, as multirow doesn't have the CCS section within the panel - hence the question:
- would I be able to change it within the code? If so, which CSS I should go to and where to change it?

 

Many thanks

SBD_
Shopify Staff
1829 271 415

Hey @Tedez 

 

The button in the feature product section is a different element with a different class name, you can target it with custom CSS like so:

 

.product-form__submit {
  background: blue;
}

 

Another approach (and for multiline) you can to modify the component's CSS directly. For example, to change the button background colour of the 'Image with text' section, edit `assets/component-image-with-text.css` and add additional styles to the file:

 

.image-with-text a.button--primary {
  background-color: blue;
}

 

 

Scott | Developer Advocate @ Shopify 

Sheesh_b
Shopify Partner
516 113 117

This is an accepted solution.

Hi @Tedez 

I'm adding this solution for Dawn 12.0.0 version and I'm not sure if this will work for previous versions.

Copy below code from Github file and replace the code.

https://github.com/impulsebyte/Dawn-12.0.0-Multirow-Custom-Button-Color/blob/470e45c8e0ded4aec335389...

 

It'll add two more options in multirow section customization where you can change the color and that'll be different to section.

Sheesh_b_0-1699377969544.png

 

Each color can be set separately.

Sheesh_b_1-1699378017409.png

 

Thanks

Sheesh B

 

We're here to simplify website creation for those looking to establish a strong online presence. Book a meeting slot if you want to discuss. It's FREE. BOOK NOW | Try Shopify for $1 for 3 Months: Shopify Trial | Shopify Web Store Developer |
LIKE or mark as ACCEPTED SOLUTION
Tedez
Tourist
5 0 1

Thanks Sheesh!

 

It worked indeed!

 

I was wondering if you (Shopify) consider adding that option into other sections like Featured Product, Image with Text and so on?

 

Thank you once again.

Sheesh_b
Shopify Partner
516 113 117

Hi @Tedez 

Glad you found it useful.

Yes, I can add the same color options in all the places where you think you need.

 

Thanks

Sheesh B

We're here to simplify website creation for those looking to establish a strong online presence. Book a meeting slot if you want to discuss. It's FREE. BOOK NOW | Try Shopify for $1 for 3 Months: Shopify Trial | Shopify Web Store Developer |
LIKE or mark as ACCEPTED SOLUTION