Summary Block: Add to Cart

This works with Summary Block Grid/List design only.
#1. Suppose we have a Summary Block with these Products. We will find the way to add “Add to Cart” button here.

#2. First, edit each product > Additional Info > Add text “Add to Cart”

Highlight it > Enter this URL: #product100 (each product, you will enter a different number, you can use any numbers what you want, but read carefully below steps to make sure number here and number in next steps are consistent).
Make sure “Open in New Tab” is disabled.

We will have this

#3.1. Next, add a Section under Summary Block > Then add 3 Product Blocks

Make sure you enabled “Add to Cart button”

We will have

#3.2. Next, find ID of this Section
In my example, we will have:

section[data-section-id="671ec9546d81bb36bbe7db2d"]

Next, use this code to Custom CSS box. Code will hide this Section from Preview/Live Mode, and show it in Edit Mode only.

body:not(.sqs-edit-mode-active) section[data-section-id="671ec9546d81bb36bbe7db2d"] {
  display:none;
}

#4. Find ID of 3 Product Blocks.
In my example, we will have:

• 100. One-hundred: #block-yui_3_17_2_1_1730070417388_21392
• 99. Ninety-nine: #block-yui_3_17_2_1_1730070417388_22146
• 98. Ninety-eight: #block-01208d116f9191496bd8

#5. Use this code to Code Injection Footer (or Page Header Injection, Page where you use Summary Block).

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  const products = {
    "product100": "block-yui_3_17_2_1_1730070417388_21392",
    "product99": "block-yui_3_17_2_1_1730070417388_22146",
    "product98": "block-01208d116f9191496bd8"
  };

  $.each(products, function(productID, blockID) {
    $(`a[href="#${productID}"]`).on("click", function(event){
      event.preventDefault();
      $(`#${blockID} .sqs-add-to-cart-button`)[0].click();
    });
  });
});
</script>

When users click Add to Cart in Summary Block >> It will click Add to Cart in hidden Section Product Block.

You need to change these values in the code

#6. To style “Add to Cart” link, you can use this code to Custom CSS box

div.summary-item [href*="#product"] {
    background-color: #000;
    color: #fff;
    padding: 5px 10px;
    border-radius: 50px;
    transition: all 0.3s ease;
}
div.summary-item [href*="#product"]:hover {
    opacity: 0.7;
    transition: all 0.3s;
}

Result

#7. If you want to remove Excerpt under Price, you can use this CSS code

div.summary-item:has([href*="#product"]) p {
    display: none;
}
div.summary-item:has([href*="#product"]) p:has([href*="#product"]) {
    display: inline-block;
}

Result