Change button color in "Image with Text" section, in new 2.0 Dawn theme

[sandraleedesign]

Hi, Ive just loaded the new Dawn theme onto my shopify. Is there a custom code that i can add so that i am able to select a custom colour for the button that appears with the "Image with text" section that i am adding to my homepage? I want to be able to select the custom colour in the theme customisation.

I dont have a store URL as i am setting up a shopify store in my shopify partner account. 

[Sheesh_b · Accepted solution]

Hi @sandraleedesign 

I edited Down theme code to show color access to change the button color, text color, and border color.

Copy below code and replace it with image-with-text.liquid code.

{{ 'component-image-with-text.css' | asset_url | stylesheet_tag }}

<div class="image-with-text {% if section.settings.full_width %}image-with-text--full-width{% else %}page-width{% endif %} color-scheme-{{ section.settings.color_scheme }}">
  <div class="image-with-text__grid color-{{ section.settings.color_scheme }} grid grid--gapless grid--1-col grid--2-col-tablet gradient{% if section.settings.layout == 'text_first' %} image-with-text__grid--reverse{% endif %}">
    <div class="grid__item">
      <div class="image-with-text__media image-with-text__media--{{ section.settings.height }} {% if section.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
        {% if section.settings.height == 'adapt' and section.settings.image != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;"{% endif %}
      >
        {%- if section.settings.image != blank -%}
          <img
            srcset="{%- if section.settings.image.width >= 165 -%}{{ section.settings.image | img_url: '165x' }} 165w,{%- endif -%}
              {%- if section.settings.image.width >= 360 -%}{{ section.settings.image | img_url: '360x' }} 360w,{%- endif -%}
              {%- if section.settings.image.width >= 535 -%}{{ section.settings.image | img_url: '535x' }} 535w,{%- endif -%}
              {%- if section.settings.image.width >= 750 -%}{{ section.settings.image | img_url: '750x' }} 750w,{%- endif -%}
              {%- if section.settings.image.width >= 1070 -%}{{ section.settings.image | img_url: '1070x' }} 1070w,{%- endif -%}
              {%- if section.settings.image.width >= 1500 -%}{{ section.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
              {{ section.settings.image | img_url: 'master' }} {{ section.settings.image.width }}w"
            src="{{ section.settings.image | img_url: '1500x' }}"
            sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)"
            alt="{{ section.settings.image.alt | escape }}"
            loading="lazy"
            width="{{ section.settings.image.width }}"
            height="{{ section.settings.image.height }}"
          >
        {%- else -%}
          {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
        {%- endif -%}
      </div>
    </div>
    <div class="grid__item">
      <div class="image-with-text__content image-with-text__content--{{ section.settings.height }}">
        {%- for block in section.blocks -%}
          {% case block.type %}
            {%- when 'heading' -%}
              <h2 class="image-with-text__heading h1" {{ block.shopify_attributes }}>
                {{ block.settings.heading | escape }}
              </h2>
            {%- when 'text' -%}
              <div class="image-with-text__text rte" {{ block.shopify_attributes }}>{{ block.settings.text }}</div>
            {%- when 'button' -%}
              {%- if block.settings.button_label != blank -%}
                <a{% if block.settings.button_link == blank %} style="background-color: {{ block.settings.button_bg_color }}; color: {{ block.settings.button_color }}; border-color: {{ block.settings.button_bdr_color }};" role="link" aria-disabled="true"{% else %} href="{{ block.settings.button_link }}"{% endif %} class="button{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}" {{ block.shopify_attributes }}>
                  {{ block.settings.button_label | escape }}
                </a>
              {%- endif -%}
          {%- endcase -%}
        {%- endfor -%}
      </div>
    </div>
  </div>
</div>

{% schema %}
{
  "name": "t:sections.image-with-text.name",
  "class": "spaced-section spaced-section--full-width",
  "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": "t:sections.image-with-text.settings.image.label"
    },
    {
      "type": "select",
      "id": "height",
      "options": [
        {
          "value": "adapt",
          "label": "t:sections.image-with-text.settings.height.options__1.label"
        },
        {
          "value": "small",
          "label": "t:sections.image-with-text.settings.height.options__2.label"
        },
        {
          "value": "large",
          "label": "t:sections.image-with-text.settings.height.options__3.label"
        }
      ],
      "default": "adapt",
      "label": "t:sections.image-with-text.settings.height.label"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "background-1",
          "label": "t:sections.image-with-text.settings.color_scheme.options__1.label"
        },
        {
          "value": "background-2",
          "label": "t:sections.image-with-text.settings.color_scheme.options__2.label"
        },
        {
          "value": "inverse",
          "label": "t:sections.image-with-text.settings.color_scheme.options__3.label"
        },
        {
          "value": "accent-1",
          "label": "t:sections.image-with-text.settings.color_scheme.options__4.label"
        },
        {
          "value": "accent-2",
          "label": "t:sections.image-with-text.settings.color_scheme.options__5.label"
        }
      ],
      "default": "background-1",
      "label": "t:sections.image-with-text.settings.color_scheme.label"
    },
    {
      "type": "select",
      "id": "layout",
      "options": [
        {
          "value": "image_first",
          "label": "t:sections.image-with-text.settings.layout.options__1.label"
        },
        {
          "value": "text_first",
          "label": "t:sections.image-with-text.settings.layout.options__2.label"
        }
      ],
      "default": "image_first",
      "label": "t:sections.image-with-text.settings.layout.label",
      "info": "t:sections.image-with-text.settings.layout.info"
    }
  ],
  "blocks": [
    {
      "type": "heading",
      "name": "t:sections.image-with-text.blocks.heading.name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "default": "Image with text",
          "label": "t:sections.image-with-text.blocks.heading.settings.heading.label"
        }
      ]
    },
    {
      "type": "text",
      "name": "t:sections.image-with-text.blocks.text.name",
      "limit": 1,
      "settings": [
        {
          "type": "richtext",
          "id": "text",
          "default": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>",
          "label": "t:sections.image-with-text.blocks.text.settings.text.label"
        }
      ]
    },
    {
      "type": "button",
      "name": "t:sections.image-with-text.blocks.button.name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "button_label",
          "default": "Button label",
          "label": "t:sections.image-with-text.blocks.button.settings.button_label.label",
          "info": "t:sections.image-with-text.blocks.button.settings.button_label.info"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "t:sections.image-with-text.blocks.button.settings.button_link.label"
        },
		{
          "type": "color",
          "id": "button_bg_color",
          "default": "#000000",
          "label": "Button Color"
        },
		{
          "type": "color",
          "id": "button_color",
          "default": "#FFFFFF",
          "label": "Text Color"
        },
		{
          "type": "color",
          "id": "button_bdr_color",
          "default": "#000000",
          "label": "Border Color"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "t:sections.image-with-text.presets.name",
      "blocks": [
        {
          "type": "heading"
        },
        {
          "type": "text"
        },
        {
          "type": "button"
        }
      ]
    }
  ]
}
{% endschema %}

