Solved

index-column change color of text | Broadcast Theme

JonX
Explorer
76 6 33

Hello,

I am trying to change the color of text below.

Help would be greatly appreciated.

My URL : https://www.ambigoose.com/pages/our-ingredients 

Thank you

Jon

Screen Shot 2021-07-29 at 4.40.02 PM.png

Accepted Solutions (4)

oscprofessional
Shopify Partner
15830 2369 3072

This is an accepted solution.

Hello @JonX,
In your Store

Admin->Actions->Edit Code->Assets->theme.scss

and paste following code at the bottom.

(Change color as your choice)

.flickity-slider .h6.column__heading{
color: #1F4788;
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing

View solution in original post

ZestardTech
Shopify Expert
5393 970 1291

This is an accepted solution.

Hello There,

1.In your Shopify Admin go to online store > themes > actions > edit code
2.Find Asset >theme.scss.css and paste this at the bottom of the file:

h2.h6.column__heading {
color: #9a6060!important;
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

View solution in original post

oscprofessional
Shopify Partner
15830 2369 3072

This is an accepted solution.

Hello @JonX,
In your Store

Admin->Actions->Edit Code->Assets->theme.scss

and paste following code at the bottom.

(Change color as your choice)

.flickity-slider .h6.column__heading:nth-child(1){
color: #1F4788;
}
.flickity-slider .h6.column__heading:nth-child(2){
color: #80bfff;
}
.flickity-slider .h6.column__heading:nth-child(3){
color:  #ff99ff;
}
.flickity-slider .h6.column__heading:nth-child(4){
color:  #ccff66;
}
.flickity-slider .h6.column__heading:nth-child(5){
color:  #ff66a3;
}
.flickity-slider .h6.column__heading:nth-child(6){
color:  #ccff66;
}
.flickity-slider .h6.column__heading:nth-child(7){
color:   #b8b894;
}
.flickity-slider .h6.column__heading:nth-child(8){
color:   #4dffa6;
}
.flickity-slider .h6.column__heading:nth-child(9){
color:   #0088cc;
}
.flickity-slider .h6.column__heading:nth-child(10){
color:  #ff6699;
}
.flickity-slider .h6.column__heading:nth-child(11){
color:  #ffd11a;
}
.flickity-slider .h6.column__heading:nth-child(12){
color: #66ffff;
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing

View solution in original post

JonX
Explorer
76 6 33

This is an accepted solution.

I solved it on mobile with the code below:

#shopify-section-1627556784f70d37b5 .flickity-button-circle .h6.column__heading{
	color: #fecd00 !important;
}
  
#shopify-section-16275568204bb067e4 .flickity-button-circle .h6.column__heading{
	color: #fecd00 !important;
}

View solution in original post

Replies 6 (6)

oscprofessional
Shopify Partner
15830 2369 3072

This is an accepted solution.

Hello @JonX,
In your Store

Admin->Actions->Edit Code->Assets->theme.scss

and paste following code at the bottom.

(Change color as your choice)

.flickity-slider .h6.column__heading{
color: #1F4788;
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
JonX
Explorer
76 6 33

Thank you so much @oscprofessional @ZestardTech I ended up using the code below as I need a different color for each sections

.index-columns--index-columns6 .flickity-slider .h6.column__heading{
	color: #fecd00 !important;
}

 

But I could not have done it without you 

oscprofessional
Shopify Partner
15830 2369 3072

This is an accepted solution.

Hello @JonX,
In your Store

Admin->Actions->Edit Code->Assets->theme.scss

and paste following code at the bottom.

(Change color as your choice)

.flickity-slider .h6.column__heading:nth-child(1){
color: #1F4788;
}
.flickity-slider .h6.column__heading:nth-child(2){
color: #80bfff;
}
.flickity-slider .h6.column__heading:nth-child(3){
color:  #ff99ff;
}
.flickity-slider .h6.column__heading:nth-child(4){
color:  #ccff66;
}
.flickity-slider .h6.column__heading:nth-child(5){
color:  #ff66a3;
}
.flickity-slider .h6.column__heading:nth-child(6){
color:  #ccff66;
}
.flickity-slider .h6.column__heading:nth-child(7){
color:   #b8b894;
}
.flickity-slider .h6.column__heading:nth-child(8){
color:   #4dffa6;
}
.flickity-slider .h6.column__heading:nth-child(9){
color:   #0088cc;
}
.flickity-slider .h6.column__heading:nth-child(10){
color:  #ff6699;
}
.flickity-slider .h6.column__heading:nth-child(11){
color:  #ffd11a;
}
.flickity-slider .h6.column__heading:nth-child(12){
color: #66ffff;
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
JonX
Explorer
76 6 33

That is amazing...

Thank you SO Much...

I use the code below to change on my homepage as I need the same color for the entire section :

#shopify-section-1627556784f70d37b5 .flickity-slider .h6.column__heading{
	color: #fecd00 !important;
}
  
#shopify-section-16275568204bb067e4 .flickity-slider .h6.column__heading{
	color: #fecd00 !important;
}

 But unfortunately in does not work on mobile...

Would you have a fix?

My URL : www.ambigoose.com

IMG_3422.PNG

Screen Shot 2021-07-30 at 11.52.23 AM.png

JonX
Explorer
76 6 33

This is an accepted solution.

I solved it on mobile with the code below:

#shopify-section-1627556784f70d37b5 .flickity-button-circle .h6.column__heading{
	color: #fecd00 !important;
}
  
#shopify-section-16275568204bb067e4 .flickity-button-circle .h6.column__heading{
	color: #fecd00 !important;
}

ZestardTech
Shopify Expert
5393 970 1291

This is an accepted solution.

Hello There,

1.In your Shopify Admin go to online store > themes > actions > edit code
2.Find Asset >theme.scss.css and paste this at the bottom of the file:

h2.h6.column__heading {
color: #9a6060!important;
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing