Why isn't my text color working on the front end?

Shopify Plus
1

I am modifying a section file. I’ve added in a bg_color setting that works as expected. In addition to that I’d want to add in a text_color picker.

My settings are not overriding the native CSS at the moment.

Any suggestions?

{%- liquid
  assign page = section.settings.page
  assign section_content = section.settings.content
  assign bg_color = section.settings.bg_color
  assign text_color = section.settings.text_color

-%}

{%- if page or section_content != blank -%}
  <div class="container {{ bg_color }} ">
    <div
      class="lg:grid lg:grid-cols-12 lg:gap-x-10 lg:items-start"
      id="section-inner--{{ section.id }}"
      {% if section.settings.use_jump_link == true %}
        data-js-jump-link-id="{{ section.id }}"
        data-js-jump-link-label="{{ section.settings.jump_link_label }}"
      {% endif %}>
      <div class="lg:col-span-8 lg:col-start-3 pt-[48px] lg:pt-[96px]">
        <div class="general-content__wrapper overflow-hidden {{ section.settings.content_adjust }}">
          {% if section_content != blank %}
            {{ section_content }}
          {% else %}
            {%- render 'shortcode-content', _content: page.content -%}
          {% endif %}
        </div>
      </div>
    </div>
  </div>

  {%- render 'spacer',
 _mobile_space: section.settings.bottom_padding_mobile,
 _desktop_space: section.settings.bottom_padding_desktop -%}

{%- endif -%}

{% schema %}
  {
    "name": "Wysiwyg",
    "tag": "section",
    "class": "wysiwyg-section",
    "settings": [
      {
        "type": "header",
        "content": "Page"
      },
      {
        "type": "page",
        "id": "page",
        "label": "Page"
      },
      {
        "type": "richtext",
        "id": "content",
        "label": "Content",
        "info": "Custom content for WYSIWYG section. This content will override page content if populated."
      },
      {
        "type": "select",
        "id": "content_adjust",
        "label": "Content Adjustment",
        "options": [
          {
            "label": "Left",
            "value": "left-text"
          },
          {
            "label": "Center",
            "value": "center-text"
          }
        ],
        "default": "left-text"
      },
      {
        "type": "header",
        "content": "Jump Link Settings"
      },
      {
        "type": "select",
        "id": "bg_color",
        "label": "Background Color",
        "info": "Accent color selections will default to 'Dark Grey' for Singer brand.",
        "options": [
          {
            "value": "bg-white",
            "label": "White"
          },
          {
            "value": "bg-grey-1",
            "label": "Light Grey"
          },
          {
            "value": "bg-grey-6",
            "label": "Dark Grey"
          },
          {
            "value": "bg-accent-1",
            "label": "Accent 1"
          }, {
            "value": "bg-accent-2",
            "label": "Accent 2"
          }
        ],
        "default": "bg-accent-1"
      },
      {
        "type": "checkbox",
        "id": "use_jump_link",
        "label": "Use Jump Link",
        "default": false,
        "info": "This field is for sticky TOC"
      },
      {
        "type": "text",
        "id": "jump_link_label",
        "label": "Jump Link Label"
      },
      {
        "type": "header",
        "content": "Spacing"
      },
      {
        "id": "bottom_padding_mobile",
        "label": "Bottom Padding - Mobile",
        "type": "range",
        "min": 0,
        "max": 200,
        "step": 2,
        "default": 0
      },
      {
        "id": "bottom_padding_desktop",
        "label": "Bottom Padding - Desktop",
        "type": "range",
        "min": 0,
        "max": 200,
        "step": 2,
        "default": 0
      }
    ],
    "presets": [
      {
        "name": "Wysiwyg",
        "category": "Homepage"
      }
    ]
  }
{% endschema %}
2

** @grantSVP **- Without seeing the actual HTML/CSS output, I can only speculate, but based on the logic you’re using, it looks like you’re assigning classes to the div for background colors (e.g., bg-white, bg-grey-1). A few things to check:

  1. Have the CSS styles for each of those classes (like bg-white, bg-grey-1, etc.) been defined in the theme’s stylesheet?
  2. Have you verified whether other CSS rules, particularly from the theme’s base styles, might be taking precedence over your custom settings? You might want to inspect the element in the browser to check for any conflicting styles or higher specificity rules.
  3. If the issue persists, consider using inline styles or increasing the CSS specificity for your custom classes.
