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>
Save time & money ,Ask Questions The Smart Way
Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Buy Paul a ☕ Coffee for more answers or donate to eff.org
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024