Add Another Choice Of Background And Accent Option - Shopify 2.0

Hi Katrine,

I solve the issue in my last message, but I'm facing another problem:

Part of the new code is:

<a{% if block.settings.button_link == blank %} role="link" aria-disabled="true"{% else %} href="{{ block.settings.button_link }}"{% endif %} class="button" {{ block.shopify_attributes }}
style="color : {{block.settings.colors_button_txt}};background : {{block.settings.colors_button_bk}};border-color: {{block.settings.colors_button_brdr}};">
{{ block.settings.button_label | escape }}

Instead of the default code:

<a{% 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 }}

The problem:

I am using many image with text sections. Most of them I want to keep section's background as background 1 that the button color will be automatically the accent 1, as it was on default.

The part of this new code requires me to change manually all the image with text sections, background and button colors because the inital option removed.

What I need:

When I choose a section's background as background 1, the button color will be automatically the accent 1, and that I will have the option to change the button color in some sections I need to.

Thanks

@ben a way to solve this is by creating a new and separate section for (Image with text), this way you can use the default Dawn section + the one we have created to insert it wherever you ike and you can change the button color separately.

We will name the new section (Image With Text Custom), and here is how to create it :

• From your Shopify dashboard, click Online store > Actions > Edit code
• Under Sections, click Add a new section

• Name it image_with_text_custom
• Paste this 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 %} image-with-text--{{ section.settings.content_layout }} color-scheme-{{ section.settings.color_scheme }}">
<div class="image-with-text__grid grid grid--gapless grid--1-col grid--{% if section.settings.desktop_image_width == 'medium' %}2-col-tablet{% else %}3-col-tablet{% endif %}{% if section.settings.layout == 'text_first' %} image-with-text__grid--reverse{% endif %}{% if section.settings.content_layout == 'no-overlap' %} gradient color-{{ section.settings.color_scheme }}{% endif %}">
<div class="image-with-text__media-item image-with-text__media-item--{{ section.settings.desktop_image_width }} image-with-text__media-item--{{ section.settings.desktop_content_position }} 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="image-with-text__text-item grid__item">
<div id="ImageWithText--{{ section.id }}" class="image-with-text__content image-with-text__content--{{ section.settings.desktop_content_position }} image-with-text__content--desktop-{{ section.settings.desktop_content_alignment }} image-with-text__content--mobile-{{ section.settings.mobile_content_alignment }} image-with-text__content--{{ section.settings.height }} gradient color-{{ section.settings.color_scheme }}">
{%- for block in section.blocks -%}
{% case block.type %}
{%- when 'heading' -%}
<h2 class="image-with-text__heading {{ block.settings.heading_size }}" {{ block.shopify_attributes }}>
{{ block.settings.heading | escape }}
</h2>
{%- when 'caption' -%}
<p class="image-with-text__text image-with-text__text--caption {{ block.settings.text_style }} {{ block.settings.text_style }}--{{ block.settings.text_size }} {{ block.settings.text_style }}" {{ block.shopify_attributes }}>{{ block.settings.caption | escape }}</p>
{%- when 'text' -%}
<div class="image-with-text__text rte {{ block.settings.text_style }}" {{ block.shopify_attributes }}>{{ block.settings.text }}</div>
{%- when 'button' -%}
{%- if block.settings.button_label != blank -%}
<a{% if block.settings.button_link == blank %} role="link" aria-disabled="true"{% else %} href="{{ block.settings.button_link }}"{% endif %} class="button" {{ block.shopify_attributes }}
style="color : {{block.settings.colors_button_txt}};background : {{block.settings.colors_button_bk}};border-color: {{block.settings.colors_button_brdr}};">
{{ block.settings.button_label | escape }}
</a>
{%- endif -%}
{%- endcase -%}
{%- endfor -%}
</div>
</div>
</div>
</div>