[honeybug]

@Sheesh_b  Don't suppose you know if this would work in Symmetry as well? Or if it's possible to do the same thing so background colors/graphics/font size & padding can be adjusted as well? We're in search of a solution to update the Background Graphic for a Text Column with images. Would appreciate any guidance or help!!

[Sheesh_b]

Hi @honeybug 

The above shared solution will work only on Shopify Down theme.

I don't have access to Symmetry theme but I can write the code for you to amend your requirements in the theme if you can share the theme files using https://wetransfer.com/ on [email protected].

[sandraleedesign]

This worked perfectly! Thank you so much. 

[sandraleedesign]

Hi the code dosnt work as soon as you enter a link for the button, the colour settings revert back to the standard 'Accent 1' colour. Are you able to please fix the code??

[Sheesh_b]

Hi @sandraleedesign 

Copy below code and replace to image-with-text.liquid code and it will surely fix the issue.

{{ 'component-image-with-text.css' | asset_url | stylesheet_tag }}

<div class="image-with-text {% if section.settings.full_width %}image-with-text--full-width{% else %}page-width{% endif %} color-scheme-{{ section.settings.color_scheme }}">
  <div class="image-with-text__grid color-{{ section.settings.color_scheme }} grid grid--gapless grid--1-col grid--2-col-tablet gradient{% if section.settings.layout == 'text_first' %} image-with-text__grid--reverse{% endif %}">
    <div class="grid__item">
      <div class="image-with-text__media image-with-text__media--{{ section.settings.height }} {% if section.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
        {% if section.settings.height == 'adapt' and section.settings.image != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;"{% endif %}
      >
        {%- if section.settings.image != blank -%}
          <img
            srcset="{%- if section.settings.image.width >= 165 -%}{{ section.settings.image | img_url: '165x' }} 165w,{%- endif -%}
              {%- if section.settings.image.width >= 360 -%}{{ section.settings.image | img_url: '360x' }} 360w,{%- endif -%}
              {%- if section.settings.image.width >= 535 -%}{{ section.settings.image | img_url: '535x' }} 535w,{%- endif -%}
              {%- if section.settings.image.width >= 750 -%}{{ section.settings.image | img_url: '750x' }} 750w,{%- endif -%}
              {%- if section.settings.image.width >= 1070 -%}{{ section.settings.image | img_url: '1070x' }} 1070w,{%- endif -%}
              {%- if section.settings.image.width >= 1500 -%}{{ section.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
              {{ section.settings.image | img_url: 'master' }} {{ section.settings.image.width }}w"
            src="{{ section.settings.image | img_url: '1500x' }}"
            sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)"
            alt="{{ section.settings.image.alt | escape }}"
            loading="lazy"
            width="{{ section.settings.image.width }}"
            height="{{ section.settings.image.height }}"
          >
        {%- else -%}
          {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
        {%- endif -%}
      </div>
    </div>
    <div class="grid__item">
      <div class="image-with-text__content image-with-text__content--{{ section.settings.height }}">
        {%- for block in section.blocks -%}
          {% case block.type %}
            {%- when 'heading' -%}
              <h2 class="image-with-text__heading h1" {{ block.shopify_attributes }}>
                {{ block.settings.heading | escape }}
              </h2>
            {%- when 'text' -%}
              <div class="image-with-text__text rte" {{ block.shopify_attributes }}>{{ block.settings.text }}</div>
            {%- when 'button' -%}
              {%- if block.settings.button_label != blank -%}
                <a style="background-color: {{ block.settings.button_bg_color }}; color: {{ block.settings.button_color }}; border-color: {{ block.settings.button_bdr_color }};" {% if block.settings.button_link == blank %} role="link" aria-disabled="true"{% else %} href="{{ block.settings.button_link }}"{% endif %} class="button{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}" {{ block.shopify_attributes }}>
                  {{ block.settings.button_label | escape }}
                </a>
              {%- endif -%}
          {%- endcase -%}
        {%- endfor -%}
      </div>
    </div>
  </div>
</div>

{% schema %}
{
  "name": "t:sections.image-with-text.name",
  "class": "spaced-section spaced-section--full-width",
  "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": "t:sections.image-with-text.settings.image.label"
    },
    {
      "type": "select",
      "id": "height",
      "options": [
        {
          "value": "adapt",
          "label": "t:sections.image-with-text.settings.height.options__1.label"
        },
        {
          "value": "small",
          "label": "t:sections.image-with-text.settings.height.options__2.label"
        },
        {
          "value": "large",
          "label": "t:sections.image-with-text.settings.height.options__3.label"
        }
      ],
      "default": "adapt",
      "label": "t:sections.image-with-text.settings.height.label"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "background-1",
          "label": "t:sections.image-with-text.settings.color_scheme.options__1.label"
        },
        {
          "value": "background-2",
          "label": "t:sections.image-with-text.settings.color_scheme.options__2.label"
        },
        {
          "value": "inverse",
          "label": "t:sections.image-with-text.settings.color_scheme.options__3.label"
        },
        {
          "value": "accent-1",
          "label": "t:sections.image-with-text.settings.color_scheme.options__4.label"
        },
        {
          "value": "accent-2",
          "label": "t:sections.image-with-text.settings.color_scheme.options__5.label"
        }
      ],
      "default": "background-1",
      "label": "t:sections.image-with-text.settings.color_scheme.label"
    },
    {
      "type": "select",
      "id": "layout",
      "options": [
        {
          "value": "image_first",
          "label": "t:sections.image-with-text.settings.layout.options__1.label"
        },
        {
          "value": "text_first",
          "label": "t:sections.image-with-text.settings.layout.options__2.label"
        }
      ],
      "default": "image_first",
      "label": "t:sections.image-with-text.settings.layout.label",
      "info": "t:sections.image-with-text.settings.layout.info"
    }
  ],
  "blocks": [
    {
      "type": "heading",
      "name": "t:sections.image-with-text.blocks.heading.name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "default": "Image with text",
          "label": "t:sections.image-with-text.blocks.heading.settings.heading.label"
        }
      ]
    },
    {
      "type": "text",
      "name": "t:sections.image-with-text.blocks.text.name",
      "limit": 1,
      "settings": [
        {
          "type": "richtext",
          "id": "text",
          "default": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>",
          "label": "t:sections.image-with-text.blocks.text.settings.text.label"
        }
      ]
    },
    {
      "type": "button",
      "name": "t:sections.image-with-text.blocks.button.name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "button_label",
          "default": "Button label",
          "label": "t:sections.image-with-text.blocks.button.settings.button_label.label",
          "info": "t:sections.image-with-text.blocks.button.settings.button_label.info"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "t:sections.image-with-text.blocks.button.settings.button_link.label"
        },
		{
          "type": "color",
          "id": "button_bg_color",
          "default": "#000000",
          "label": "Button Color"
        },
		{
          "type": "color",
          "id": "button_color",
          "default": "#FFFFFF",
          "label": "Text Color"
        },
		{
          "type": "color",
          "id": "button_bdr_color",
          "default": "#000000",
          "label": "Border Color"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "t:sections.image-with-text.presets.name",
      "blocks": [
        {
          "type": "heading"
        },
        {
          "type": "text"
        },
        {
          "type": "button"
        }
      ]
    }
  ]
}
{% endschema %}

