Shopify themes, liquid, logos, and UX
To continue receiving payouts, you need to secure your account by turning on two-step authentication. If two-step authentication is not turned on your payouts will be paused. Learn more
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>
User | RANK |
---|---|
116 | |
94 | |
73 | |
72 | |
46 |
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022