{% schema %}
{
"name": "Image With Text custom",
"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": "desktop_image_width",
"options": [
{
"value": "small",
"label": "t:sections.image-with-text.settings.desktop_image_width.options__1.label"
},
{
"value": "medium",
"label": "t:sections.image-with-text.settings.desktop_image_width.options__2.label"
},
{
"value": "large",
"label": "t:sections.image-with-text.settings.desktop_image_width.options__3.label"
}
],
"default": "medium",
"label": "t:sections.image-with-text.settings.desktop_image_width.label",
"info": "t:sections.image-with-text.settings.desktop_image_width.info"
},
{
"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"
},
{
"type": "select",
"id": "desktop_content_position",
"options": [
{
"value": "top",
"label": "t:sections.image-with-text.settings.desktop_content_position.options__1.label"
},
{
"value": "middle",
"label": "t:sections.image-with-text.settings.desktop_content_position.options__2.label"
},
{
"value": "bottom",
"label": "t:sections.image-with-text.settings.desktop_content_position.options__3.label"
}
],
"default": "top",
"label": "t:sections.image-with-text.settings.desktop_content_position.label"
},
{
"type": "select",
"id": "desktop_content_alignment",
"options": [
{
"value": "left",
"label": "t:sections.image-with-text.settings.desktop_content_alignment.options__1.label"
},
{
"value": "center",
"label": "t:sections.image-with-text.settings.desktop_content_alignment.options__2.label"
},
{
"value": "right",
"label": "t:sections.image-with-text.settings.desktop_content_alignment.options__3.label"
}
],
"default": "left",
"label": "t:sections.image-with-text.settings.desktop_content_alignment.label"
},
{
"type": "select",
"id": "content_layout",
"options": [
{
"value": "no-overlap",
"label": "t:sections.image-with-text.settings.content_layout.options__1.label"
},
{
"value": "overlap",
"label": "t:sections.image-with-text.settings.content_layout.options__2.label"
}
],
"default": "no-overlap",
"label": "t:sections.image-with-text.settings.content_layout.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": "header",
"content": "Mobile layout"
},
{
"type": "select",
"id": "mobile_content_alignment",
"options": [
{
"value": "left",
"label": "t:sections.image-with-text.settings.mobile_content_alignment.options__1.label"
},
{
"value": "center",
"label": "t:sections.image-with-text.settings.mobile_content_alignment.options__2.label"
},
{
"value": "right",
"label": "t:sections.image-with-text.settings.mobile_content_alignment.options__3.label"
}
],
"default": "left",
"label": "t:sections.image-with-text.settings.mobile_content_alignment.label"
}
],
"blocks": [
{
"type": "heading",
"name": "t:sections.image-with-text.blocks.heading.name",
"limit": 1,
"settings": [
{
"type": "text",
"id": "heading",
"default": "Image with text custom",
"label": "t:sections.image-with-text.blocks.heading.settings.heading.label"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h2",
"label": "t:sections.image-with-text.blocks.heading.settings.heading_size.options__1.label"
},
{
"value": "h1",
"label": "t:sections.image-with-text.blocks.heading.settings.heading_size.options__2.label"
},
{
"value": "h0",
"label": "t:sections.image-with-text.blocks.heading.settings.heading_size.options__3.label"
}
],
"default": "h1",
"label": "t:sections.image-with-text.blocks.heading.settings.heading_size.label"
}
]
},
{
"type": "caption",
"name": "t:sections.image-with-text.blocks.caption.name",
"limit": 1,
"settings": [
{
"type": "text",
"id": "caption",
"default": "Add a tagline",
"label": "t:sections.image-with-text.blocks.caption.settings.text.label"
},
{
"type": "select",
"id": "text_style",
"options": [
{
"value": "subtitle",
"label": "t:sections.image-with-text.blocks.caption.settings.text_style.options__1.label"
},
{
"value": "caption-with-letter-spacing",
"label": "t:sections.image-with-text.blocks.caption.settings.text_style.options__2.label"
}
],
"default": "caption-with-letter-spacing",
"label": "t:sections.image-with-text.blocks.caption.settings.text_style.label"
},
{
"type": "select",
"id": "text_size",
"options": [
{
"value": "small",
"label": "t:sections.image-with-text.blocks.caption.settings.caption_size.options__1.label"
},
{
"value": "medium",
"label": "t:sections.image-with-text.blocks.caption.settings.caption_size.options__2.label"
},
{
"value": "large",
"label": "t:sections.image-with-text.blocks.caption.settings.caption_size.options__3.label"
}
],
"default": "medium",
"label": "t:sections.image-with-text.blocks.caption.settings.caption_size.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": "select",
"id": "text_style",
"options": [
{
"value": "body",
"label": "t:sections.image-with-text.blocks.text.settings.text_style.options__1.label"
}, {
"value": "subtitle",
"label": "t:sections.image-with-text.blocks.text.settings.text_style.options__2.label"
}
],
"default": "body",
"label": "t:sections.image-with-text.blocks.text.settings.text_style.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": "colors_button_bk",
"default": "#000000",
"label": "Button background"
},
{
"type": "color",
"id": "colors_button_txt",
"default": "#FFFFFF",
"label": "Button text color"
},
{
"type": "color",
"id": "colors_button_brdr",
"default": "#FCFBD4",
"label": "Button border"
}
]
}
],
"presets": [
{
"name": "Image With Text custom",
"blocks": [
{
"type": "heading"
},
{
"type": "text"
},
{
"type": "button"
}
]
}
]
}
{% endschema %}

• Click Save

Now you are able to add this new section from the theme editor and edit the button colors separatly from the default dawn section.

Let me know if you need any further help with this

Katrine

Hi @katrine,

It works! Thanks.

I made some changes to keep all the options of the Dawn 2.0 available.

Have a great weekend.

Best,

Ben