Notes

{{ 'section-comparison-table.css' | asset_url | stylesheet_tag }}
{{ 'component-rte.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;
}
}
{%- endstyle -%}

<div class="color-{{ section.settings.color_scheme }}">
<div class="page-width section-{{ section.id }}-padding">
<div class="content-and-comparison-table{% if section.settings.layout == 'table_first' %} content-and-comparison-table--table-first{% endif %}{% if section.settings.title == blank and section.settings.text == blank %} content-and-comparison-table--no-content{% endif %}">
{%- unless section.settings.title == blank and section.settings.text == blank -%}
<div class="content-container center">
{%- unless section.settings.title == blank -%}
<h2 class="title {{ section.settings.heading_size }}">
{{ section.settings.title | escape }}
</h2>
{%- endunless -%}
{%- unless section.settings.text == blank -%}
{{ section.settings.text }}
{%- endunless -%}
{%- if section.settings.button_label != blank -%}
<a
{% if section.settings.link %}
href="{{ section.settings.link }}"
{% else %}
role="link" aria-disabled="true"
{% endif %}
class="button mb-1em {% if section.settings.button_style_secondary %}button--secondary{% else %}button--primary{% endif %}"
>
{{- section.settings.button_label | escape -}}
</a>
{%- endif -%}
</div>
{%- endunless -%}
<div class="comparison-table-container">
<table class="comparison-table">
<thead>
<tr>
<th>&nbsp</th>
<th align="center" class="comparison-table__logo">
{%- if section.settings.logo != blank -%}
{%- assign logo_width = section.settings.logo_width -%}
{%- assign logo_height = logo_width | divided_by: section.settings.logo.aspect_ratio -%}
{{
section.settings.logo
| image_url: width: 200
| image_tag:
widths: '50, 100, 150, 200, 250, 300, 400, 500',
width: logo_width,
height: logo_height,
alt: shop.name
}}
{%- else -%}
<span class="comparison-table__brand-name">
{% if section.settings.us_label == blank %}
{{ shop.name }}
{% else %}
{{ section.settings.us_label }}
{% endif %}
</span>
{%- endif -%}
</th>
<th class="comparison-table__others" align="center">{{ section.settings.others_label }}</th>
</tr>
</thead>
<tbody>
{%- for block in section.blocks -%}
<tr>
<td align="center" class="comparison-table__row-name color-{{ section.settings.benefit_color_scheme }}">
<h3>{{ block.settings.benefit }}</h3>
</td>
<td align="center" class="color-{{ section.settings.icon_cells_color_scheme }}">
{%- if block.settings.us -%}
<svg
class="comparison-table__checkmark"
id="Layer_3"
data-name="Layer 3"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 25.45 25.43"
>
<defs><style>.cls-1{fill:{{ section.settings.checkmark_color }};}</style></defs><polygon class="cls-1" points="25.45 0 24.06 0 9.5 15.27 2.12 10.24 0 12.55 9.28 25.43 25.45 2.48 25.45 0"/>
</svg>
{%- else -%}
<div class="comparison-table__x"><span></span><span></span></div>
{%- endif -%}
</td>
<td align="center" class="color-{{ section.settings.icon_cells_color_scheme }}">
{%- if block.settings.others -%}
<svg
class="comparison-table__checkmark"
id="Layer_3"
data-name="Layer 3"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 25.45 25.43"
>
<defs><style>.cls-1{fill:{{ section.settings.checkmark_color }};}</style></defs><polygon class="cls-1" points="25.45 0 24.06 0 9.5 15.27 2.12 10.24 0 12.55 9.28 25.43 25.45 2.48 25.45 0"/>
</svg>
{%- else -%}
<div class="comparison-table__x"><span></span><span></span></div>
{%- endif -%}
</td>
</tr>
{%- endfor -%}
</tbody>
</table>
</div>
</div>
</div>
</div>

