How to collapse the content on home page?

Shopify Discussion
1

Hi,

I am using DAWN theme. I have created an “Our Story” page and also added that page on the main Home Page. However, the entire page content is visible on the Home Page. I want only the first 2-3 lines to be visible and have the Read More option available where it links back to the main “Our Story” Page. Is this possible?

Best,

Parul

2

Yes, please provide the piece of code you used to edit our story.

{{ “Our story is wonderful .” | truncate: 11 }} → Our story i…
//above is a 10 character limit.

{{ “Our story is wonderful .” | truncatewords: 2 }} → Our story…
//above is a limit on the number of words.

Hope this will help you!

3

Hi @Simonsron ,

I have not used any code but am looking for a way to truncate it on my home page. Currently, the entire text is visible on my Home Page which I do not want. I want only a little to be visible and then Read More option which links to Page separately.

I look forward for your help!

Many Thanks,

Parul

JonnyJonny21_0-1673427954499.png
JonnyJonny21_0-1673427954499.png1624×1120 245 KB

4 
.content{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; //Number of rows shown
overflow: hidden;
}

try this

5

Where do I add this code? I tried in base.css file and Component-pagination also but no result.

6

J’ai besoin que vous me fournissiez l’adresse de cette page.

Parce que le contenu de mon [.content] est le nom de la classe de la boîte qui englobe vos détails.
Comme je ne connais pas le nom de la classe de la boîte qui recouvre votre détail, j’utilise [content] comme exemple.

7

I need you to provide the address of this page.

Because the content of my [.content] is the class name of the box that wraps your detail.
Since I don’t know the class name of the box that wraps that detail of yours right now, I’m using [content] as an example.

8

Hi @Simonsron

My store is - https://jonnyjonny-8366.myshopify.com/

PWD - gaumee

If you will see my home Page - the Our story section has the full content visible which I want to truncate and link it to main page using “Read More” link.

Many Thanks,

Parul

9

Because I see that this section should be edited by you via rich text.

I would suggest that you could just take a section yourself and add a hyperlink at the end.

read more