Hide text in Shopify product description

Question

Just looking for a bit of guidance with Shopify. What I'm trying to do is wrap text in the product description with [#size] [/size] tags (or similar)... to then grab this text and put it into a pop up.

I've got the most part done so that it creates the pop up button and the pop up works fine, even including the text from the product description, however, the text in the product description stays in there rather than hiding it into the pop-up, and I'm clutching at straws now trying to fix it...

Any ideas would be highly appriciated, thanks in advance.

Here's my code in the product-template.liquid

{% if product.description contains '[#size]' or product.description contains '[#video]' or product.description contains '[#other]' %}
      <div class="product-extra">
        {% if section.settings.show_product_size_chart and product.description contains '[#size]' %}
          {% assign shortcode_description = product.description | split: '[/size]' | first | split: '[#size]' | last %}
            <a class="product-size-chart fancybox" href="#product-size-chart"><i class="fas fa-ruler"></i> {{ 'products.product.sizing' | t }}
              <div id="product-size-chart" style="display: none;">
                {{ shortcode_description }}
              </div>
            </a>
        {% endif %}

        {% if section.settings.show_product_video and product.description contains '[#video]' %}
          {% assign shortcode_description = product.description | split: '[/video]' | first | split: '[#video]' | last %}
          <a class="product-video fancybox" href="#product-video"><i class="fas fa-play-circle"></i> {{ 'products.product.video' | t }}
            <div id="product-video" style="display: none;">
              {{ shortcode_description }}
            </div>
          </a>
        {% endif %}
        {% if section.settings.show_product_model and product.description contains '[#other]' %}
          <a class="product-model fancybox" href="#product-model"><i class="fas fa-info-circle"></i> {{ 'products.product.model' | t }}
            <div id="product-model" style="display: none;">
              {% assign shortcode_description = product.description | split: '[/other]' | first | split: '[#other]' | last %}
              {{ shortcode_description }}
            </div>
          </a>
        {% endif %}
      </div>
    {% endif %}

Answer 1

You can create a snippet for example called shortcode.liquid

In the snippet you put the following code:

{%- capture open_tag -%}[#{{tag}}]{%- endcapture -%}
{%- capture close_tag -%}[/{{tag}}]{%- endcapture -%}

{%- assign text_content = content | split: open_tag | last | split: close_tag | first -%}
{%- capture remove_shortcode -%}{{open_tag}}{{text_content}}{{close_tag}}{%- endcapture -%}

{%- assign new_content = content | remove: remove_shortcode -%}

And you call the snippet this way:

{%- include 'shortcode' content: product.content, tag: 'size' -%}

Where you pass the content ( in this case is the product.content ) and the shortcode that you like to target ( in this case is size )

After you call the snippet you have two variables:

{{text_content}} this will return the content between the shortcode

{{new_content}} - this will return the new content but with the removed shortcode

Important - This snippet will work only for a single instance of the same shortcode, a.k.a you can't have two instances of a size shortcode.