---
updatedAt: 2026-09-04T11:22:16.000Z
agentTools:
  projectIndex: https://docs.us.zip.co/llms.txt
---

# Activate Zip on-site messaging

<div class="sc-notice info">
  <p class="warning-title"><b>Let your customers know</b></p>
	<p>Consumers are not always aware of the different payment options available to them before they reach the checkout. Knowing that Zip is available early on can influence the purchase decision. Enabling the Zip on-site assets is a great way to let them know even before they decide to buy.</p>
</div>

[block:html]
{
  "html": "<div class=\"tabs\">\n    <!-- Radio button and lable for #tab-content1 -->\n    <input type=\"radio\" name=\"tabs\" id=\"tab1\" checked >\n    <label for=\"tab1\">\n        <i class=\"fa fa-html5\"></i><span>Mobile</span>\n    </label>\n    <!-- Radio button and lable for #tab-content2 -->\n    <input type=\"radio\" name=\"tabs\" id=\"tab2\">\n    <label for=\"tab2\">\n        <i class=\"fa fa-css3\"></i><span>Desktop</span>\n    </label>\n\n    <div id=\"tab-content1\" class=\"tab-content\">\n      \n        <blockquote class=\"callout callout_info\" theme=\"📘\"><h3 class=\"callout-heading empty\"><span class=\"callout-icon\">📘</span></h3><p> Mobile view of Zip widgets \n\n \t\t\t\t</p></blockquote>   \n\t\t\t\t<img class=\"img_box_shadow img_list\" style=\"width:914px\" src=\"https://zip.co/static/Readme%20Guides/asset%20images/mobile-widget.png\"></img>\n\t\t\t\t<br> \n\t\t\t\t<br> \n    </div> <!-- #tab-content1 -->\n\n    <div id=\"tab-content2\" class=\"tab-content\">\n        <blockquote class=\"callout callout_info\" theme=\"📘\"><h3 class=\"callout-heading empty\"><span class=\"callout-icon\">📘</span></h3><p> Desktop view of Zip widgets     \n          </p></blockquote>\n      <img class=\"img_box_shadow img_list\" style=\"width:914px\" src=\"https://zip.co/static/Readme%20Guides/asset%20images/desktop-widget.png\"></img>\n      <br> \n      <br> \n\t\t\t<div class=\"rdmd-table\">\n  \t\t\t\t <div class=\"rdmd-table-inner\">\n     \t\t\t\t <table>\n        \t\t\t <thead>\n         \t\t\t</thead>\n               <tbody>\n               </tbody>\n             </table>  \n  \t\t \t\t </div>\n\t\t\t</div>  \n      \n    </div> <!-- #tab-content2 -->\n    <div id=\"tab-content3\" class=\"tab-content\">\n        <h3>#3 Tab title here</h3>\n        <p>#3 Tab content here</p>\n        <p>Dolor sit amet</p>\n        <p>Ololo pysh pysh</p>\n    </div> <!-- #tab-content3 -->\n</div>\n\n<style>\n  .tabs {\n    float: none;\n    list-style: none;\n    padding: 0;\n}\n.tabs:after {\n    content: '';\n    display: table;\n    clear: both;\n}\n.tabs input[type=radio] {\n    display:none;\n}\n.tabs label {\n    display: block;\n    float: left;\n    color: #ccc;\n    text-decoration: none;\n    text-align: center;\n    line-height: 2;\n    cursor: pointer;\n    padding: 10px;\n    margin-left: -1px;\n    position: relative;\n    left: 1px;  \n}\n/*\n.tabs label span {\n    display: none;\n}\n*/\n.tabs label i {\n    padding: 5px;\n    margin-right: 0;\n}\n\n.tab-content {\n    display: none;\n    width: 100%;\n    float: left;\n    padding: 15px;\n    box-sizing: border-box;\n    background-color:#ffffff;\n    border-top: 1px solid var(--sail-color-gray-100);\n \t  margin-top: -3px;\n}\n\n\n/*\n.tabs label {\n    -webkit-transition: all 0.5s;\n    transition: all 0.5s;\n}\n@keyframes scale {\n  0% {\n    transform: scale(0.9);\n    opacity: 0;\n    }\n  50% {\n    transform: scale(1.01);\n    opacity: 0.5;\n    }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n*/\n.tabs [id^=\"tab\"]:checked + label {\n    border-bottom: 2px solid #1c70f2;\n    color: #1c70f2;\n}\n#tab1:checked ~ #tab-content1,\n#tab2:checked ~ #tab-content2,\n#tab3:checked ~ #tab-content3 {\n    display: block;\n}\n\n@media (min-width: 768px) {\n    .tabs i {\n        padding: 5px;\n        margin-right: 10px;\n    }\n    .tabs label span {\n        display: inline-block;\n    }\n}\n</style>"
}
[/block]

## Zip assets configuration

Simply tick the box of the widget you would like to display from the Zip configuration page

> 📘 Adding your Zip merchant public key
>
> Note this value is required for Australian stores only. The field can be left empty if you're located in the US.

<div style="text-align:center;"><img class="img_box_shadow img_list" style="width:514px" src="https://files.readme.io/3952a08-BC-widget-config.jpg"></img></div><br>

> 🚧 Don't see the option for Zip widgets?
>
> Not all BigCommerce versions will have the option to select the widgets directly from the Zip settings.\
> If you can't see these settings, please reach out to our integrations team who will be able to assist with adding the Zip widgets to your theme directly.

## And that's it!

You're all finished. If you've encountered any issues during the integration process please contact our [Partner Support](mailto:partners@us.zip.co) team.