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.
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 %}
Great, thank you!
Currently, it’s not mobile responsive, can you help with that? Also how can I make it have curved edges?
Thanks 
Great, thank you. How can I add rounded corners to the tables?
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