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

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;
}

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

It seems you removed summary block on above link?

Have you tried contacting plugin author yet?

Hi Tuanphan.

Sorry, I listed the wrong link....! It's the books page.
https://claire-turnbull.squarespace.com/shop

I haven't contacted the author yet as I wasn't sure if it was something I was doing wrong.

Thanks for looking into it for me 🙂 

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

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

 

 

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.

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

Hi Leopold...good thinking!
I have enabled the excerpt if you want to take a look. The 'read more' still doesn't show which is odd.
Thanks for your help!
Claire.

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  ↘️

Hi

Use this code in Design -> Custom CSS

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

Also, please check this page.

Best,
Leopold

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.
 

Wow @paul2009
You are so clever....but I already knew that 😉
Thanks for taking the extra time to explain how it works too, that's super helpful!
Thanks a million.
Claire.

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;
}

  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. 

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.

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;
}