How to add "Read More" Button in Debut Theme.

[HAM3XALIEN]

Hello. Before I begin, thanks for any input in advance.

I was recommded to add a read more button to both my product descripitons since they were a little lengthy. 

I have seen a few older answers to this but am not having any luck and some comments are really vague/unclear.

Please could someone assist me with this - It would be greatly appreciated. 

[PaulNewton]

There's implementation details to this that change per theme and per eachs merchant need.

There's also whether a merchant needs even needs this or they need to improve the product copy.

If a description is so long or boing you think customers wont want to read it organically as part of the page that's the problem and more UI isn't the answer.

Contact me at paull.newton+shopifyforums@gmail.com with this topic url, store url  to get this customization or deeper solutions.

Always backup themes and files before changing code

A quick method is for modern html5 browsers is to use the summary tag in combination with inserting the following html comment tag in your product descriptions rich text editor:

<!-- split -->

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary 

https://help.shopify.com/en/manual/shopify-admin/productivity-tools/rich-text-editor#add-html-conten... 

For debut find the {{ product.description }} output , late 2021 version around line 275 in sections/product-template.liquid

And replace it with the following

{%- if product.description contains "<!-- split -->" -%}
    {%- assign product_description_parts = product.description | split:"<!-- split -->" -%}
    {%- assign product_description_slug = product_description_parts.first -%}
    {%- assign product_description_continued = product_description_parts.last%}

    <details class="description_with_read_more">
        <summary>{{ product_description_slug }}...</summary>
        <span class="product_description_continued">{{ product_description_continued  }}</span>
    </details>
{%- else -%}
    {{- product.description -}}
{%- endif -%}
<style type="text/css">
    summary:after {
        content: "Read More..";
        color: blue;
        display:block;
        text-align: center;
    }
    details.description_with_read_more[open]:after {
        content: "Show Less";
        color: blue;
        display:block;
        text-align: center;
        margin-top: -10px;
    }
    details.description_with_read_more {
        margin-top: 20px;
    }
    summary {
        /*display: inline-block;*/
        position: absolute;
        width: 100%;
        height: 100%;
        top: -23px;
    }
    details.description_with_read_more[open] summary:after { 
        content: ""
    }
    details.description_with_read_more[open] { 
        padding-bottom: 20px;
        position: relative;
    }
    .product_description_continued {
        margin-top: -10px;   
    }
</style>