diff --git a/FAQ/sections/faq.liquid b/FAQ/sections/faq.liquid index 1d1ae3e..7ae9e56 100644 --- a/FAQ/sections/faq.liquid +++ b/FAQ/sections/faq.liquid @@ -1,3 +1,9 @@ +{%- comment -%} +Section published at https://sections.design/blogs/shopify/faq-rich-snippets-section +Get the latest version: https://github.com/mirceapiturca/Sections/tree/master/FAQ +{%- endcomment -%} + + {%- comment -%} ---------------- THE CSS ---------------- {%- endcomment -%} {%- assign id = '#shopify-section-' | append: section.id -%} @@ -30,12 +36,24 @@ .overflow-hidden { overflow: hidden } .cursor-pointer { cursor: pointer } - .faq-title { + {{ id }} .faq-container { + max-width: {{ section.settings.max_width }}; + margin: {{ section.settings.margin_top }}rem auto {{ section.settings.margin_bottom }}rem + } + + {{ id }} .faq-title { border-bottom: 1px solid var(--border-color); font-size: var(--title-font-size); color: var(--question-color); } + {{ id }} .faq-panel { + will-change: height; + border-bottom: 1px solid var(--border-color); + background-color: var(--panel-bg); + color: var(--answer-color); + } + .faq-button { font: inherit; background: transparent; @@ -58,13 +76,6 @@ transform: rotate(90deg); } - .faq-panel { - will-change: height; - border-bottom: 1px solid var(--border-color); - background-color: var(--panel-bg); - color: var(--answer-color); - } - .faq-panel * { color: inherit; } @@ -78,6 +89,7 @@ {%- comment -%} ---------------- THE MARKUP ---------------- {%- endcomment -%} +
{%- for block in section.blocks -%} {%- if block.settings.title != blank and block.settings.content != blank -%} @@ -105,10 +117,12 @@ {%- endif -%} {%- endfor -%} +
{%- comment -%} -------------- THE RICH SCHEMA ------------- {%- endcomment -%} +{%- if section.settings.enable_rich_schema -%} +{%- endif -%} {%- comment -%} ---------------- THE CONFIG ---------------- {%- endcomment -%} @@ -150,6 +165,46 @@ "tag": "article", "settings": [ + { + "type": "header", + "content": "Rich schema" + }, + { + "type": "checkbox", + "id": "enable_rich_schema", + "default": true, + "label": "Enable FAQ rich schema?" + }, + { + "type": "header", + "content": "Dimensions" + }, + { + "type": "text", + "id": "max_width", + "label": "Max width", + "default": "64rem" + }, + { + "type": "range", + "id": "margin_top", + "min": 0, + "max": 10, + "step": 0.1, + "unit": "rem", + "label": "Margin top", + "default": 1 + }, + { + "type": "range", + "id": "margin_bottom", + "min": 0, + "max": 10, + "step": 0.1, + "unit": "rem", + "label": "Margin bottom", + "default": 1 + }, { "type": "header", "content": "Colors" @@ -266,7 +321,7 @@ {%- if request.design_mode -%}