Image with text section change text and button color

Store Design

Topic summary

A user seeks to customize an “Image with text” section in their Shopify store by changing text color to #D4AF37 (gold) and button styling to black text on a gold background.

Solutions Provided:

Two developers offered CSS code snippets to achieve this:

  • One suggested adding code to the base.css file in the theme’s Asset folder
  • Another provided both section-specific CSS (targeting a particular section ID) and global CSS (affecting all similar sections), recommending placement in the Theme Customizer’s Custom CSS section

Current Status:

The user confirmed the code works but identified a remaining issue: the button still displays a black outline that needs removal. The discussion appears ongoing as this final styling detail remains unresolved.

Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.
1

hi,

i want to change text and button color from Image with text section to #D4AF37

and button text to black

anyone can help?

web: https://v10plus.com/

skin analyzer.png
skin analyzer.png2329Ă—738 170 KB

1 Like
2

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
.image-with-text__heading.h2 {
color: #d4af37!important;
}
.button.button--primary {
color: black;
background-color: white;
}

ZestardTech_0-1706013043668.png
ZestardTech_0-1706013043668.png1856Ă—479 168 KB

3

Hey @v10plus ,

If it’s only for that section then please use

div#ImageWithText--template--16742541164798__1654589419d5943525 > h2 {
    color: #D4AF37 !important;
}

div#ImageWithText--template--16742541164798__1654589419d5943525 > a {
    color: black !important;
    background-color: #D4AF37 !important;
}

If it’s for all sections like the one you mentioned, then please use

h2.image-with-text__heading.h2 {
    color: #D4AF37 !important;
}
a.button.button--primary {
    color: black !important;
    background-color: #D4AF37 !important;
}

Please paste it in the Custom CSS section in the Theme Customizer → Settings here

ThePrimeWeb_0-1706013351890.png
ThePrimeWeb_0-1706013351890.png317Ă—882 23.4 KB

4

hi this one work for me

i change a little bit, btw the button still have black outline. can remove?

.image-with-text__heading.h2 {
color: #d4af37 !important;
}
.button.button–primary {
color: white;
background-color: #d4af37;
}

5 
h2.image-with-text__heading.h2 {
    color: #D4AF37 !important;
}
a.button.button--primary {
    color: black !important;
    background-color: #D4AF37 !important;
}

this also work for me

but the button still have black outline. can remove?