Theme default background behind eveything else.

Store Design
,

Topic summary

A user working with Shopify’s Sense theme encountered an unwanted yellowish default background color appearing behind a custom table section they added to their product page. The theme’s background color wasn’t accessible through the standard color scheme selector.

Problem Details:

  • Custom table code (originally shared by another user) lacked color scheme integration
  • Default background color visible in padding between sections
  • Issue visible on product page with custom specifications table

Solution Provided:
Two approaches were offered:

  1. Wrapping the table in a div with white background styling
  2. Adding CSS to the theme’s base.css file targeting the table container and section ID with a specific background color (#f6f9fb)

Outcome:
The CSS solution successfully resolved the background color issue. The user expressed interest in repositioning the table to align beneath the product description (right side) with additional content on the left, but acknowledged this would require more advanced coding expertise beyond their current resources.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

So I am using the Sense theme, and I added some cool table code someone posted on here a while ago. It does not have a color scheme selector. I have noticed that this theme has a default background color when there is padding between sections too, that I haven’t found a spot to edit.

problem.PNG
problem.PNG1222×655 31.4 KB

This yellowish color doesn’t fit. I am going to check the code of this section I added to see if I can change the color there.

URL - https://mediscape.shop/products/vanillin-ex-clove-natural

Here is the added section code. Is there something I can add in here so I can select a color scheme?

{% comment %}
  This is the customizable-table.liquid file containing the code for the customizable table section.
  You can customize the number of columns, rows, alignment, cell text, and table style. Created by Spac-es 2023.
{% endcomment %}

{% assign table_settings = section.settings %}

{%- assign cell_texts = "" | split: "" -%}

{%- for row in (1..table_settings.rows) -%}
  {%- assign rowData = "" | split: "" -%}
  {%- for column in (1..table_settings.columns) -%}
    {%- assign cellTextId = "cell_text_" | append: row | append: "_" | append: column -%}
    {%- assign cellText = section.settings[cellTextId] -%}
    {%- assign rowData = rowData | push: cellText -%}
  {%- endfor -%}
  {%- assign cell_texts = cell_texts | push: rowData -%}
{%- endfor %}

  
      {% for row in (1..table_settings.rows) %}
        
          {% for column in (1..table_settings.columns) %}
            {% assign cellTextId = "cell_text_" | append: row | append: "_" | append: column %}
            {% assign cellText = section.settings[cellTextId] %}
            {% assign alignment = table_settings.pc_alignment %}
            {% if section.is_mobile %}
              {% assign alignment = table_settings.mobile_alignment %}
            {% endif %}
            {% assign cellBorderStyle = table_settings.cell_border_style %}
            {% case cellBorderStyle %}
              {% when 'all_borders' %}
                {% assign cellBorderStyleValue = 'border: 1px solid #000000;' %}
              {% when 'outer_borders' %}
                {% if row == 1 %}
                  {% assign cellBorderStyleValue = 'border-top: 1px solid #000000;' %}
                {% elsif row == table_settings.rows %}
                  {% assign cellBorderStyleValue = 'border-bottom: 1px solid #000000;' %}
                {% else %}
                  {% assign cellBorderStyleValue = '' %}
                {% endif %}
                {% if column == 1 %}
                  {% assign cellBorderStyleValue = cellBorderStyleValue | append: 'border-left: 1px solid #000000;' %}
                {% elsif column == table_settings.columns %}
                  {% assign cellBorderStyleValue = cellBorderStyleValue | append: 'border-right: 1px solid #000000;' %}
                {% endif %}
              {% when 'inner_borders' %}
                {% if row != 1 and row != table_settings.rows %}
                  {% assign cellBorderStyleValue = 'border-top: 1px solid #000000; border-bottom: 1px solid #000000;' %}
                {% else %}
                  {% assign cellBorderStyleValue = '' %}
                {% endif %}
                {% if column != 1 and column != table_settings.columns %}
                  {% assign cellBorderStyleValue = cellBorderStyleValue | append: 'border-left: 1px solid #000000; border-right: 1px solid #000000;' %}
                {% endif %}
                {% if table_settings.columns == 2 and column == 1 %}
                  {% assign cellBorderStyleValue = cellBorderStyleValue | append: 'border-right: 1px solid #000000;' %}
                {% endif %}
              {% else %}
                {% assign cellBorderStyleValue = '' %}
            {% endcase %}
            
          {% endfor %}
        
      {% endfor %}
    

| <br>              {{ cellText }}<br>             |
| - |

{% schema %}
{
  "name": "Customizable Table",
  "settings": [
    {
      "type": "range",
      "id": "columns",
      "label": "Number of Columns",
      "min": 1,
      "max": 3,
      "step": 1,
      "default": 2
    },
    {
      "type": "range",
      "id": "rows",
      "label": "Number of Rows",
      "min": 1,
      "max": 12,
      "step": 1,
      "default": 3
    },
    {
      "type": "range",
      "id": "max_width",
      "label": "Maximum Section Width",
      "min": 0,
      "max": 2000,
      "step": 20,
      "default": 960
    },
    {
      "type": "select",
      "id": "pc_alignment",
      "label": "Alignment on PC devices",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "right", "label": "Right" },
        { "value": "center", "label": "Center" }
      ],
      "default": "center"
    },
    {
      "type": "select",
      "id": "mobile_alignment",
      "label": "Alignment on non-PC devices",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "right", "label": "Right" },
        { "value": "center", "label": "Center" }
      ],
      "default": "center"
    },
    {
      "type": "radio",
      "id": "cell_border_style",
      "label": "Cell Border Style",
      "options": [
        { "value": "all_borders", "label": "All Borders" },
        { "value": "outer_borders", "label": "Outer Borders" },
        { "value": "inner_borders", "label": "Inner Borders" }
      ],
      "default": "all_borders"
    },
    {
      "type": "text",
      "id": "cell_padding",
      "label": "Cell Padding (in pixels)",
      "default": "10px"
    },
    {
      "type": "text",
      "id": "margin_top",
      "label": "Margin Top (in pixels)",
      "default": "20px"
    },
    {
      "type": "text",
      "id": "margin_bottom",
      "label": "Margin Bottom (in pixels)",
      "default": "20px"
    },
    {
      "type": "select",
      "id": "text_weight",
      "label": "Text Weight",
      "default": "normal",
      "options": [
        {
          "value": "normal",
          "label": "Normal"
        },
        {
          "value": "bold",
          "label": "Bold"
        }
      ]
    },
    {
      "type": "text",
      "id": "text_size",
      "label": "Text Size",
      "default": "14"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text Color",
      "default": "#000000"
    },
    {
      "type": "text",
      "id": "cell_text_1_1",
      "label": "Cell Text (1, 1)",
      "default": "Cell 1"
    },
    {
      "type": "text",
      "id": "cell_text_1_2",
      "label": "Cell Text (1, 2)",
      "default": "Cell 2"
    },
    {
      "type": "text",
      "id": "cell_text_1_3",
      "label": "Cell Text (1, 3)",
      "default": "Cell 3"
    },
    {
      "type": "text",
      "id": "cell_text_2_1",
      "label": "Cell Text (2, 1)",
      "default": "Cell 4"
    },
    {
      "type": "text",
      "id": "cell_text_2_2",
      "label": "Cell Text (2, 2)",
      "default": "Cell 5"
    },
    {
      "type": "text",
      "id": "cell_text_2_3",
      "label": "Cell Text (2, 3)",
      "default": "Cell 6"
    },
    {
      "type": "text",
      "id": "cell_text_3_1",
      "label": "Cell Text (3, 1)",
      "default": "Cell 7"
    },
    {
      "type": "text",
      "id": "cell_text_3_2",
      "label": "Cell Text (3, 2)",
      "default": "Cell 8"
    },
    {
      "type": "text",
      "id": "cell_text_3_3",
      "label": "Cell Text (3, 3)",
      "default": "Cell 9"
    },
    {
      "type": "text",
      "id": "cell_text_4_1",
      "label": "Cell Text (4, 1)",
      "default": "Cell 10"
    },
    {
      "type": "text",
      "id": "cell_text_4_2",
      "label": "Cell Text (4, 2)",
      "default": "Cell 11"
    },
    {
      "type": "text",
      "id": "cell_text_4_3",
      "label": "Cell Text (4, 3)",
      "default": "Cell 12"
    },
    {
      "type": "text",
      "id": "cell_text_5_1",
      "label": "Cell Text (5, 1)",
      "default": "Cell 13"
    },
    {
      "type": "text",
      "id": "cell_text_5_2",
      "label": "Cell Text (5, 2)",
      "default": "Cell 14"
    },
    {
      "type": "text",
      "id": "cell_text_5_3",
      "label": "Cell Text (5, 3)",
      "default": "Cell 15"
    },
    {
      "type": "text",
      "id": "cell_text_6_1",
      "label": "Cell Text (6, 1)",
      "default": "Cell 16"
    },
    {
      "type": "text",
      "id": "cell_text_6_2",
      "label": "Cell Text (6, 2)",
      "default": "Cell 17"
    },
    {
      "type": "text",
      "id": "cell_text_6_3",
      "label": "Cell Text (6, 3)",
      "default": "Cell 18"
    },
    {
      "type": "text",
      "id": "cell_text_7_1",
      "label": "Cell Text (7, 1)",
      "default": "Cell 19"
    },
    {
      "type": "text",
      "id": "cell_text_7_2",
      "label": "Cell Text (7, 2)",
      "default": "Cell 20"
    },
    {
      "type": "text",
      "id": "cell_text_7_3",
      "label": "Cell Text (7, 3)",
      "default": "Cell 21"
    },
    {
      "type": "text",
      "id": "cell_text_8_1",
      "label": "Cell Text (8, 1)",
      "default": "Cell 22"
    },
    {
      "type": "text",
      "id": "cell_text_8_2",
      "label": "Cell Text (8, 2)",
      "default": "Cell 23"
    },
    {
      "type": "text",
      "id": "cell_text_8_3",
      "label": "Cell Text (8, 3)",
      "default": "Cell 24"
    },
    {
      "type": "text",
      "id": "cell_text_9_1",
      "label": "Cell Text (9, 1)",
      "default": "Cell 25"
    },
    {
      "type": "text",
      "id": "cell_text_9_2",
      "label": "Cell Text (9, 2)",
      "default": "Cell 26"
    },
    {
      "type": "text",
      "id": "cell_text_9_3",
      "label": "Cell Text (9, 3)",
      "default": "Cell 27"
    },
    {
      "type": "text",
      "id": "cell_text_10_1",
      "label": "Cell Text (10, 1)",
      "default": "Cell 28"
    },
    {
      "type": "text",
      "id": "cell_text_10_2",
      "label": "Cell Text (10, 2)",
      "default": "Cell 29"
    },
    {
      "type": "text",
      "id": "cell_text_10_3",
      "label": "Cell Text (10, 3)",
      "default": "Cell 30"
    },
    {
      "type": "text",
      "id": "cell_text_11_1",
      "label": "Cell Text (11, 1)",
      "default": "Cell 31"
    },
    {
      "type": "text",
      "id": "cell_text_11_2",
      "label": "Cell Text (11, 2)",
      "default": "Cell 32"
    },
    {
      "type": "text",
      "id": "cell_text_11_3",
      "label": "Cell Text (11, 3)",
      "default": "Cell 33"
    },
    {
      "type": "text",
      "id": "cell_text_12_1",
      "label": "Cell Text (12, 1)",
      "default": "Cell 34"
    },
    {
      "type": "text",
      "id": "cell_text_12_2",
      "label": "Cell Text (12, 2)",
      "default": "Cell 35"
    },
    {
      "type": "text",
      "id": "cell_text_12_3",
      "label": "Cell Text (12, 3)",
      "default": "Cell 36"
    }
  ],
  "presets": [
    {
      "name": "Customizable Table",
      "category": "Presets"
    }
  ]
}
{% endschema %}

