Dawn Theme - Possible to replace Color scheme drop down with Color picker?

[barcusmrandt]

I would like to replace the native color scheme drop down with a color picker for the Container in the Image banner section in Dawn Theme. Does anyone know if this is possible, and how to do this?

Currently, you tick the “show container” which brings up a container or background “box” for the heading in the image banner. Below this there is an option to chose color based on the theme color schemes you define in settings. This is not flexible enough for my needs, and I would like to have a color picker here instead so that I can choose the exact color I want for the container on the image banners for different pages.

So replace the drop down with a color picker, and code that sets the background color of the container accordingly. Anyone?

[Shop_Lovers]

Hi,

You can achieve this by custom coding .

If you are familiar with the code refer this

{
"type": "color",
"label": "Background color",
"id": "background_color",
"default": "#000000",
"info": "Container Backround"
}

Thanks

Hit Like and Accept as Solution.

[barcusmrandt]

Thank you. But this seem incomplete. I would like to add a color picker to the theme editor, and add code that assigns the color chosen in the color picker to the container in the image banner.

[DavidEKim]

Hi,

The Color Scheme works with foreground & background.

If you only want to change the box background color.

1. You have to add mybackground class in line 83.

2. You need to modify or create the schema type & id.

3. You need style css working with the class & schema.

The complete liquid code of image-banner.liquid (modified) is as below.

{{ 'section-image-banner.css' | asset_url | stylesheet_tag }}

{%- if section.settings.adapt_height_first_image and section.settings.image != blank -%}
  {%- style -%}
  @media screen and (max-width: 749px) {
    #Banner-{{ section.id }}::before,
    #Banner-{{ section.id }} .banner__media::before,
    #Banner-{{ section.id }}:not(.banner--mobile-bottom) .banner__content::before {
      padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
      content: '';
      display: block;
    }
  }

  @media screen and (min-width: 750px) {
    #Banner-{{ section.id }}::before,
    #Banner-{{ section.id }} .banner__media::before {
      padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
      content: '';
      display: block;
    }
  }
  {%- endstyle -%}
{%- endif -%}

