Shopify themes, liquid, logos, and UX
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.
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
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>
Contact paull.newton+shopifyforum@gmail.com for the solutions you need
Save time & money ,Ask Questions The Smart Way
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Thank Paul with a ☕ Coffee for more answers or donate to eff.org
June brought summer energy to our community. Members jumped in with solutions, clicked ...
By JasonH Jun 5, 2025Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025