But why does the theme itself have some weird background colors, even more in the background than the selectable background hex editor in theme colors? How can I change?

Thank you,

Medi

1 Like
2

Wrap the code with a another div and give him background color white. I fixed it and here the code

.teble { background:white; } .table-container { margin: 0 auto; max-width: 880px; margin-top: 20px; margin-bottom: 20px; } .custom-table { border-collapse: collapse; width: 100%; } .custom-table th { text-align: left; padding: 10px; } .custom-table td { font-weight: normal ; font-size: 14px; color: #000000; }
x
Cas # 121-33-5
Appearance White/Tan Powder
Extraction Method Extracted from clove oil
Lot/Batch # Ventos Lot #: L458441
Cell 13 Cell 14
Cell 16 Cell 17
Cell 19 Cell 20
Cell 22 Cell 23
Table
3

Hello @mediscape

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
.table-container {
background: #f6f9fb;
margin-bottom: 0!important;
margin-top: 0!important;
}
div#shopify-section-template--19105076969701__tabledynamicq_3txm4A {
background: #f6f9fb;
}

devcoders_0-1744989130938.png
devcoders_0-1744989130938.png1319×563 26.3 KB

1 Like
4

Amazing thank you so much

1 Like
5

Hello @mediscape
Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance.
If helpful then please Like and Accept Solution.

1 Like
6

I would like to be able to move the entire table to the right side of the screen, to be beneath the description. But then I would also want to put a section on the left side of that and as I understand that would take some who actually knows how to code and I just don’t have the resources for that right now lol. I really appreciate your fix for me though, that makes it look much nicer.

1 Like