How do you add a strikethrough button to text and textarea editor fields?
Sorry if this is basic - I mean, strikethrough is almost as common as bold for e-commerce!
Have been through the Shopify theme docs (see above), searched stack overflow, Shopify community, Dawn theme GitHub issues and Google but all I found were lots of merchants asking for it.
Any help much appreciated.
In the end, the best way I found was to create a snippet to translate characters that aren't stripped out by Shopify, then convert them to <small> or <s>
Using the below, merchants and content editors can enter ~~small~~ and ~~s~~ which the snippet converts to HTML tags.
Incase it helps someone, this was the snippet I used and named it /snippets/hotel-rte-macros.liquid
{%- comment -%}
Add small and strikethrough text to Shopify rich text editors by using
the double tild ~~ handle instead of html elements, which get stripped by Shopify
For example, use this for strikethrough...
~~s~~...~~s~~ will output as <s>...</s>
And this for small...
~~small~~...~~small~~ will output as <small>...</small>
Use this call instead of the standard call in liquid templates...
{% render 'hotel-rte-macros', html: block.settings.content %}
Notes:
- Leaves a final unmatched marker literal.
- Do not pipe through | escape.
{%- endcomment -%}
{%- assign _raw = html -%}
{%- assign _tmp = _raw -%}
{%- assign _parts = _tmp | split: '~~small~~' -%}
{%- if _parts.size > 1 -%}
{%- assign _last = _parts.size | minus: 1 -%}
{%- assign _markers = _last -%}
{%- assign _odd_markers = _markers | modulo: 2 -%}
{%- capture _out -%}
{{- _parts[0] -}}
{%- for i in (1.._last) -%}
{%- assign _is_odd = i | modulo: 2 -%}
{%- if _is_odd == 1 -%}
{%- if _odd_markers == 1 and i == _last -%}
~~small~~{{- _parts[i] -}}
{%- else -%}
<small>{{- _parts[i] -}}</small>
{%- endif -%}
{%- else -%}
{{- _parts[i] -}}
{%- endif -%}
{%- endfor -%}
{%- endcapture -%}
{%- assign _tmp = _out -%}
{%- endif -%}
{%- assign _parts = _tmp | split: '~~s~~' -%}
{%- if _parts.size > 1 -%}
{%- assign _last = _parts.size | minus: 1 -%}
{%- assign _markers = _last -%}
{%- assign _odd_markers = _markers | modulo: 2 -%}
{%- capture _out -%}
{{- _parts[0] -}}
{%- for i in (1.._last) -%}
{%- assign _is_odd = i | modulo: 2 -%}
{%- if _is_odd == 1 -%}
{%- if _odd_markers == 1 and i == _last -%}
~~s~~{{- _parts[i] -}}
{%- else -%}
<s>{{- _parts[i] -}}</s>
{%- endif -%}
{%- else -%}
{{- _parts[i] -}}
{%- endif -%}
{%- endfor -%}
{%- endcapture -%}
{%- assign _tmp = _out -%}
{%- endif -%}
{{- _tmp -}}
Then called it on the collapsable (accordions) for products in Dawn - so replaced the collapsable switch statement within /sections/main-product.liquid with this...
{%- when 'collapsible_tab' -%}
{%- assign open_attr = '' -%}
{%- unless first_collapsible_opened -%}
{%- assign open_attr = ' open' -%}
{%- assign first_collapsible_opened = true -%}
{%- endunless -%}
<div class="product__accordion accordion quick-add-hidden" {{ block.shopify_attributes }}>
<details id="Details-{{ block.id }}-{{ section.id }}"{{ open_attr }}>
<summary>
<div class="summary__title">
{% render 'icon-accordion', icon: block.settings.icon %}
<h2 class="h4 accordion__title inline-richtext">
{{ block.settings.heading | default: block.settings.page.title | escape }}
</h2>
</div>
{{- 'icon-caret.svg' | inline_asset_content -}}
</summary>
<div class="accordion__content rte" id="ProductAccordion-{{ block.id }}-{{ section.id }}">
{% if block.settings.content %}
{% render 'hotel-rte-macros', html: block.settings.content %}
{% endif %}
{% if block.settings.page and block.settings.page.content %}
{% render 'hotel-rte-macros', html: block.settings.page.content %}
{% endif %}
</div>
</details>
</div>
I'm new to liquid and programming so had AI help (which I'm assuming could be optimised) but so far, it works great.
If anyone has a better way of allowing merchants to use <small> <s> in Shopify Dawn's text fields, then let me know. It's crazy we have to resort to the above just to get two of the most common text styling elements needed for ecommerce, on a dedicated ecommerce platform like Shopify.