How to change Price color on Narrative Theme.

Solved
Oussnnou
Tourist
8 0 0

how can i change the Color of the Price, Social media "share"botton and the "more details" on my Featured product of the home page,

and in the Product page, i would love to get some help, plus im looking for a shopify coder to edit my store for me.

and the variant color bar  also if possible, both in homepage and product page, from black to whatever color code i want.

this first screen shot is in the homepage, its a regular home page featured product section in the narrative theme .

shopify.JPG

and this one is in the product page

shopifyz.JPG

 

0 Likes

Hello,
Please share your site url.
So that i can check and let you know the exact solution here.

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
Oussnnou
Tourist
8 0 0

hello @oscprofessional  and thank you for your reply

the web url is https://aere-perennius.myshopify.com/

and the password is : aucohb

0 Likes

This is an accepted solution.

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

#FeaturedProduct-16048874648b90bc11 span.product__current-price {
    color: red !important;
}
#FeaturedProduct-16048874648b90bc11 span.primary-text {
    color: red !important;
}
#FeaturedProduct-16048874648b90bc11 .product__more-details-icon .icon {
    fill: red !important;
}
#FeaturedProduct-16048874648b90bc11 a.product__more-details.btn.btn--secondary.btn--primary-color.btn--clear {
    color: red !important;
}
#FeaturedProduct-16048874648b90bc11 .social-sharing__icon .icon {
    fill: red !important;
}
#FeaturedProduct-16048874648b90bc11 button.btn.btn--clear.btn--primary-color.social-sharing__toggle {
    color: red !important;
}


Change the color as per your choice.

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
Oussnnou
Tourist
8 0 0

Thank you so mcuh @oscprofessional 

that did it for the featured product section in the homepage, 

if you tell me what to change for the same results in the product page,

it will be so much appreciated 

thank you again

0 Likes

This is an accepted solution.

Add this css

.product__content.page-width span.product__current-price {
    color: red !important;
}
.product__content.page-width select {
    background-color: red !important;
    border-color: red !important;
}
.product__content.page-width button.btn.btn--clear.btn--primary-color.social-sharing__toggle {
    color: red !important;
}
.product__content.page-width .social-sharing__icon .icon {
    fill: red !important;
}
If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
Oussnnou
Tourist
8 0 0

It worked, you are a savior, 

thank you so much, my store now is gettiing ready for test, if it happen to work, and scale, i'llhappily hire you for more modifications

thank you again 

0 Likes