Shopify themes, liquid, logos, and UX
Hi,
I am using the Dawn theme and would like to add a "read more" "read less" button to my collection page descriptions.
Some of my collection descriptions are too long (for SEO purpose) and I need that toggle button to make it more user friendly.
Thanks in advance
Please try this
{{ collection.description }}
With this one
{% if collection.description.size > 700 %}
<div class="product-description-short">
{{ collection.description | truncate: 500, ". . . " }}<a class="readmore" href="#">Show More ></a>
</div>
<div class="product-description-full" style="display:none;">
{{ collection.description }}
<br><a class="readless" href="#">< Show Less</a>
</div>
{% else %}
{{ collection.description }}
{% endif %}
Just before this code
{% endpaginate %}
Add this one
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$('.readmore').click(function (event) {
event.preventDefault();
var descriptionFull = document.querySelector('.product-description-full');
descriptionFull.style.display = 'block';
var descriptionShort = document.querySelector('.product-description-short');
descriptionShort.style.display = 'none';
});
$('.readless').click(function (event) {
event.preventDefault();
var descriptionFull = document.querySelector('.product-description-full');
descriptionFull.style.display = 'none';
var descriptionShort = document.querySelector('.product-description-short');
descriptionShort.style.display = 'block';window.scrollTo({top: 110, behavior: 'smooth'});
})
</script>
Im trying to this with your code but I have different one...
I have main.collection.banner.liquid - don't have collection-template.liquid
in main.collection.banner.liquid I have one time code:
{{ collection.description }}
and I don't have: {% endpaginate %}
This is my code from main.collection.banner.liquid
{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
{{ 'component-collection-hero.css' | asset_url | stylesheet_tag }}
{%- style -%}
@media screen and (max-width: 749px) {
.collection-hero--with-image .collection-hero__inner {
padding-bottom: calc({{ settings.media_shadow_vertical_offset | at_least: 0 }}px + 2rem);
}
}
{%- endstyle -%}
<div class="collection-hero{% if section.settings.show_collection_image and collection.image %} collection-hero--with-image{% endif %} color-{{ section.settings.color_scheme }} gradient">
<div class="collection-hero__inner page-width">
<div class="collection-hero__text-wrapper">
<h1 class="collection-hero__title">
<span class="visually-hidden">{{ 'sections.collection_template.title' | t }}: </span>
{{- collection.title | escape -}}
</h1>
{%- if section.settings.show_collection_description -%}
<div class="collection-hero__description rte">{{ collection.description }}</div>
{%- endif -%}
</div>
{%- if section.settings.show_collection_image and collection.image -%}
<div class="collection-hero__image-container media gradient">
<img
srcset="
{%- if collection.image.width >= 165 -%}{{ collection.image | image_url: width: 165 }} 165w,{%- endif -%}
{%- if collection.image.width >= 360 -%}{{ collection.image | image_url: width: 360 }} 360w,{%- endif -%}
{%- if collection.image.width >= 535 -%}{{ collection.image | image_url: width: 535 }} 535w,{%- endif -%}
{%- if collection.image.width >= 750 -%}{{ collection.image | image_url: width: 750 }} 750w,{%- endif -%}
{%- if collection.image.width >= 1070 -%}{{ collection.image | image_url: width: 1070 }} 1070w,{%- endif -%}
{%- if collection.image.width >= 1500 -%}{{ collection.image | image_url: width: 1500 }} 1500w,{%- endif -%}
{{ collection.image | image_url }} {{ collection.image.width }}w
"
src="{{ collection.image | image_url: width: 750 }}"
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc(50vw - 130px), calc(50vw - 55px)"
alt=""
width="{{ collection.image.width }}"
height="{{ collection.image.height }}"
>
</div>
{%- endif -%}
</div>
</div>
{% schema %}
{
"name": "t:sections.main-collection-banner.name",
"class": "section",
"settings": [
{
"type": "paragraph",
"content": "t:sections.main-collection-banner.settings.paragraph.content"
},
{
"type": "checkbox",
"id": "show_collection_description",
"default": true,
"label": "t:sections.main-collection-banner.settings.show_collection_description.label"
},
{
"type": "checkbox",
"id": "show_collection_image",
"default": false,
"label": "t:sections.main-collection-banner.settings.show_collection_image.label",
"info": "t:sections.main-collection-banner.settings.show_collection_image.info"
},
{
"type": "select",
"id": "color_scheme",
"options": [
{
"value": "accent-1",
"label": "t:sections.all.colors.accent_1.label"
},
{
"value": "accent-2",
"label": "t:sections.all.colors.accent_2.label"
},
{
"value": "background-1",
"label": "t:sections.all.colors.background_1.label"
},
{
"value": "background-2",
"label": "t:sections.all.colors.background_2.label"
},
{
"value": "inverse",
"label": "t:sections.all.colors.inverse.label"
}
],
"default": "background-1",
"label": "t:sections.all.colors.label"
}
]
}
{% endschema %}
Can you help ?
Digging up an older thread but did you ever find a solution to this?
<div class="collection-hero__description rte">{{ collection.description }}</div>
If you have a similar code. You can replace {{ collection.description }} with code mentioned in the solution above and it will work.
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024