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

English Shopify Shopify Design
, ,
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!

2

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
GemPages_2-1675303942142.png1561×959 52.1 KB

Result

GemPages_1-1675303901929.png
GemPages_1-1675303901929.png1902×953 218 KB

GemPages_3-1675303985909.png
GemPages_3-1675303985909.png961×300 4.27 KB

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

3

Didn’t work unfortunately

4

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?

5

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.

6

No luck with this one either.

To confirm, these are the sections we need changed

Email signup.PNG
Email signup.PNG1303×379 37 KB

collection list.PNG
collection list.PNG1303×391 286 KB

7

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