I’m looking to add a simple customisable table, I’ve screenshotted the idea below. I want to add it as a section so I can add/remove to pages where needed. Please advise.
Topic summary
A user seeks to add a customizable table section to their Dawn theme for flexible page placement. An initial solution provides code for a basic 4-column table with customizable headers, row colors (even/odd), and text colors.
Key developments:
- Mobile responsiveness added via CSS creating horizontal scroll on smaller screens
- Request for rounded corners remains unaddressed
- User later needs to expand beyond 4 columns and implement column-based (not row-based) coloring
- Alternative solution provided: a “Multiple column custom” section using Dawn’s multicolumn structure with numbered blocks and per-column background/border customization
New direction:
Another user (KD1711) requests filtering/sorting functionality similar to a product list view. After clarifying they use Dawn 15.2.0, they receive code modifications for main-collection-product-grid.liquid and facets.liquid to enable filtered product lists.
Current status:
KD1711 reveals their “products” are actually blog posts (used as B2B product info pages until e-commerce launches). They need the table to link to blog posts instead of products, with clickable rows/first columns. This requirement remains unresolved.
Hi @meepmediauk
May I suggest to update code these steps:
- Go to Store Online-> theme → edit code
- Sections/Add a new section
- Add code below to end of file
{% if section.settings.th1 != blank or section.settings.th2 != blank or section.settings.th3 != blank or section.settings.th4 != blank %}
{% endif %}
{% schema %}
{
"name": "Table",
"settings": [
{
"type": "text",
"id": "th1",
"label": "TH1"
},
{
"type": "text",
"id": "th2",
"label": "TH2"
},
{
"type": "text",
"id": "th3",
"label": "TH3"
},
{
"type": "text",
"id": "th4",
"label": "TH4"
},
{
"type": "color",
"id": "color_th",
"label": "TH color"
},
{
"type": "color",
"id": "color_th_text",
"label": "TH text color"
},
{
"type": "color",
"id": "color_even",
"label": "even Row color"
},
{
"type": "color",
"id": "color_even_text",
"label": "even Row text color"
},
{
"type": "color",
"id": "color_odd",
"label": "odd Row color"
},
{
"type": "color",
"id": "color_odd_text",
"label": "odd Row text color"
}
],
"blocks": [
{
"type": "rows",
"name": "Row",
"settings": [
{
"type": "text",
"id": "col1",
"label": "Col 1"
},
{
"type": "text",
"id": "col2",
"label": "Col 2"
},
{
"type": "text",
"id": "col3",
"label": "Col 3"
},
{
"type": "text",
"id": "col4",
"label": "Col 4"
}
]
}
],
"presets": [
{
"name": "Table",
"blocks": [
]
}
]
}
{% endschema %}
1 Like
Great, thank you!
Currently, it’s not mobile responsive, can you help with that? Also how can I make it have curved edges?
Thanks 
Hi,
You can find tag in code that we provided above then after add code below to create a scroll for table on mobile.
@media(max-width: 749px){
.table-{{ section.id }}{
padding: 0;
margin: 40px auto;
overflow-x: auto;
}
.table-{{ section.id }} table {
width: auto;
}
}
Great, thank you. How can I add rounded corners to the tables?
Hello - I need to add more columns, so far it’s only 4, how can I do this please? I also need to know how to do a colour per column (rather than per row) Need to know ASAP Thank you! See attached
Hi,
Could you share code of this section? I will help to check it for you
I don’t have any code yet, I just need to create something like the attached.
Hi,
May I suggest to update code these steps:
-
Go to Store Online-> theme → edit code
-
Add sections/multicolum-custom.liquid
- Copy code below then paste to file
{{ 'section-multicolumn.css' | asset_url | stylesheet_tag }}
{{ 'component-slider.css' | asset_url | stylesheet_tag }}
{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
.multicolumn-card__info .number {
border-radius: 100%;
width: 30px;
height: 30px;
line-height: 30px;
display: block;
margin: 0 auto;
text-align: center;
}
.section-{{ section.id }}-padding .grid{
column-gap:0;
}
{%- endstyle -%}
{%- liquid
assign columns_mobile_int = section.settings.columns_mobile | plus: 0
assign show_mobile_slider = false
if section.settings.swipe_on_mobile and section.blocks.size > columns_mobile_int
assign show_mobile_slider = true
endif
-%}
{%- unless section.settings.title == blank -%}
##
{{ section.settings.title }}
{%- if section.settings.button_label != blank and show_mobile_slider -%}
{{- section.settings.button_label | escape -}}
{%- endif -%}
{%- endunless -%}
{%- if section.settings.button_label != blank -%}
{{ section.settings.button_label | escape }}
{%- endif -%}
{% schema %}
{
"name": "Multiple colum custom",
"class": "section",
"tag": "section",
"disabled_on": {
"groups": ["header", "footer"]
},
"settings": [
{
"type": "inline_richtext",
"id": "title",
"default": "Multicolumn",
"label": "t:sections.multicolumn.settings.title.label"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h2",
"label": "t:sections.all.heading_size.options__1.label"
},
{
"value": "h1",
"label": "t:sections.all.heading_size.options__2.label"
},
{
"value": "h0",
"label": "t:sections.all.heading_size.options__3.label"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
},
{
"type": "select",
"id": "image_width",
"options": [
{
"value": "third",
"label": "t:sections.multicolumn.settings.image_width.options__1.label"
},
{
"value": "half",
"label": "t:sections.multicolumn.settings.image_width.options__2.label"
},
{
"value": "full",
"label": "t:sections.multicolumn.settings.image_width.options__3.label"
}
],
"default": "full",
"label": "t:sections.multicolumn.settings.image_width.label"
},
{
"type": "select",
"id": "image_ratio",
"options": [
{
"value": "adapt",
"label": "t:sections.multicolumn.settings.image_ratio.options__1.label"
},
{
"value": "portrait",
"label": "t:sections.multicolumn.settings.image_ratio.options__2.label"
},
{
"value": "square",
"label": "t:sections.multicolumn.settings.image_ratio.options__3.label"
},
{
"value": "circle",
"label": "t:sections.multicolumn.settings.image_ratio.options__4.label"
}
],
"default": "adapt",
"label": "t:sections.multicolumn.settings.image_ratio.label"
},
{
"type": "range",
"id": "columns_desktop",
"min": 1,
"max": 6,
"step": 1,
"default": 3,
"label": "t:sections.multicolumn.settings.columns_desktop.label"
},
{
"type": "select",
"id": "column_alignment",
"options": [
{
"value": "left",
"label": "t:sections.multicolumn.settings.column_alignment.options__1.label"
},
{
"value": "center",
"label": "t:sections.multicolumn.settings.column_alignment.options__2.label"
}
],
"default": "left",
"label": "t:sections.multicolumn.settings.column_alignment.label"
},
{
"type": "select",
"id": "background_style",
"options": [
{
"value": "none",
"label": "t:sections.multicolumn.settings.background_style.options__1.label"
},
{
"value": "primary",
"label": "t:sections.multicolumn.settings.background_style.options__2.label"
}
],
"default": "primary",
"label": "t:sections.multicolumn.settings.background_style.label"
},
{
"type": "text",
"id": "button_label",
"default": "Button label",
"label": "t:sections.multicolumn.settings.button_label.label"
},
{
"type": "url",
"id": "button_link",
"label": "t:sections.multicolumn.settings.button_link.label"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"default": "scheme-1"
},
{
"type": "header",
"content": "t:sections.multicolumn.settings.header_mobile.content"
},
{
"type": "select",
"id": "columns_mobile",
"options": [
{
"value": "1",
"label": "t:sections.multicolumn.settings.columns_mobile.options__1.label"
},
{
"value": "2",
"label": "t:sections.multicolumn.settings.columns_mobile.options__2.label"
}
],
"default": "1",
"label": "t:sections.multicolumn.settings.columns_mobile.label"
},
{
"type": "checkbox",
"id": "swipe_on_mobile",
"default": false,
"label": "t:sections.multicolumn.settings.swipe_on_mobile.label"
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 36
}
],
"blocks": [
{
"type": "column",
"name": "t:sections.multicolumn.blocks.column.name",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "t:sections.multicolumn.blocks.column.settings.image.label"
},
{
"type": "inline_richtext",
"id": "title",
"default": "Column",
"label": "t:sections.multicolumn.blocks.column.settings.title.label"
},
{
"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.multicolumn.blocks.column.settings.text.label"
},
{
"type": "text",
"id": "link_label",
"label": "t:sections.multicolumn.blocks.column.settings.link_label.label"
},
{
"type": "url",
"id": "link",
"label": "t:sections.multicolumn.blocks.column.settings.link.label"
},
{
"type": "checkbox",
"id": "show_number",
"default": true,
"label": "Show number"
},
{
"type": "color",
"id": "background",
"label": "Background"
},
{
"type": "color",
"id": "color_number",
"label": "Color Number"
},
{
"type": "color",
"id": "background_number",
"label": "Background Number"
},
{
"type": "color",
"id": "border_color",
"label": "Border color"
}
]
}
],
"presets": [
{
"name": "Multiple colum custom",
"blocks": [
{
"type": "column"
},
{
"type": "column"
},
{
"type": "column"
},
{
"type": "column"
}
]
}
]
}
{% endschema %}
-
Go to Store Online-> theme → Customize
-
Add “Multiple column custom” section
- Add block and settings
Wow, it really works. Can you help me to have custom filter and sorting of this table items/colums
I would like to have page section similar to this table(list) n filtering, as in the following page;
Hi @KD1711 ,
Do you mean that you would like to show list products the same as the screenshot below?
Hi,
Which theme are you using?
I am using the DAWN theme (version 15.2.0)
Hi @KD1711 ,
May I suggest to update code these steps:
- Go to Store Online-> theme → edit code
- Sections/main-collection-product-grid.liquid then replace by code here https://github.com/eboost10/2640367/blob/main/2936828/sections/main-collection-product-grid.liquid
- snippets/facets.liquid then replace by code here https://github.com/eboost10/2640367/blob/main/2936828/snippets/facets.liquid
This solution worked, but the products in my list are actually blog post(used as product info page/card for B2B enquiries), like the below sample
https://liteekaherbals.myshopify.com/blogs/herbal-extracts/akarkara-anacyclus-pyrethrum
so my list wont have products but it will have this list with clickable links to the blog posts(i am using blog post as product page, for this case, because there will be e-commerce products launched/displayed in near future
Also if we can make the col1 or entire row clickable, would be great