{%- style -%}
  #Banner-{{ section.id }}::after {
    opacity: {{ section.settings.image_overlay_opacity | divided_by: 100.0 }};
  }
{%- endstyle -%}

  {%- if section.settings.image != blank -%}
    

      
    

  {%- elsif section.settings.image_2 == blank -%}
    
      {{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
    

  {%- endif -%}
  {%- if section.settings.image_2 != blank -%}
    
      
    

  {%- endif -%}
  
    

      {%- for block in section.blocks -%}
        {%- case block.type -%}
          {%- when 'heading' -%}
            ## 
              {{ block.settings.heading | escape }}
            
          {%- when 'text' -%}
            
              {{ block.settings.text | escape }}
            

          {%- when 'buttons' -%}
            
              {%- if block.settings.button_label_1 != blank -%}
                

        {%- endcase -%}
      {%- endfor -%}
    

  

{% style %}
  .mybackground {
    background: {{ section.settings.color_scheme }} !important;
  }
{% endstyle %}
{% schema %}
{
  "name": "t:sections.image-banner.name",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": "t:sections.image-banner.settings.image.label"
    },
    {
      "type": "image_picker",
      "id": "image_2",
      "label": "t:sections.image-banner.settings.image_2.label"
    },
    {
      "type": "range",
      "id": "image_overlay_opacity",
      "min": 0,
      "max": 100,
      "step": 10,
      "unit": "%",
      "label": "t:sections.image-banner.settings.image_overlay_opacity.label",
      "default": 0
    },
    {
      "type": "select",
      "id": "image_height",
      "options": [
        {
          "value": "small",
          "label": "t:sections.image-banner.settings.image_height.options__1.label"
        },
        {
          "value": "medium",
          "label": "t:sections.image-banner.settings.image_height.options__2.label"
        },
        {
          "value": "large",
          "label": "t:sections.image-banner.settings.image_height.options__3.label"
        }
      ],
      "default": "medium",
      "label": "t:sections.image-banner.settings.image_height.label",
      "info": "t:sections.image-banner.settings.image_height.info"
    },
    {
      "type": "checkbox",
      "id": "adapt_height_first_image",
      "default": false,
      "label": "t:sections.image-banner.settings.adapt_height_first_image.label",
      "info": "t:sections.image-banner.settings.adapt_height_first_image.info"
    },
    {
      "type": "select",
      "id": "desktop_content_position",
      "options": [
        {
          "value": "top-left",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__1.label"
        },
        {
          "value": "top-center",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__2.label"
        },
        {
          "value": "top-right",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__3.label"
        },
        {
          "value": "middle-left",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__4.label"
        },
        {
          "value": "middle-center",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__5.label"
        },
        {
          "value": "middle-right",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__6.label"
        },
        {
          "value": "bottom-left",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__7.label"
        },
        {
          "value": "bottom-center",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__8.label"
        },
        {
          "value": "bottom-right",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__9.label"
        }
      ],
      "default": "middle-center",
      "label": "t:sections.image-banner.settings.desktop_content_position.label"
    },
    {
      "type": "checkbox",
      "id": "show_text_box",
      "default": true,
      "label": "t:sections.image-banner.settings.show_text_box.label"
    },
    {
      "type": "select",
      "id": "desktop_content_alignment",
      "options": [
        {
          "value": "left",
          "label": "t:sections.image-banner.settings.desktop_content_alignment.options__1.label"
        },
        {
          "value": "center",
          "label": "t:sections.image-banner.settings.desktop_content_alignment.options__2.label"
        },
        {
          "value": "right",
          "label": "t:sections.image-banner.settings.desktop_content_alignment.options__3.label"
        }
      ],
      "default": "center",
      "label": "t:sections.image-banner.settings.desktop_content_alignment.label"
    },
    {
      "type": "color",
      "id": "color_scheme",
      "default": "#fff",
      "label": "Background Color",
      "info": "t:sections.image-banner.settings.color_scheme.info"
    },
    {
      "type": "header",
      "content": "t:sections.image-banner.settings.header.content"
    },
    {
      "type": "select",
      "id": "mobile_content_alignment",
      "options": [
        {
          "value": "left",
          "label": "t:sections.image-banner.settings.mobile_content_alignment.options__1.label"
        },
        {
          "value": "center",
          "label": "t:sections.image-banner.settings.mobile_content_alignment.options__2.label"
        },
        {
          "value": "right",
          "label": "t:sections.image-banner.settings.mobile_content_alignment.options__3.label"
        }
      ],
      "default": "center",
      "label": "t:sections.image-banner.settings.mobile_content_alignment.label"
    },
    {
      "type": "checkbox",
      "id": "stack_images_on_mobile",
      "default": true,
      "label": "t:sections.image-banner.settings.stack_images_on_mobile.label"
    },
    {
      "type": "checkbox",
      "id": "show_text_below",
      "default": true,
      "label": "t:sections.image-banner.settings.show_text_below.label"
    }
  ],
  "blocks": [
    {
      "type": "heading",
      "name": "t:sections.image-banner.blocks.heading.name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "default": "Image banner",
          "label": "t:sections.image-banner.blocks.heading.settings.heading.label"
        },
        {
          "type": "select",
          "id": "heading_size",
          "options": [
            {
              "value": "h2",
              "label": "t:sections.all.heading_size.options__1.label"
            },
            {
              "value": "h1",
              "label": "t:sections.all.heading_size.options__2.label"
            },
            {
              "value": "h0",
              "label": "t:sections.all.heading_size.options__3.label"
            }
          ],
          "default": "h1",
          "label": "t:sections.all.heading_size.label"
        }
      ]
    },
    {
      "type": "text",
      "name": "t:sections.image-banner.blocks.text.name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "text",
          "default": "Give customers details about the banner image(s) or content on the template.",
          "label": "t:sections.image-banner.blocks.text.settings.text.label"
        },
        {
          "type": "select",
          "id": "text_style",
          "options": [
            {
              "value": "body",
              "label": "t:sections.image-banner.blocks.text.settings.text_style.options__1.label"
            },
            {
              "value": "subtitle",
              "label": "t:sections.image-banner.blocks.text.settings.text_style.options__2.label"
            },
            {
              "value": "caption-with-letter-spacing",
              "label": "t:sections.image-banner.blocks.text.settings.text_style.options__3.label"
            }
          ],
          "default": "body",
          "label": "t:sections.image-banner.blocks.text.settings.text_style.label"
        }
      ]
    },
    {
      "type": "buttons",
      "name": "t:sections.image-banner.blocks.buttons.name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "button_label_1",
          "default": "Button label",
          "label": "t:sections.image-banner.blocks.buttons.settings.button_label_1.label",
          "info": "t:sections.image-banner.blocks.buttons.settings.button_label_1.info"
        },
        {
          "type": "url",
          "id": "button_link_1",
          "label": "t:sections.image-banner.blocks.buttons.settings.button_link_1.label"
        },
        {
          "type": "checkbox",
          "id": "button_style_secondary_1",
          "default": false,
          "label": "t:sections.image-banner.blocks.buttons.settings.button_style_secondary_1.label"
        },
        {
          "type": "text",
          "id": "button_label_2",
          "default": "Button label",
          "label": "t:sections.image-banner.blocks.buttons.settings.button_label_2.label",
          "info": "t:sections.image-banner.blocks.buttons.settings.button_label_2.info"
        },
        {
          "type": "url",
          "id": "button_link_2",
          "label": "t:sections.image-banner.blocks.buttons.settings.button_link_2.label"
        },
        {
          "type": "checkbox",
          "id": "button_style_secondary_2",
          "default": false,
          "label": "t:sections.image-banner.blocks.buttons.settings.button_style_secondary_2.label"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "t:sections.image-banner.presets.name",
      "blocks": [
        {
          "type": "heading"
        },
        {
          "type": "text"
        },
        {
          "type": "buttons"
        }
      ]
    }
  ]
}
{% endschema %}