1 Like
3

Thanks for your response Robert.

My bg classes work as expected, regarding the text color is where I am running into an issue. I copy/pasted the schema settings from another section with the same text color functionality and assumed/hope/prayed it would work. The class I am adding does show up on the front end dark-text, light-text when the toggle is applied. However when I add those classes to my specific section nothing is happening. I can do this same experiment in the browser in another section (the section I copied the settings from) and the class add/remove works as expected.

I think you are right about the specificity needs to be properly vetted. I’ll keep digging, thanks for giving me a push.

1 Like
4

@grantSVP - Here’s the issue: text_color variable is assigned a value, but isn’t being used anywhere in the HTML.

1 Like
5 

        

          {% if section_content != blank %}
            {{ section_content }}
          {% else %}
            {%- render 'shortcode-content', _content: page.content -%}
          {% endif %}

Is my thinking wrong that the text_color value wont be updated on the div? Or should I put this logic inline on the opening div?

6

Also, I appreciate your time and help Robert, thank you very much

7

Here is the full file.

{%- liquid
  assign page = section.settings.page
  assign section_content = section.settings.content
  assign bg_color = section.settings.bg_color
  assign text_color = section.settings.text_color

-%}

{%- if page or section_content != blank -%}

      

        

        
          {% if section_content != blank %}
            

                {{ section_content }}
            

          
          {% else %}
            {%- render 'shortcode-content', _content: page.content -%}
          {% endif %}
        

      

    

  

  {%- render 'spacer',
 _mobile_space: section.settings.bottom_padding_mobile,
 _desktop_space: section.settings.bottom_padding_desktop -%}

{%- endif -%}

{% schema %}
  {
    "name": "Wysiwyg",
    "tag": "section",
    "class": "wysiwyg-section",
    "settings": [
      {
        "type": "header",
        "content": "Page"
      },
      {
        "type": "page",
        "id": "page",
        "label": "Page"
      },
      {
        "type": "richtext",
        "id": "content",
        "label": "Content",
        "info": "Custom content for WYSIWYG section. This content will override page content if populated."
      },
      {
        "type": "select",
        "id": "content_adjust",
        "label": "Content Adjustment",
        "options": [
          {
            "label": "Left",
            "value": "left-text"
          },
          {
            "label": "Center",
            "value": "center-text"
          }
        ],
        "default": "left-text"
      },
      {
        "type": "select",
        "id": "text_color",
        "label": "Text Color",
        "options": [
          {
            "label": "Dark Text",
            "value": "dark-text"
          },
          {
            "label": "Light Text",
            "value": "light-text"
          }
        ],
        "default": "light-text"
      },
      {
        "type": "select",
        "id": "bg_color",
        "label": "Background Color",
        "info": "Accent color selections will default to 'Dark Grey' for Singer brand.",
        "options": [
          {
            "value": "bg-white",
            "label": "White"
          },
          {
            "value": "bg-grey-1",
            "label": "Light Grey"
          },
          {
            "value": "bg-grey-6",
            "label": "Dark Grey"
          },
          {
            "value": "bg-accent-1",
            "label": "Accent 1"
          }, {
            "value": "bg-accent-2",
            "label": "Accent 2"
          }
        ],
        "default": "bg-white"
      },
      {
        "type": "header",
        "content": "Jump Link Settings"
      },
      {
        "type": "checkbox",
        "id": "use_jump_link",
        "label": "Use Jump Link",
        "default": false,
        "info": "This field is for sticky TOC"
      },
      {
        "type": "text",
        "id": "jump_link_label",
        "label": "Jump Link Label"
      },
      {
        "type": "header",
        "content": "Spacing"
      },
      {
        "id": "bottom_padding_mobile",
        "label": "Bottom Padding - Mobile",
        "type": "range",
        "min": 0,
        "max": 200,
        "step": 2,
        "default": 0
      },
      {
        "id": "bottom_padding_desktop",
        "label": "Bottom Padding - Desktop",
        "type": "range",
        "min": 0,
        "max": 200,
        "step": 2,
        "default": 0
      }
    ],
    "presets": [
      {
        "name": "Wysiwyg",
        "category": "Homepage"
      }
    ]
  }
{% endschema %}