Jump to content

Adding buttons to summary block

Recommended Posts

Hi, I'm currently trying to add a button to the summary block, with events content. with javascript :

  window.addEventListener('load', function () {

  function addGoToButtons(id) {
    document.querySelectorAll(id).forEach(function append(element) {
      var url = element.querySelector('.summary-title-link').href;
      var link = createButton(url);

  function createButton(url) {
    var node = document.createElement('div');
    var linkNode = document.createElement('a');
    var linkText = document.createTextNode('En savoir plus');
    linkNode.title = 'En savoir plus';
    linkNode.href = url;
    linkNode.classList.add('sqs-block-button-element--small', 'sqs-block-button-element');
    return node;

The script work well, but 1 time on 3, depending of the loading order of others scripts the DOM is reset after my function was executed, and my buttons disappear. I tried to inject my code in the page, then in code injection in parameters in the header then in the footer without success...

Do you know how i can fix this? Thanks!

Link to comment
  • Replies 1
  • Views 799
  • Created
  • Last Reply

Nevermind, we did it with css  :


  .sqs-block-summary-v2 .summary-block-setting-design-list .summary-item, .sqs-block-summary-v2 .summary-item.positioned {
    padding-bottom: 50px !important;
  .summary-content {
  .summary-title .summary-title-link::after {
    content: 'En savoir plus';
    background-color: #1171bb;
    border-radius: 30px;
    display: block;
    padding: 13px 26px;
    font-family: "proxima-nova","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 12px;
    font-weight: 600;
    font-style: normal;
    line-height: normal;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    background-color: #1171bb;
    border-color: #1171bb;
    position: absolute;
    bottom: -45px;
  .summary-title .summary-title-link:hover::after {
    opacity: .8;
  .summary-title .summary-title-link:hover {
    color: #212231 !important;


Link to comment


This topic is now archived and is closed to further replies.

  • 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.