Shopify Question posted in
The Shopify help center can be found here.

How to grab the value of a radio button with Liquid? – Shopify

I’m trying to set a background color based on what text color the user sets in Shopify admin. How can I grab the value of the radio button and set the background color accordingly? I’d prefer to use Liquid, if possible.

Here is my JSON format to display 2 radio buttons in admin:

  {
     "type":      "radio",
     "id":        "color_banner_text",
     "label":     "Text Color",
     "options": [
       { "value": "#ffffff", "label": "Light" },
       { "value": "#666666", "label": "Dark" }
     ],
     "default":   "#666666"
  }

And this is what I’ve tried so far:

<div class="{% if block.settings.color_banner_text == "#ffffff" % } background-dark {% else %} background-light {% endif %}">

Am I missing something?

Tags:

2

Answers


  1. 0

    Why do not do like this 

    <div style="background-color: {{block.settings.color_banner_text}};"></div>
    Login or Signup to reply.
  2. 0

    Well, here we cannot see if it’s within a block element or just in the schema. If it’s not in a block element, you could try to replace

    block.settings.color_banner_text

    with

    section.settings.color_banner_text

    Also, check your classes “background-dark” and “background-light” this is from where the color should came from. And not from the radio values.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search