Jump to content

Summary block 'read more' button doesn't show (Lazy Summaries)

Go to solution Solved by paul2009,

Recommended Posts

On 10/19/2020 at 10:27 PM, Claire_auck said:

I am trying to get the 'read more' option to show up on the (lazy summary) summary block. I have ticked the option in the settings but it won't display...what am I missing?

Hi Claire

The "Read More" link is only enabled when "Show Excerpt" has been enabled. If you enable this, you'll see the link. 🙂

-Paul

 

readmore.gif.0f35a9e9ff23d6335fc6f148167963f6.gif

 

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
2 hours ago, paul2009 said:

Hi Claire

The "Read More" link is only enabled when "Show Excerpt" has been enabled. If you enable this, you'll see the link. 🙂

-Paul

 

readmore.gif.0f35a9e9ff23d6335fc6f148167963f6.gif

 


Hey Paul, thanks for the info on this one.

We don't want to show the excerpt at this stage, do you know if there's a way to add a read more button with CSS? It might be a long shot but it's worth asking.

Cheers
Claire.


 

Link to comment
4 hours ago, Claire_auck said:


Hey Paul, thanks for the info on this one.

We don't want to show the excerpt at this stage, do you know if there's a way to add a read more button with CSS? It might be a long shot but it's worth asking.

Cheers
Claire.


 

Hi,
Enable the excerpt and hide the text with CSS.
Please let me know if you don't know how to hide it. (Enable it first)


Best,
Leopold

Ninja Kit Extension: Upgrade your Squarespace website without coding.

YouTube Preview    -    FREE DOWNLOAD

Link to comment
9 hours ago, Claire_auck said:

We don't want to show the excerpt at this stage, do you know if there's a way to add a read more button with CSS?

If you don't want the excerpt to show, you don't need to enable it. You should be able to force the read more link to show with CSS:

.sqs-block-summary-v2 .summary-read-more-link {
  display: block!important;
}

 

   If a post helps you, please click a "Like" option below  ↘️

Edited by paul2009

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
4 minutes ago, paul2009 said:

If you don't want the excerpt to show, you don't need to enable it. You should be able to force the read more link to show with CSS:


.sqs-block-summary-v2 .summary-read-more-link {
  display: block!important;
}

 

   If a post helps you, please click a "Like" option below  ↘️

Hey @paul2009  🙂

That works, thanks!
Is there a way to move the button below the price and to be able to style it so it looks more like a button?

Cheers
Claire.

 

Link to comment
  • Solution
28 minutes ago, Claire_auck said:

Is there a way to move the button below the price...

Sure.

At the moment, the summary block metadata is shown in fixed positions as defined by Squarespace. You can change this by using "CSS Flexible Box Layout", better known as "Flexbox". See the example and explanation below.

In the following example, the summary content has been set to "display: flex", which means that the items of metadata (title, price, read more link) all become "flex items" and can be ordered however we want. Next. we set the flex-direction property to 'column' so that the flex items are placed in a column (how they used to be). Finally, we set the "order" property of each flex item (title, price, read more link) to determine their layout within the column. Items are sorted by ascending order value.

/* Change Summary Block Content Order  */
/* Enable Flexbox */
.sqs-block-summary-v2 .summary-content {
  display: flex;
  flex-direction: column;
}
/* Summary Block Title Position */
.summary-metadata-container.summary-metadata-container--above-title {
  order: 1;
}
/* Summary Block Price Position */
.sqs-block-summary-v2 .summary-price .product-price {
  order: 3;
}
/* Summary Block Read More Link Position */
.sqs-block-summary-v2 .summary-read-more-link {
  order: 4;
}

 

28 minutes ago, Claire_auck said:

...and to be able to style it so it looks more like a button?

Yes! Again, you just need some CSS that will affect the read more link. For example:

/* Button Styling for read more link */
.sqs-block-summary-v2 .summary-read-more-link {
  margin-top: 4px;
  border-width: 2px;
  border-style: solid;
  padding: 7px 13px;
  max-width: 145px;
}
.sqs-block-summary-v2 .summary-read-more-link:hover {
  background-color: #171717;
  color: #fff;
}

summary-block-example-claire.thumb.png.0fc4da86497e4aceae914fae262b49d6.png

  If this helps you, please click "Like" below  ⬇️

 

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
  • 3 months later...
On 10/26/2020 at 4:06 AM, paul2009 said:

Sure.

