# Adding variant colors under Summary Block Squarespace

**URL:** <https://community.elfsight.com/t/adding-variant-colors-under-summary-block-squarespace/166850>\
**Category:** Platform Tips\
**Tags:** squarespace\
**Created:** [July 4, 2026, 7:50am UTC](https://community.elfsight.com/t/adding-variant-colors-under-summary-block-squarespace/166850 "2026-07-04T07:50:07Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![tuanphan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/tuanphan/32/3165_2.png) [@tuanphan](https://community.elfsight.com/u/tuanphan)\
**Post date:** [July 4, 2026, 7:50am UTC](https://community.elfsight.com/t/adding-variant-colors-under-summary-block-squarespace/166850/1 "2026-07-04T07:50:08Z")

</div>

To add variant colors under Summary Block, like this.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/7/9/7995ed54197990ccd9b0a59a558d26b940b6a836.jpeg)

**#1.1.** Make sure you connected Summary Block with desired store page

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/6/c/6ccfafc809c0fe13e3fe824c49bcdbb2cac802d6.png)

**#1.2.** Hover on Page where you use Summary Block \> Click Gear icon

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/8/8/886750dbf2962efdddfd08098c43c67e2aca0096.png)

**#1.3.** Click Advanced \> Paste this code

- If you use Personal/Basic Plan and your plan doesn’t support Injection, see #3.1

```auto
<!-- 07.26c01v12 Variant Colors under Summary Block -->
<script>
window.SummaryVariantColorsConfig = {
  optionName: "Color",
  borderColor: "rgba(0,0,0,.25)",
  gap: "6px",
  padding: "3px 12px",
  marginTop: "8px",
  fontSize: "12px",
  lineHeight: "1.4"
};
</script>
<script src="https://code.beaverhero.com/summaryblock/0726c01v12variantcolorsundersb.js"></script>

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/6/8/6893deb6a046b522014369e0bc49d652a6b37cb6.jpeg)

**#2.1.** To change style of variant buttons, change Line 07 – Line 10

```auto
padding: "3px 12px",
marginTop: "8px",
fontSize: "12px",
lineHeight: "1.4"

```

**#2.2.** To change gap between variant buttons, change Line 06

```auto
gap: "6px",

```

**#2.3.** To set corresponding color for variant buttons, you can use code like this to Custom CSS box

```auto
span.color-black {
    background-color: #000;
    color: #fff;
}
span.color-white {
    background-color: #fff;
    color: #000;
    border-color: #fff;
}
span.color-red {
    background-color: red;
    color: #fff;
    border-color: red;
}
span.color-violet {
    background-color: violet;
    color: #fff;
    border-color: violet;
}
span.color-navy {
    background-color: navy;
    color: #fff;
    border-color: navy;
}
span.color-green {
    background-color: green;
    color: #fff;
    border-color: green;
}

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/f/e/feba3f44a4ef4be1b48593dea2395f369a990621.jpeg)

**#3.1.** If you use Personal/Basic Plan and your plan doesn’t support Injection, you can add a Markdown Block under Summary Block.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/a/5/a5b7c63b8bf5d6bd492784a712cbb1709ce8e8e0.png)

Then add this code into Markdown Block

```auto
<script>
window.SummaryVariantColorsConfig = {
  optionName: "Color",
  borderColor: "rgba(0,0,0,.25)",
  gap: "6px",
  padding: "3px 12px",
  marginTop: "8px",
  fontSize: "12px",
  lineHeight: "1.4"
};
</script>
<script src="https://code.beaverhero.com/summaryblock/0726c01v12variantcolorsundersb.js"></script>

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/e/2/e215347ac580f231c1a427c384d29a2401b1a2ef.png)