How can I assign different color buttons in Refresh Theme's Image with Text section?

Technical Q&A
1

Using Shopify’s Refresh Theme, I’m looking to have different color buttons for my Image with Text sections.

Would that be possible by assigning a class to the button, and then referencing that in CSS?

Looking at the image-with-text.liquid file I am sure I have to add a class to the schema below, but do not know what it would be.

Any insight is appreciated!

{
      "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"
        }
2
  • First, you got to find the buttons
  • Add inline style and give the color a variable. Then come here to schema and use a color picker
  • Or you can directly apply the colors to inline CSS
3

@robkaufman

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.