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.
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 }}
{%- if section.settings.image != blank -%}
{%- else -%}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%}
{%- for block in section.blocks -%}
{% case block.type %}
{%- when 'heading' -%}
##
{{ block.settings.heading | escape }}
{%- when 'text' -%}
{{ block.settings.text }}
{%- when 'button' -%}
{%- if block.settings.button_label != blank -%}
{% 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": "
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.
",
"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 %}
@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!!
This worked perfectly! Thank you so much.
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 reverseweb.corp@gmail.com.
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??
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 }}
{%- if section.settings.image != blank -%}
{%- else -%}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%}
{%- for block in section.blocks -%}
{% case block.type %}
{%- when 'heading' -%}
##
{{ block.settings.heading | escape }}
{%- when 'text' -%}
{{ block.settings.text }}
{%- when 'button' -%}
{%- if block.settings.button_label != blank -%}
{{ block.settings.button_label | escape }}
{%- endif -%}
{%- endcase -%}
{%- endfor -%}
{% 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": "
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.
",
"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 %}
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
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; }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
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
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:
Thanks
Hi @Tedez
Kindly share your website section for which you’re asking this to be able to help you better.
Thanks
Sheesh B
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.
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