CODEWITHSUNDEEP
htmlcssdynamicshopifyliquid
new recruit 21
new recruit 21

Reputation: 111

Using Shopify's Liquid to create custom button background color in a custom theme section.

I've created a new theme section in Shopify called Slideshow with Button. I've been adding functionality that allows clients to add there own button text with success, but now getting stuck when trying to create functionality to customize the button's background color. The main problem is that the liquid code isn't populating the CSS. Here's what I have in my liquid section file right now:

             {% if block.settings.link != blank %}
             <a href="{{ block.settings.link }}" class="dynamic_button_link">
             {% endif %}

            <style>
                .dynamic-button {
                  background-color:{{ section.settings.button_bg_color }}!important;
                  z-index:999;
                 }
            </style> 

              {% unless block.settings.button_text == blank %}
                <div class='dynamic-button'>{{ block.settings.button_text | escape }}</div>
              {% endunless %}

              {% if block.settings.link != blank %}
              </a>
              {% endif %}

            {
            "type": "color",
            "id": "button_bg_color",
            "label": "Background color",
            "default": "#ffffff"
           },

The color picker shows up properly, but...

enter image description here

Clearly the dynamic color type is not populating the CSS as intended...

enter image description here

Any assistance would be greatly appreciated. Thanks.

Upvotes: 0

Views: 2860

Answers (1)

GeorgeButter
GeorgeButter

Reputation: 2591

Should this {{ section.settings.button_bg_color }} be this {{ block.settings.button_bg_color }}

Upvotes: 1

Related Questions