[theuntakenname]

Hi Sheesh_b 

i would like to use this in the 'Ride' theme, would that work?

i set an overall link style in theme.liquid by adding this code

<style type="text/css" media="screen">
a:link { color:#a8b652; text-decoration: none; }
a:visited { color:#a8b652; text-decoration: none; }
a:hover { color:#a8b652; text-decoration: none; }
a:active { color:#a8b652; text-decoration: underline; }
</style>

my problem is now the button text is the same color as the button, see here https://iroll.co.za 

i would like to be able to style button text color please

thank you

[theuntakenname]

my request is no longer needed, i removed the custom link styling and it works.

i would like to know how to specify button link text colour if possible! thanks 

[Tedez]

Hi
As the Theme (Dawn) was updated multiple times since this was published and I have some problems figuring out which CSS to change now, I have two questions if I may please:
- will that allow to change the background color of the button in that section (image with text. mutlirow), as currently the background is set up the same as the whole section. And this is really what Im after. If the section background is black, I want button background to be i.e. blue.
Will that code do that?
- if so, which CSS (at this version of Dawn) to edit and where? Or maybe a new code is required?
It would be great if we could change the size of the button too 🙂 

Thanks

[Sheesh_b]

Hi @Tedez 

Kindly share your website section for which you're asking this to be able to help you better.

Thanks

Sheesh B

[Tedez]

Hey 
I have created a new post as I wasn't sure if are able to reply under this as it has been resolved. I got some answers which I haven't checked yet due to the latest theme update.

https://community.shopify.com/c/online-store-and-theme/dawn-theme-image-with-text-multirow-button-co...

[Sheesh_b]

Hi @Tedez 

I've replied to your new post. Kindly check my reply and I'll try to help you to solve the issue.

Thanks

Sheesh B