for loop getting css color value from last index and apply it on all previous indexes

alimirza
Shopify Partner
2 0 0
{% for block in section.blocks %}

            <div class="carousel-item {% if forloop.first %} active {% endif %} ">
                <img src="{{block.settings.image  | img_url: 'master'}}">
                <div class="carousel-caption d-none d-md-block">
                <h2 class="title-color">{{block.settings.title}}</h2>
                </div>
            </div>

            <style>
                .title-color{
                    color: {{ block.settings.title_color }}
                }
            </style>

           {% endfor %}
 
{% schema %}
{
    "name""Image Slider",
    "max_blocks"5,
    "settings": [
        {
            "type""header",
            "content""Image Slider"
        }
    ],
    "blocks": [
    {
        "type""image",
        "name""Image",
        "settings": [
            {
                "type""image_picker",
                "id""image",
                "label""Image"
            },
            {
                "type""text",
                "id""title",
                "label""Image Title"
            },
            {
                "type""color",
                "id""title_color",
                "label""Title Color",
                "default""#ffffff"
            }
        ]
    }
    ],
    "presets": [
        {
            "category""Image",
            "name":"Image Slider"
        }
    ]
}
{% endschema %}
 
I am learning shopify and encounter a problem regarding getting css font color. It is working fine I am able to select font color from color picker and it is applying on my slide but the problem is when i add new slide and change its font color it applies color plus overrides previous slide color also and applies the new slide caption color to all slides . I know i am missing something here . I want my slide caption color different for every slide.
0 Likes

Hello @alimirza 

Please share your store URL and reference site URL.

So that I can check and let you know the exact solution for this.

Thanks...

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
paramSoft
Shopify Partner
1408 230 613

Hello @alimirza Put the style just after forloop like this

{% for block in section.blocks %}
             <style>
                .title-color{
                    color: {{ block.settings.title_color }}
                }
            </style>
            <div class="carousel-item {% if forloop.first %} active {% endif %} ">
                <img src="{{block.settings.image  | img_url: 'master'}}">
                <div class="carousel-caption d-none d-md-block">
                <h2 class="title-color">{{block.settings.title}}</h2>
                </div>
            </div>
{% endfor %}

 

If this solution works, please click on Accepted as Solution and click Like!!!
Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

Contact Me On : parambabla.soft@gmail.com
0 Likes