changing color of text per section

Highlighted
Tourist
4 0 0

does anyone know of a strategy on how to implement text colour changes per snippet? 

the homepage is made out of multiple sections, each section has a different background colour, therefore one text colour option isnt fit for purpose. 

 

my ideal Scenario is have a text colour changer on the UI part of shopify so the Graphic Designers can change the text colour in each section without affecting the colour across the site.

 

 

0 Likes
Highlighted

Hello 

You are working on which theme?

Please share your site url.

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Shopify Partner
34 3 12

Hi Liam,
it might be helpfull to add a new Text Color Option to the live customizer for all your sections. 
Therefore you would edit the Section Schema of every Section and add a color picker.

 

"settings": [

Settings from the Section...
, 
      {
        "type": "color",
        "id": "text_color",
        "label": "Text Color for this Section",
        "default": "#000000"
      }
]

Then you can apply the text color via CSS.

 

<div class="section_xy" style="color:{{section.settings.text_color}}">
.
.
.
.
<div>

Hope that helps and have a good day.

:-)

 

Passionate Shopify Developer :-)
Also teaching a little Theme Development on my YouTube channel for free
- - >Let's Build Shopify
Highlighted
Tourist
4 0 0

@Jan_F this is what I did, what I failed to change is the CSS to {{section.setting.text_color}}. 

 

I will give this a try :) 

 

thanks 

0 Likes
Highlighted
Tourist
4 0 0

@Jan_F do you have any idea, how to implement this if the styling isnt to be done inline? 

I also want to manipulate Hover styles so will need to write a scss rule, do you know how I could reference liquid in the scss file? 

0 Likes
Highlighted
Shopify Partner
34 3 12
Hi Liam,
one of the benefits doning this with inline css, is the high selector specificity that inline css has.
That means the css rule has a high priority and can override other css rules effecting the element.

If you want to use a style tag than you need to have a unique selector for the css rule.
In the section file you can also define a style tag and unify the selector with the section Id.

For example you could implement a css rule like

.color-{{section.id}}
{
color:{{section.settings.text_color}}
}

And than you section needs the same css class

<div class="color-{{section.id}}">
</div>



Unfortunatley I can't think of a way to include this rule in the theme.scss file, but I hope I could still help :-)
Passionate Shopify Developer :-)
Also teaching a little Theme Development on my YouTube channel for free
- - >Let's Build Shopify
Highlighted
Tourist
4 0 0

Hi, 

 

so far, I created a style tag within the Snippet. Gave the selectors some styling rules that look like the following

 

<style>
.sectionPriceSize{
font-size: {{section.settings.price_size}}px;
}
.sectionTextSize{
font-size: {{section.settings.text_size}}px;
}
.sectionTextColor{
color: {{section.settings.text_color}};
}
</style>
 
this works fine as long as its Section.settings.someID, however when I try to access something one level deeper like - 
block.settings.someID - it cant access the block settings. Would you know why it can access section settings but not block? 
**-EDITED-** 
when using {{block.settings.someID}} inline it worked fine... just was trying to move all inline into styling rule set 
thanks,
0 Likes
Highlighted
Shopify Partner
34 3 12

Hi Liam,

 

I´m not 100% sure if I correctly understood what you tried to explain in your last message.


I´m guessing now you have a Section with multiple Blocks in it.

If that's the case you can access the blocks like in the following snippet:

 

{% for block in section.blocks%}

{{block.settings.color}} ...do something with all the blocks {%endfor%}


You can also access single blocks specifically if you want:

 

{{ section.blocks[0].settings.color}}

{{ section.blocks[1].settings.color}}

 

Happy testing :D

Passionate Shopify Developer :-)
Also teaching a little Theme Development on my YouTube channel for free
- - >Let's Build Shopify
0 Likes
Highlighted
New Member
1 0 0

Hi,

I have been trying to implement the color picker and it shows up in the section customization but it does not affect the text.

Also I don't quite understand where should I put the html code (it might be why it doesn't work ^^). 

Thank you !

0 Likes
Highlighted
New Member
5 0 0

Thanks Jan_F!

Can you give us an example of where to paste it exactly in the settings.schema.json file?

We want to add a text color picker override for each header and paragraph text element for home sections. More specifically, the "Image with text overlay" section element.

Where do we add the inline DIV class? index.liquid?

much appreciation.

0 Likes