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
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025