How can I add a show more/less option for long collection descriptions?

[davideross]

Hy all!

I’m trying to find a solution for my long descriptions.. Can someone help me to add a code to show more/less for collection descriptions?

https://puntohotel.it/collections/linea-cortesia (password: davide)

Here’s an example of a long collection description.. can i add some code to have this show more/less?

Thanks again!

Davide

[system]

Hello,

You can get code from here https://skrtips.com/how-to-add-read-more-button-in-shopify-debut-theme/ and this also https://jadepuma.com/blogs/blog/more-less-toggles-for-shopify-descriptions.

Thank you.

[davideross]

sorry if i ask, but can you help me a bit more by guiding me in doing it? i tried but i had to come back because it didn’t work

[system]

Sure!

I will share this with some more clarification.
Thank you.

[system]

Hello,

Follow these 2 steps and code in theme.liquid file and product.liquid file.

{% if template == "product" %} 

{% endif %} 

            

              {{ product.description }}
            

            Read more...
          

Thank you.

[VitaF]

Hello! An alternative option would be to use product description tags that help to organise different sections of your product description. Therefore instead of hiding some of the important information, you can clearly show customers which information they can find under different tabs.

[davideross]

ok i think i’m doing good.. but i still have some problems.. i added codes (changed because it was for collection pages) and it works.. but it changed the layout of my collection.. now it appears out of margins..

is it possible to solve this? (collection below is not aligned like before)

Thanks again for all your help!

[davideross]

ok i think i’m doing good.. but i still have some problems.. i added codes (changed because it was for collection pages) and it works.. but it changed the layout of my collection.. now it appears out of margins..

is it possible to solve this? (collection below is not aligned like before)

Thanks again for all your help!

[system]

Hello,

Add this code at the end of styles.css file in assets and the text will be left aligned(screenshot attached).

.collection__description {
    margin: 10px 0% !important;
    text-align-last: left !important;
}
.collection__description div {
    text-align: left !important;
}

Thank you.

[davideross]

mm no, the problem was not with text alignment; what i mean was about the section below.. like you can see the collection list overlays the background..

(second screen is from a copy of the theme i saved before I added these codes)

[system]

This is the header which is fixed, when you scroll it shows on background image. Add this code in styles.css file at end.

#shopify-section-header-classic .header-sticky-wrapper.is-sticky .header { 
    position: static !important;
}

or if you want this header fixed then add this code in styles.css , with this the background image will not shown over header.

#shopify-section-header-classic .header-sticky-wrapper.is-sticky .header {
    background-color: rgb(238 250 250); 
}

Thank you.

[davideross]

mm no the problem is not with the header.. thank so much for your patience, i try to explain better with a loom video https://www.loom.com/share/dc97ddf0a7ab43e5ac1b83d6ca3d8a2c

The problem is with collection list that goes out of the border.. and i cannot solve it Like you can see in the video if i public a previous copy of the theme it appears correct, and the collection list is in the right place, but if i switch to the theme with code added, it goes out of lines like in video…