Variant Colors under Summary Block

Description

adding variant colors under Summary Block
view demo – password: abc
buy me a coffee

#1. Install Code

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

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

#1.3. Click Advanced > Paste this code

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

<!-- 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>

#2. Customize

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

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

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

gap: "6px",

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

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

#3. Other

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

Then add this code into Markdown 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>