If you replace the current image-banner.liquid with the above code, you will see the color picker & works with the background color change. If you want to add the text color schema, please let me know.

Hope it helps.

Thanks.

[barcusmrandt]

Thank you for this! However, am I right to assume that this code you provided for the color picker will change the Background color in the actual theme settings? I only want to change the background color of the box in the image banner, and not the background color option set in the theme settings.

[DavidEKim]

It’s only for the text-box background. I think that’s what you want.

For the transparent background color, just delete the color code when you pick-up the color.

[DavidEKim]

If you also need to change the text color, you will need to add some coding to let them work.

If you want to make the schema & css, please let me know.

Hope it helps.

Thanks.

[barcusmrandt]

Ok we’re getting closer to a solution! Your code works, but it does create a strange “error” for the Heading:

[DavidEKim]

Please post the original image-banner.liquid here.

I think you are not using the latest Dawn theme.

I changed the code from the latest Dawn theme without any other modifications.

The previous version of Dawn Theme used filter “t” for translator but the new Dawn theme 5.0 (for Shopify 2.0) uses “t” for text.

If you post your original code here, I’ll fix it for you.

Thanks.

[barcusmrandt]

{{ ‘section-image-banner.css’ | asset_url | stylesheet_tag }}

{%- if section.settings.adapt_height_first_image and section.settings.image != blank -%}
{%- style -%}
@media screen and (max-width: 749px) {
#Banner-{{ section.id }}::before,
#Banner-{{ section.id }} .banner__media::before,
#Banner-{{ section.id }}:not(.banner–mobile-bottom) .banner__content::before {
padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
content: ‘’;or
display: block;
}
}

@media screen and (min-width: 750px) {
#Banner-{{ section.id }}::before,
#Banner-{{ section.id }} .banner__media::before {
padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
content: ‘’;
display: block;
}
}
{%- endstyle -%}
{%- endif -%}