At the moment, the summary block metadata is shown in fixed positions as defined by Squarespace. You can change this by using "CSS Flexible Box Layout", better known as "Flexbox". See the example and explanation below.

In the following example, the summary content has been set to "display: flex", which means that the items of metadata (title, price, read more link) all become "flex items" and can be ordered however we want. Next. we set the flex-direction property to 'column' so that the flex items are placed in a column (how they used to be). Finally, we set the "order" property of each flex item (title, price, read more link) to determine their layout within the column. Items are sorted by ascending order value.


/* Change Summary Block Content Order  */
/* Enable Flexbox */
.sqs-block-summary-v2 .summary-content {
  display: flex;
  flex-direction: column;
}
/* Summary Block Title Position */
.summary-metadata-container.summary-metadata-container--above-title {
  order: 1;
}
/* Summary Block Price Position */
.sqs-block-summary-v2 .summary-price .product-price {
  order: 3;
}
/* Summary Block Read More Link Position */
.sqs-block-summary-v2 .summary-read-more-link {
  order: 4;
}

 

Yes! Again, you just need some CSS that will affect the read more link. For example:


/* Button Styling for read more link */
.sqs-block-summary-v2 .summary-read-more-link {
  margin-top: 4px;
  border-width: 2px;
  border-style: solid;
  padding: 7px 13px;
  max-width: 145px;
}
.sqs-block-summary-v2 .summary-read-more-link:hover {
  background-color: #171717;
  color: #fff;
}

summary-block-example-claire.thumb.png.0fc4da86497e4aceae914fae262b49d6.png

  If this helps you, please click "Like" below  ⬇️

 

I'm trying to do something similar. The button code worked great for me, but the code for forcing the read more link/button without the excerpt isn't working. The read more box is showing without having to check the excerpt box, but after checking it, it's still not showing up for me.

And if possible, I would also like to know how to customize the text in the button to say "shop the look" and to center the button more. 

Link to comment
19 minutes ago, SNG said:

I'm trying to do something similar.

Please provide more details, including a working link to the page so that the community can take a look. The site doesn't need to be live for you to provide us with a link, but if it is still in trial, you will need to set a public password and tell us what it is.

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
17 minutes ago, paul2009 said:

Please provide more details, including a working link to the page so that the community can take a look. The site doesn't need to be live for you to provide us with a link, but if it is still in trial, you will need to set a public password and tell us what it is.

 The page is 

https://www.glamgirlbeautyco.com/fashion-find-outfit-of-the-week 

I would like "shop this look"/ read more button to show without the excerpt showing. Right now, when I enter the code

}
.sqs-block-summary-v2 .summary-read-more-link {
  display: block!important;
}

It allows me to check the "show read more link" without checking the "show excerpt" but when I click it, nothing happens.

Also if possible I would like the button to be centered under the summary image instead of the the left. I currently have this code- 

.sqs-block-summary-v2 .summary-read-more-link {
  font-size: 0;
}
.sqs-block-summary-v2 .summary-read-more-link::before {
  content: "Shop The Look";
  font-size: 20px;
}
/* Button Styling for read more link */
.sqs-block-summary-v2 .summary-read-more-link {
  margin-top: 6px;
  border-width: 5px;
  border-style: solid;
  padding: 13px 13px;
  max-width: 250px;
  background-color: #fff;
  color: #fff;
}
.sqs-block-summary-v2 .summary-read-more-link:hover {
  background-color: #171717;
  color: #fff;
}
.sqs-block-summary-v2 .summary-read-more-link {
  display: block!important;
}
 

Link to comment
  • 6 months later...

Hey there,

 

I've just found this thread and am having the same issue - my read more button will only appear once 'excerpt' is 'on'.

 

Link to site is https://crimson-crow-8nwc.squarespace.com/
PW 'mmad_adr_2021'

 

Custom code in CCS is below
 

// Read More Summary Button //

.sqs-block-summary-v2 .summary-item-record-type-text .summary-read-more-link {
  display: inline-block!important;
  margin-top: 10px;
  background: #FFF;
  color: #000000;
  border: 0px solid white;
  border-radius: 0px;
  padding: 10px 20px;
}

 

Any help would be massively appreciated!

Thanks,
Adam

Graphic Design / Football / Music

Link to comment
34 minutes ago, Adr_81 said:

my read more button will only appear once 'excerpt' is 'on'.

See my latest post on this issue:

 

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.