Hello! So I’m using the Dawn theme and realized there is no way to add tables within the theme editor. I’m not really sure why, to me, this seemed like a bare minimum sort of feature so I’m either blind or they didn’t add support for it. So I’m trying to figure out a solution on how to add a table myself that scales well on mobile as well as desktop.
Thanks!
Hello @Burner-Reborn
You can try this: might be it will be helpful to you
Here are the steps you need to follow
Select the Insert tables option under the dropdown list.
Using the Insert tables button again, you can modify your table by selecting one of these options:
Hello @Burner-Reborn ,
Here is our suggestions:
Open the file where your want to add table or create a new file
Add the following code:
| Column 1 | Column 2 | Column 3 |
| - | - | - |
| Row 1, Column 1 | Row 1, Column 2 | Row 1, Column 3 |
| Row 2, Column 1 | Row 2, Column 2 | Row 2, Column 3 |
| Row 3, Column 1 | Row 3, Column 2 | Row 3, Column 3 |
Modify the table content by replacing “Column 1”, “Column 2”, etc. with your own column headings, and “Row 1, Column 1”, “Row 1, Column 2”, etc. with your own table data.
Save and preview.
Hope this can help.
Ali Reviews team.
Hey the table worked, but is there a way for me to use dynamic sources as well?
Did you ever find a solution to this? I’m attempting the exact same and haven’t had much luck connecting dynamic sources.
Hello everyone!
I made some code a few months ago and I want to share it with the whole community! I hope you appreciate it and it works for you!
I have named the file: customizable-table.liquid. You can customize the number of columns, rows, alignment, cell text, and table style in REAL-TIME (from Shopify’s customizer).
Created by Spac-es in 2023:
{% 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 %}
You can add as many columns and rows as you want from the code!
This is what the section inside the Shopify customize panel would look like:
I hope it helps you to create the necessary tables for your websites! 
Hello, I want to include a table in my blog post as well as collections and product pages. I tried to use your code and paste it into a new file in sections named “customizable-table” and did not work. Then I tried with a new file in snippets and also did not work and gave me an error that the schema was not recognized. Then I tried to add the code to the collection page where I wanted to put the table but it also gave me an error or json not recognizable. Could you please give me more details on where the code needs to be inserted or the steps that are needed? Otherwise if you give me your email I can send you a PM with more details. Thank you in advance for your help! It means a lot to me 
Hello! A pleasure to help.
The original idea was to create a section to be able to add and edit cells in real time from the Shopify customize panel.
If you want a table and include it in a fragment and then render it, you can do the following:
1- Create a new document in ‘snippets’ (fragmentos in Spanish).
2- Add the following code inside the new snippet:
{% assign table_settings = section.settings %}
{% assign cellBorderStyleValue = 'border-color: #373737' %}
{%- assign rows = table_settings.rows | default: 8 -%}
{% for row in (1..rows) %}
{%- assign columns = table_settings.columns | default: 2 -%}
{% for column in (1..columns) %}
{% assign cellTextId = "cell_text_" | append: row | append: "_" | append: column %}
{% assign cellText = section.settings[cellTextId] | default: "Celda " %}
{% endfor %}
{% endfor %}
{% assign rows = table_settings.rows | default: 8 %}
{% for row in (1..rows) %}
{% assign columns = table_settings.columns | default: 2 %}
{% for column in (1..columns) %}
{% assign cellTextId = "cell_text_" | append: row | append: "_" | append: column %}
{% case row %}
{% when 1 %}
{% assign cellClass = "first-row-cell" %}
{% case column %}
{% when 1 %} {% assign cellText = "title1" %}
{% when 2 %} {% assign cellText = "title2" %}
{% endcase %}
{% when 2 %}
{% assign cellClass = "row-cell" %}
{% case column %}
{% when 1 %} {% assign cellText = "1 x 1" %}
{% when 2 %} {% assign cellText = "2 x 2" %}
{% endcase %}
{% when 3 %}
{% case column %}
{% when 1 %} {% assign cellText = "3 x 3" %}
{% when 2 %} {% assign cellText = "4 x 4" %}
{% endcase %}
{% when 4 %}
{% case column %}
{% when 1 %} {% assign cellText = "5 x 5" %}
{% when 2 %} {% assign cellText = "6 x 6" %}
{% endcase %}
{% when 5 %}
{% case column %}
{% when 1 %} {% assign cellText = "7 x 7" %}
{% when 2 %} {% assign cellText = "8 x 8" %}
{% endcase %}
{% when 6 %}
{% case column %}
{% when 1 %} {% assign cellText = "9 x 9" %}
{% when 2 %} {% assign cellText = "10 x 10" %}
{% endcase %}
{% when 7 %}
{% case column %}
{% when 1 %} {% assign cellText = "11 x 11" %}
{% when 2 %} {% assign cellText = "12 x 12" %}
{% endcase %}
{% when 8 %}
{% case column %}
{% when 1 %} {% assign cellText = "13 x 13" %}
{% when 2 %} {% assign cellText = "14 x 14" %}
{% endcase %}
{% else %}
{% assign cellText = "Cell" %}
{% endcase %}
{% assign alignment = table_settings.pc_alignment | default: "center" %}
{% if section.is_mobile %}
{% assign alignment = table_settings.mobile_alignment | default: "center" %}
{% endif %}
{% assign cellBorderStyle = table_settings.cell_border_style | default: "all_edges" %}
{% case cellBorderStyle %}
{% when 'all_edges' %}
{% assign cellBorderStyleValue = 'border: 1px solid #373737;' %}
{% when 'outer_edges' %}
{% if row == 1 %}
{% assign cellBorderStyleValue = 'border-top: 1px solid #373737;' %}
{% elsif row == table_settings.rows %}
{% assign cellBorderStyleValue = 'border-bottom: 1px solid #373737;' %}
{% else %}
{% assign cellBorderStyleValue = '' %}
{% endif %}
{% if column == 1 %}
{% assign cellBorderStyleValue = cellBorderStyleValue | append: 'border-left: 1px solid #373737;' %}
{% elsif column == table_settings.columns %}
{% assign cellBorderStyleValue = cellBorderStyleValue | append: 'border-right: 1px solid #373737;' %}
{% endif %}
{% when 'inner_edges' %}
{% if row != 1 and row != table_settings.rows %}
{% assign cellBorderStyleValue = 'border-top: 1px solid #373737; border-bottom: 1px solid #373737;' %}
{% else %}
{% assign cellBorderStyleValue = '' %}
{% endif %}
{% if column != 1 and column != table_settings.columns %}
{% assign cellBorderStyleValue = cellBorderStyleValue | append: 'border-left: 1px solid #373737; border-right: 1px solid #373737;' %}
{% endif %}
{% if table_settings.columns == 2 and column == 1 %}
{% assign cellBorderStyleValue = cellBorderStyleValue | append: 'border-right: 1px solid #373737;' %}
{% endif %}
{% else %}
{% assign cellBorderStyleValue = '' %}
{% endcase %}
{% endfor %}
{% endfor %}
| <br> {{ cellText }}<br> |
| - |
2- Edit the default values (customize it):
2.1- edit the number of rows and the number of columns:
2.2- edit cell titles and text:
Remember that if you add one more column (for example) you will have to add {% when 3 %} for titles and texts.
For example: {% when 3 %} {% assign cellText = “title3” %}
2.3- border styles as well as color (color on line 3):
{% assign cellBorderStyleValue = 'border-color: #373737' %}
2.4- edit the centering of the text (center, left, right, justify):
{% assign alignment = table_settings.pc_alignment | default: "center" %}
{% if section.is_mobile %}
{% assign alignment = table_settings.mobile_alignment | default: "center" %}
{% endif %}
2.5- Padding ‘px’:
padding: {{ table_settings.cell_padding | default: '10px' }};
3- Save the document and render the code wherever you want.
{% render 'customizable-table' %}
Don’t hesitate to ask me anything!
This is amazing. Thank you. I’m using the broadcast theme and I cannot believe something like this is not already built in. So thank you very much.
One thing that I would like to do is to change the border color though.
*2.3- border styles as well as color (color on line 3)
Change the border color:
#373737
Change this color to whatever you want. I leave you a very practical page to obtain the hexadecimal color code: Online Color Converter(RGB to HEX / HEX to RGB) | PEKO STEP (peko-step.com)
Instead of a hexadecimal code you can use the common/default colors:
Dark Variations:
Light Variations:
I hope this information has been helpful!
Thanks. I see this is to customize in snipped. I’m using your table as a section which is great as you can customize it in real time in the theme editor. I don’t know if it’s possible to add the option to change color to this as well.
Customizable Table 2.0 (.liquid)
I’ve updated and optimized all the code. This is a new version that addresses certain issues, such as alignment on non-PC devices. The option to change the table border color in real-time has been added from the customizer.
{% assign table_settings = section.settings %}
{% 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 cellBorderStyle = table_settings.cell_border_style %}
{% case cellBorderStyle %}
{% when 'all_borders' %}
{% assign cellBorderStyleValue = 'border: 1px solid;' %}
{% when 'outer_borders' %}
{% if row == 1 %}
{% assign cellBorderStyleValue = 'border-top: 1px solid;' %}
{% elsif row == table_settings.rows %}
{% assign cellBorderStyleValue = 'border-bottom: 1px solid;' %}
{% else %}
{% assign cellBorderStyleValue = '' %}
{% endif %}
{% if column == 1 %}
{% assign cellBorderStyleValue = cellBorderStyleValue | append: 'border-left: 1px solid;' %}
{% elsif column == table_settings.columns %}
{% assign cellBorderStyleValue = cellBorderStyleValue | append: 'border-right: 1px solid;' %}
{% endif %}
{% when 'inner_borders' %}
{% if row != 1 and row != table_settings.rows %}
{% assign cellBorderStyleValue = 'border-top: 1px solid; border-bottom: 1px solid;' %}
{% else %}
{% assign cellBorderStyleValue = '' %}
{% endif %}
{% if column != 1 and column != table_settings.columns %}
{% assign cellBorderStyleValue = cellBorderStyleValue | append: 'border-left: 1px solid; border-right: 1px solid;' %}
{% endif %}
{% if table_settings.columns == 2 and column == 1 %}
{% assign cellBorderStyleValue = cellBorderStyleValue | append: 'border-right: 1px solid;' %}
{% 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": "color",
"id": "table_border_color",
"label": "Border Color",
"default": "#000000"
},
{
"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 %}
Hope it helps!
Amazing thanks. I’ve actually added a few more cells and It seems to be working fine.
{% assign table_settings = section.settings %}
{% 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 cellBorderStyle = table_settings.cell_border_style %}
{% case cellBorderStyle %}
{% when 'all_borders' %}
{% assign cellBorderStyleValue = 'border: 1px solid;' %}
{% when 'outer_borders' %}
{% if row == 1 %}
{% assign cellBorderStyleValue = 'border-top: 1px solid;' %}
{% elsif row == table_settings.rows %}
{% assign cellBorderStyleValue = 'border-bottom: 1px solid;' %}
{% else %}
{% assign cellBorderStyleValue = '' %}
{% endif %}
{% if column == 1 %}
{% assign cellBorderStyleValue = cellBorderStyleValue | append: 'border-left: 1px solid;' %}
{% elsif column == table_settings.columns %}
{% assign cellBorderStyleValue = cellBorderStyleValue | append: 'border-right: 1px solid;' %}
{% endif %}
{% when 'inner_borders' %}
{% if row != 1 and row != table_settings.rows %}
{% assign cellBorderStyleValue = 'border-top: 1px solid; border-bottom: 1px solid;' %}
{% else %}
{% assign cellBorderStyleValue = '' %}
{% endif %}
{% if column != 1 and column != table_settings.columns %}
{% assign cellBorderStyleValue = cellBorderStyleValue | append: 'border-left: 1px solid; border-right: 1px solid;' %}
{% endif %}
{% if table_settings.columns == 2 and column == 1 %}
{% assign cellBorderStyleValue = cellBorderStyleValue | append: 'border-right: 1px solid;' %}
{% 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": 25,
"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": "color",
"id": "table_border_color",
"label": "Border Color",
"default": "#000000"
},
{
"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"
},
{
"type": "text",
"id": "cell_text_13_1",
"label": "Cell Text (13, 1)",
"default": "Cell 37"
},
{
"type": "text",
"id": "cell_text_13_2",
"label": "Cell Text (13, 2)",
"default": "Cell 38"
},
{
"type": "text",
"id": "cell_text_13_3",
"label": "Cell Text (13, 3)",
"default": "Cell 39"
},
{
"type": "text",
"id": "cell_text_14_1",
"label": "Cell Text (14, 1)",
"default": "Cell 40"
},
{
"type": "text",
"id": "cell_text_14_2",
"label": "Cell Text (14, 2)",
"default": "Cell 41"
},
{
"type": "text",
"id": "cell_text_14_3",
"label": "Cell Text (14, 3)",
"default": "Cell 42"
},
{
"type": "text",
"id": "cell_text_15_1",
"label": "Cell Text (15, 1)",
"default": "Cell 43"
},
{
"type": "text",
"id": "cell_text_15_2",
"label": "Cell Text (15, 2)",
"default": "Cell 44"
},
{
"type": "text",
"id": "cell_text_15_3",
"label": "Cell Text (15, 3)",
"default": "Cell 45"
},
{
"type": "text",
"id": "cell_text_16_1",
"label": "Cell Text (16, 1)",
"default": "Cell 46"
},
{
"type": "text",
"id": "cell_text_16_2",
"label": "Cell Text (16, 2)",
"default": "Cell 47"
},
{
"type": "text",
"id": "cell_text_17_1",
"label": "Cell Text (17, 1)",
"default": "Cell 48"
},
{
"type": "text",
"id": "cell_text_17_2",
"label": "Cell Text (17, 2)",
"default": "Cell 49"
},
{
"type": "text",
"id": "cell_text_18_1",
"label": "Cell Text (18, 1)",
"default": "Cell 50"
},
{
"type": "text",
"id": "cell_text_18_2",
"label": "Cell Text (18, 2)",
"default": "Cell 51"
},
{
"type": "text",
"id": "cell_text_19_1",
"label": "Cell Text (19, 1)",
"default": "Cell 52"
},
{
"type": "text",
"id": "cell_text_19_2",
"label": "Cell Text (19, 2)",
"default": "Cell 53"
},
{
"type": "text",
"id": "cell_text_20_1",
"label": "Cell Text (20, 1)",
"default": "Cell 54"
},
{
"type": "text",
"id": "cell_text_20_2",
"label": "Cell Text (20, 2)",
"default": "Cell 55"
},
{
"type": "text",
"id": "cell_text_21_1",
"label": "Cell Text (21, 1)",
"default": "Cell 56"
},
{
"type": "text",
"id": "cell_text_21_2",
"label": "Cell Text (21, 2)",
"default": "Cell 57"
},
{
"type": "text",
"id": "cell_text_22_1",
"label": "Cell Text (22, 1)",
"default": "Cell 58"
},
{
"type": "text",
"id": "cell_text_22_2",
"label": "Cell Text (22, 2)",
"default": "Cell 59"
},
{
"type": "text",
"id": "cell_text_23_1",
"label": "Cell Text (23, 1)",
"default": "Cell 60"
},
{
"type": "text",
"id": "cell_text_23_2",
"label": "Cell Text (23, 2)",
"default": "Cell 61"
},
{
"type": "text",
"id": "cell_text_24_1",
"label": "Cell Text (24, 1)",
"default": "Cell 62"
},
{
"type": "text",
"id": "cell_text_24_2",
"label": "Cell Text (24, 2)",
"default": "Cell 63"
},
{
"type": "text",
"id": "cell_text_25_1",
"label": "Cell Text (25, 1)",
"default": "Cell 64"
},
{
"type": "text",
"id": "cell_text_25_2",
"label": "Cell Text (25, 2)",
"default": "Cell 65"
}
],
"presets": [
{
"name": "Customizable Table",
"category": "Presets"
}
]
}
{% endschema %}
Right now I’m trying and failing to add a bold toggle to cells 1, 2, and 3. I’m very new to this, only been playing around with code for the past few weeks.
{% 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 boldToggleId = "bold_toggle_" | append: row | append: "_" | append: column -%}
{%- assign boldToggle = section.settings[boldToggleId] == true -%}
{%- if boldToggle -%}
{%- assign cellText = '**' | append: cellText | append: '**' -%}
{%- endif -%}
{%- 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": [
// ... (existing settings)
{
"type": "toggle",
"id": "bold_toggle_1_1",
"label": "Bold Text (1, 1)",
"default": false
},
{
"type": "toggle",
"id": "bold_toggle_1_2",
"label": "Bold Text (1, 2)",
"default": false
},
{
"type": "toggle",
"id": "bold_toggle_1_3",
"label": "Bold Text (1, 3)",
"default": false
},
// ... (add similar toggle settings for other cells)
],
"presets": [
{
"name": "Customizable Table",
"category": "Presets"
}
]
}
{% endschema %}
{
"type": "toggle",
"id": "bold_toggle_1_1",
"label": "Bold Text (1, 1)"
},
{
"type": "toggle",
"id": "bold_toggle_1_2",
"label": "Bold Text (1, 2)"
},
{
"type": "toggle",
"id": "bold_toggle_1_3",
"label": "Bold Text (1, 3)"
}
You should do something different; that’s incorrect.
Add the following code right at line 50 (inside the Customizable Table 2.0):
{% assign specialIds = "cell_text_1_2,cell_text_2_3" | split: "," %}
{% if specialIds contains cellTextId %}
{% assign cellBorderStyleValue = cellBorderStyleValue | append: 'font-weight: bold;' %}
{% endif %}
The code will look something like this:
Replace these cells with the ones you want: cell_text_1_2,cell_text_2_3
Remember: cell_text_“row number”_“column number”.
Result:
Thank you Spac.
So I actually managed to make the text permanently bold like you did in the code. I then went on to try and add a toggle so you can do it live on the theme editor, and that’s where I got stuck 
Editing the CSS of a specific cell individually from the real-time customizer? You could do it, but honestly, it’s a bit tricky, hahaha. The option I gave you is the simplest, even if you have to dig into the code and edit it manually, I think it’s worth it. Glad it worked for you!
i want increase column to be 10
Hello Space-Es
Nevermind my previous messages, it WORKED Thank you so much! I’ve made a donation
Thanks so much for providing this solution. I’ve given it a try and it worked for a standard page which is great but I can’t see it as a section on the product page. Is there a way you manipulate what sections are allowed on the product page? I’m guessing the template I am using (Combine) has restricted this.
I’ve attached screenshots below. Hoping you can give a bit more direction and always happy to make a donation