{%- style -%}
#Banner-{{ section.id }}::after {
opacity: {{ section.settings.image_overlay_opacity | divided_by: 100.0 }};
}
{%- endstyle -%}

{%- if section.settings.image != blank -%}

{%- elsif section.settings.image_2 == blank -%}

{{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}

{%- endif -%} {%- if section.settings.image_2 != blank -%}

ci {%- endif -%}

{%- for block in section.blocks -%} {%- case block.type -%} {%- when 'heading' -%}

{{ block.settings.heading | escape }}

{%- when 'text' -%}

{{ block.settings.text | escape }}

{%- when 'buttons' -%}

{%- if block.settings.button_label_1 != blank -%} {{ block.settings.button_label_1 | escape }} {%- endif -%} {%- if block.settings.button_label_2 != blank -%} {{ block.settings.button_label_2 | escape }} {%- endif -%}

{%- endcase -%} {%- endfor -%}

{% schema %}
{
“name”: “t:sections.image-banner.name”,
“tag”: “section”,
“class”: “spaced-section spaced-section–full-width”,
“settings”: [
{
“type”: “image_picker”,
“id”: “image”,
“label”: “t:sections.image-banner.settings.image.label”
},
{
“type”: “image_picker”,
“id”: “image_2”,
“label”: “t:sections.image-banner.settings.image_2.label”
},
{
“type”: “range”,
“id”: “image_overlay_opacity”,
“min”: 0,
“max”: 100,
“step”: 10,
“unit”: “%”,
“label”: “t:sections.image-banner.settings.image_overlay_opacity.label”,
“default”: 0
},
{
“type”: “select”,
“id”: “image_height”,
“options”: [
{
“value”: “small”,
“label”: “t:sections.image-banner.settings.image_height.options__1.label”
},
{
“value”: “medium”,
“label”: “t:sections.image-banner.settings.image_height.options__2.label”
},
{
“value”: “large”,
“label”: “t:sections.image-banner.settings.image_height.options__3.label”
}
],
“default”: “medium”,
“label”: “t:sections.image-banner.settings.image_height.label”,
“info”: “t:sections.image-banner.settings.image_height.info”
},
{
“type”: “checkbox”,
“id”: “adapt_height_first_image”,
“default”: false,
“label”: “t:sections.image-banner.settings.adapt_height_first_image.label”,
“info”: “t:sections.image-banner.settings.adapt_height_first_image.info”
},
{
“type”: “select”,
“id”: “desktop_content_position”,
“options”: [
{
“value”: “top-left”,
“label”: “t:sections.image-banner.settings.desktop_content_position.options__1.label”
},
{
“value”: “top-center”,
“label”: “t:sections.image-banner.settings.desktop_content_position.options__2.label”
},
{
“value”: “top-right”,
“label”: “t:sections.image-banner.settings.desktop_content_position.options__3.label”
},
{
“value”: “middle-left”,
“label”: “t:sections.image-banner.settings.desktop_content_position.options__4.label”
},
{
“value”: “middle-center”,
“label”: “t:sections.image-banner.settings.desktop_content_position.options__5.label”
},
{
“value”: “middle-right”,
“label”: “t:sections.image-banner.settings.desktop_content_position.options__6.label”
},
{
“value”: “bottom-left”,
“label”: “t:sections.image-banner.settings.desktop_content_position.options__7.label”
},
{
“value”: “bottom-center”,
“label”: “t:sections.image-banner.settings.desktop_content_position.options__8.label”
},
{
“value”: “bottom-right”,
“label”: “t:sections.image-banner.settings.desktop_content_position.options__9.label”
}
],
“default”: “middle-center”,
“label”: “t:sections.image-banner.settings.desktop_content_position.label”
},
{
“type”: “checkbox”,
“id”: “show_text_box”,
“default”: true,
“label”: “t:sections.image-banner.settings.show_text_box.label”
},
{
“type”: “select”,
“id”: “desktop_content_alignment”,
“options”: [
{
“value”: “left”,
“label”: “t:sections.image-banner.settings.desktop_content_alignment.options__1.label”
},
{
“value”: “center”,
“label”: “t:sections.image-banner.settings.desktop_content_alignment.options__2.label”
},
{
“value”: “right”,
“label”: “t:sections.image-banner.settings.desktop_content_alignment.options__3.label”
}
],
“default”: “center”,
“label”: “t:sections.image-banner.settings.desktop_content_alignment.label”
},
{
“type”: “select”,
“id”: “color_scheme”,
“options”: [
{
“value”: “accent-1”,
“label”: “t:sections.image-banner.settings.color_scheme.options__1.label”
},
{
“value”: “accent-2”,
“label”: “t:sections.image-banner.settings.color_scheme.options__2.label”
},
{
“value”: “background-1”,
“label”: “t:sections.image-banner.settings.color_scheme.options__3.label”
},
{
“value”: “background-2”,
“label”: “t:sections.image-banner.settings.color_scheme.options__4.label”
},
{
“value”: “inverse”,
“label”: “t:sections.image-banner.settings.color_scheme.options__5.label”
}
],
“default”: “background-1”,
“label”: “t:sections.image-banner.settings.color_scheme.label”,
“info”: “t:sections.image-banner.settings.color_scheme.info”
},
{
“type”: “header”,
“content”: “t:sections.image-banner.settings.header.content”
},
{
“type”: “select”,
“id”: “mobile_content_alignment”,
“options”: [
{
“value”: “left”,
“label”: “t:sections.image-banner.settings.mobile_content_alignment.options__1.label”
},
{
“value”: “center”,
“label”: “t:sections.image-banner.settings.mobile_content_alignment.options__2.label”
},
{
“value”: “right”,
“label”: “t:sections.image-banner.settings.mobile_content_alignment.options__3.label”
}
],
“default”: “center”,
“label”: “t:sections.image-banner.settings.mobile_content_alignment.label”
},
{
“type”: “checkbox”,
“id”: “stack_images_on_mobile”,
“default”: true,
“label”: “t:sections.image-banner.settings.stack_images_on_mobile.label”
},
{
“type”: “checkbox”,
“id”: “show_text_below”,
“default”: true,
“label”: “t:sections.image-banner.settings.show_text_below.label”
}
],
“blocks”: [
{
“type”: “heading”,
“name”: “t:sections.image-banner.blocks.heading.name”,
“limit”: 1,
“settings”: [
{
“type”: “text”,
“id”: “heading”,
“default”: “Image banner”,
“label”: “t:sections.image-banner.blocks.heading.settings.heading.label”
},
{
“type”: “select”,
“id”: “heading_size”,
“options”: [
{
“value”: “medium”,
“label”: “t:sections.image-banner.blocks.heading.settings.heading_size.options__1.label”
},
{
“value”: “large”,
“label”: “t:sections.image-banner.blocks.heading.settings.heading_size.options__2.label”
}
],
“default”: “medium”,
“label”: “t:sections.image-banner.blocks.heading.settings.heading_size.label”
}
]
},
{
“type”: “text”,
“name”: “t:sections.image-banner.blocks.text.name”,
“limit”: 1,
“settings”: [
{
“type”: “text”,
“id”: “text”,
“default”: “Give customers details about the banner image(s) or content on the template.”,
“label”: “t:sections.image-banner.blocks.text.settings.text.label”
},
{
“type”: “select”,
“id”: “text_style”,
“options”: [
{
“value”: “body”,
“label”: “t:sections.image-banner.blocks.text.settings.text_style.options__1.label”
},
{
“value”: “subtitle”,
“label”: “t:sections.image-banner.blocks.text.settings.text_style.options__2.label”
},
{
“value”: “caption-with-letter-spacing”,
“label”: “t:sections.image-banner.blocks.text.settings.text_style.options__3.label”
}
],
“default”: “body”,
“label”: “t:sections.image-banner.blocks.text.settings.text_style.label”
}
]
},
{
“type”: “buttons”,
“name”: “t:sections.image-banner.blocks.buttons.name”,
“limit”: 1,
“settings”: [
{
“type”: “text”,
“id”: “button_label_1”,
“default”: “Button label”,
“label”: “t:sections.image-banner.blocks.buttons.settings.button_label_1.label”,
“info”: “t:sections.image-banner.blocks.buttons.settings.button_label_1.info”
},
{
“type”: “url”,
“id”: “button_link_1”,
“label”: “t:sections.image-banner.blocks.buttons.settings.button_link_1.label”
},
{
“type”: “checkbox”,
“id”: “button_style_secondary_1”,
“default”: false,
“label”: “t:sections.image-banner.blocks.buttons.settings.button_style_secondary_1.label”
},
{
“type”: “text”,
“id”: “button_label_2”,
“default”: “Button label”,
“label”: “t:sections.image-banner.blocks.buttons.settings.button_label_2.label”,
“info”: “t:sections.image-banner.blocks.buttons.settings.button_label_2.info”
},
{
“type”: “url”,
“id”: “button_link_2”,
“label”: “t:sections.image-banner.blocks.buttons.settings.button_link_2.label”
},
{
“type”: “checkbox”,
“id”: “button_style_secondary_2”,
“default”: false,
“label”: “t:sections.image-banner.blocks.buttons.settings.button_style_secondary_2.label”
}
]
}
],
“presets”: [
{
“name”: “t:sections.image-banner.presets.name”,
“blocks”: [
{
“type”: “heading”
},
{
“type”: “text”
},
{
“type”: “buttons”
}
]
}
]
}
{% endschema %}

[DavidEKim]

It’s the Dawn theme 5.0. There is nothing different from my file.

The error shows that you have issues with “Locale files” (At the bottom of Shopify folders).

I don’t know what you changed from the files in Locales.

You should not touch any files in locales.

You might need to reset your theme.

Thanks.

[barcusmrandt]

I haven’t touched the locales file. But no worries I will research this error myself - the heading options still works, it seems it’s only the link to the “label” that is broken.

Anyways, the next thing I would like to add is the possibility to change opacity on container/box. I have managed to hardcode this using this CSS:

.banner__box {
opacity: 0.65;
}

This works, but is not an elegant solution So I have added an opacity slider like this:

I did this by adding the following code to image-banner.liquid:

{
“type”: “range”,
“id”: “image_overlay_opacity”,
“min”: 0,
“max”: 100,
“step”: 10,
“unit”: “%”,
“label”: “t:sections.image-banner.settings.image_overlay_opacity.label”,
“default”: 0
},

But I am missing the “link” between the slider and the actual CSS property that sets the opacity on the box.

[DavidEKim]

You need to add the css style in between {% style %} {% endstyle %}.

Please add the following code.

.banner__box {
opacity: {{ section.settings.image_overlay_opacity }};
}

After you enter the above code in between {% style %} and {% endstyle %} (this is locate just before {% schema %}), it should work.

Hope it helps.

[barcusmrandt]

I see I posted the wrong code. This is the code I used to add the slider:

{
“type”: “range”,
“id”: “image_banner_container_opacity”,
“min”: 0,
“max”: 100,
“step”: 5,
“unit”: “%”,
“label”: “t:sections.image-banner.settings.image_banner_container_opacity.label”,
“default”: 0
},

However, when adding the code to the %style% element, the container and heading disappears alltogether:

.banner__box {
opacity: {{ section.settings.image_banner_container_opacity }};
}

[barcusmrandt]

Haha sorry Opacity was set to zero of course

It works as suggested by you. However I notice opacity is set on heading/text as well. Is it possible to target only the background color of the container?

[barcusmrandt]

Thank you so much for your help so far!

Do you or anybody else know how to set opacity only on background?

Edit: Also I see now that this only works for one page - so displaying container with custom color and opacity only works on one page. On all other pages I get no container at all.

[barcusmrandt]

Yes please I also need to be able to change heading and text color.

[Wsm2023]

hi could you advise how you could change the text colors as well? text and button colors?