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

color picker to text schema – Shopify

I’m trying to add a color picker to a change the color of a heading but I can’t workout how to add a relation between heading and color picker.

this currently doesn’t save as its not valid Json, but this is what I’ve added to the sections > hero.liquid file 

  {
    "type": "text",
    "id": "title",
    "label": "Heading",
    "default": "Image with text overlay"
    "settings": [
     {
      "type": "color",
      "id": "color_title",
      "label": "Heading color",
      "default": "#FFFFFF"
     }      
    ]
  },

If i include the color picker external to the settings it shows but has no relation to any elements

Tags:

2

Answers


  1. 0

    You don’t create the relationship in the schema but in the liquid itself.

    The correct syntax is:

    {
  "type": "text",
  "id": "title",
  "label": "Heading",
  "default": "Image with text overlay"
},
{
  "type": "color",
  "id": "color_title",
  "label": "Heading color",
  "default": "#FFFFFF"
}

    Then you can do something like:

    <h2 style="color: {{settings.color_title}}">{{ settings.title }}</h2>

    Login or Signup to reply.
  2. 0 
     "settings": [ {
   "type": "color",
   "id": "user_color",
   "label": "Color",
   "default": "#000"
 },
]

    Then outside the schema tag, to output the color to shopify:

    <h2 style="color: {{ section.settings.user_color }}">Kols might be the king</h2>

    user_color being the id of the color picker.
    This syntax outputs Kols might be the king text in black, which is the default color in the schema settings.

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

Back To Top
Search