{% schema %}
{
"name": "Comparison table",
"settings": [
{
"type": "text",
"id": "title",
"default": "Comparison table",
"label": "Heading"
},
{
"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": "richtext",
"id": "text",
"default": "<p>Talk about how and why is your brand better than the others.</p>",
"label": "Text"
},
{
"type": "text",
"id": "button_label",
"label": "t:sections.slideshow.blocks.slide.settings.button_label.label",
"info": "t:sections.slideshow.blocks.slide.settings.button_label.info"
},
{
"type": "url",
"id": "link",
"label": "t:sections.slideshow.blocks.slide.settings.link.label"
},
{
"type": "checkbox",
"id": "button_style_secondary",
"label": "t:sections.slideshow.blocks.slide.settings.secondary_style.label",
"default": false
},
{
"type": "select",
"id": "layout",
"options": [
{
"value": "table_first",
"label": "Table first"
},
{
"value": "table_second",
"label": "Table second"
}
],
"default": "table_second",
"label": "Desktop table placement"
},
{
"type": "select",
"id": "color_scheme",
"options": [
{
"value": "accent-1",
"label": "t:sections.all.colors.accent_1.label"
},
{
"value": "accent-2",
"label": "t:sections.all.colors.accent_2.label"
},
{
"value": "background-1",
"label": "t:sections.all.colors.background_1.label"
},
{
"value": "background-2",
"label": "t:sections.all.colors.background_2.label"
},
{
"value": "inverse",
"label": "t:sections.all.colors.inverse.label"
}
],
"default": "background-1",
"label": "t:sections.all.colors.label"
},
{
"type": "header",
"content": "Table"
},
{
"type": "image_picker",
"id": "logo",
"label": "Logo"
},
{
"type": "range",
"id": "logo_width",
"min": 25,
"max": 125,
"step": 5,
"unit": "px",
"label": "Logo width",
"default": 75
},
{
"type": "text",
"id": "us_label",
"label": "Us custom label"
},
{
"type": "text",
"id": "others_label",
"label": "Competitors label",
"default": "OTHERS"
},
{
"type": "select",
"id": "benefit_color_scheme",
"options": [
{
"value": "accent-1",
"label": "t:sections.all.colors.accent_1.label"
},
{
"value": "accent-2",
"label": "t:sections.all.colors.accent_2.label"
},
{
"value": "background-1",
"label": "t:sections.all.colors.background_1.label"
},
{
"value": "background-2",
"label": "t:sections.all.colors.background_2.label"
},
{
"value": "inverse",
"label": "t:sections.all.colors.inverse.label"
}
],
"default": "accent-1",
"label": "Benefit cells color scheme"
},
{
"type": "color",
"id": "checkmark_color",
"default": "#53AF01",
"label": "Checkmark color"
},
{
"type": "select",
"id": "icon_cells_color_scheme",
"options": [
{
"value": "accent-1",
"label": "t:sections.all.colors.accent_1.label"
},
{
"value": "accent-2",
"label": "t:sections.all.colors.accent_2.label"
},
{
"value": "background-1",
"label": "t:sections.all.colors.background_1.label"
},
{
"value": "background-2",
"label": "t:sections.all.colors.background_2.label"
},
{
"value": "inverse",
"label": "t:sections.all.colors.inverse.label"
}
],
"default": "background-1",
"label": "Icon cells color scheme"
},
{
"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": "row",
"name": "Table row",
"settings": [
{
"type": "text",
"id": "benefit",
"default": "Benefit",
"label": "Benefit"
},
{
"type": "checkbox",
"id": "us",
"default": true,
"label": "Us"
},
{
"type": "checkbox",
"id": "others",
"default": false,
"label": "Others"
}
]
}
],
"presets": [
{
"name": "Comparison table",
"blocks": [
{
"type": "row"
},
{
"type": "row"
},
{
"type": "row"
}
]
}
],
"disabled_on": {
"groups": ["header", "footer"]
}
}
{% endschema %}