How to change the title colour of email subscriber section and collection list

Solved

How to change the title colour of email subscriber section and collection list

strokefdn
Tourist
12 0 1

Hi,

 

Does anyone know how to change the colour of the title and body text for the email subscription section and collection list section using codes that can be pasted at the bottom of the base.css file? We want the titles to be #177F67 and the body text to be #000000 for both sections.

 

We are using the Dawn theme. Unfortunately I cannot share the URL because the site isn't published yet.

 

Thanks!

Accepted Solution (1)

PageFly-Kate
Shopify Partner
1357 372 418

This is an accepted solution.

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/base.css->paste below code at the bottom of the file:

 
.newsletter__wrapper h2,
.collection-list-wrapper h2 {
    color: #177F67 !important;
}
.newsletter__subheading p {
    color: #000 !important;
}

I hope it would help you
Best regards,

Kate | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


Unlock the secrets to a record-breaking BFCM with PageFly and Canva


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)


➜ Weekly updated Shopify tutorials on YouTube


All features are available from the Free plan. Live Chat Support is available 24/7.


View solution in original post

Replies 6 (6)

GemPages
Shopify Partner
5625 1262 1267

Hello @strokefdn

It's GemPages support team and glad to support you today.

 

Please add code below to the bottom of the base.css file

#MainContent .collection .collection__title h2,
#shopify-section-footer .footer-block__newsletter .footer-block__heading{
  color: #177F67;
}
#MainContent .collection > slider-component .product-grid .product-card-wrapper .card__information .card__heading .full-unstyled-link,
#MainContent .collection > slider-component .product-grid .product-card-wrapper .card__badge .badge,
#MainContent .collection > slider-component .product-grid .product-card-wrapper .card__information .price__container,
#MainContent .collection > slider-component .product-grid .product-card-wrapper .card__information .price--on-sale .price-item--regular,
#shopify-section-footer .newsletter-form__field-wrapper .field__input,
#shopify-section-footer .newsletter-form__field-wrapper .field__label{
  color: #000000;
}

GemPages_2-1675303942142.png

 

Result 

GemPages_1-1675303901929.png

GemPages_3-1675303985909.png

I hope the above is useful to you.


Kind & Best regards, 
GemPages Support Team

 

 

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
strokefdn
Tourist
12 0 1

Didn't work unfortunately

strokefdn
Tourist
12 0 1

h2 {
color: #1C256A !important;
}

 

this code works but then it changes the heading colours in the footer. Is there any way to stop this happening so all the text in the footer stays white?

BSS-Commerce
Shopify Partner
3477 464 551

Hi @strokefdn 

You can use the following code:

.footer-block--newsletter .footer-block__heading {
  color: #1C256A !important;
}
.collection .title.h2 {
  color: #1C256A !important;
}

I hope that it will work for you.

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
strokefdn
Tourist
12 0 1

No luck with this one either.

 

To confirm, these are the sections we need changed

Email signup.PNG

collection list.PNG

  

PageFly-Kate
Shopify Partner
1357 372 418

This is an accepted solution.

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/base.css->paste below code at the bottom of the file:

 
.newsletter__wrapper h2,
.collection-list-wrapper h2 {
    color: #177F67 !important;
}
.newsletter__subheading p {
    color: #000 !important;
}

I hope it would help you
Best regards,

Kate | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


Unlock the secrets to a record-breaking BFCM with PageFly and Canva


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)


➜ Weekly updated Shopify tutorials on YouTube


All features are available from the Free plan. Live Chat Support is available 24/7.