To help establish customer trust, you can include a security badge in your theme, and link it to Shopify's documentation on [Payment Card Industry (PCI) standard compliance](https://www.shopify.com/security/pci-compliant?utm_medium=shop&utm_source=secure). Depending on your theme's color scheme, you can use a light-colored, or dark-colored, version.

For example:

<a href="https://www.shopify.com/security/pci-compliant?utm_medium=shop&utm_source=secure" title="This online store is secured by Shopify" target="_blank" rel="nofollow" style="background: none !important; border: none !important; padding: 0 !important; margin-right: 0.5em;">
  <img src="https://cdn.shopify.com/s/images/badges/shopify-secure-badge-white.svg" alt="Shopify secure badge" style="margin-bottom: 1em !important;">
</a>
<a href="https://www.shopify.com/security/pci-compliant?utm_medium=shop&utm_source=secure" title="This online store is secured by Shopify" target="_blank" rel="nofollow" style="background: none !important; border: none !important; padding: 0 !important; margin-right: 0.5em;">
  <img src="https://cdn.shopify.com/s/images/badges/shopify-secure-badge-dark.svg" alt="Shopify secure badge" style="margin-bottom: 1em !important;">
</a>

## Add security badges to your theme

Security badges are often included in the footer or near the **Add to cart** button on product pages. However, they can be included anywhere you have access to include HTML.

> Note:
> You can't add a security badge to the checkout page unless you're working on a [Shopify Plus](https://www.shopify.com/plus) store that has access to [checkout.liquid](/docs/storefronts/themes/architecture/layouts/checkout-liquid).

The following examples show the HTML to include for each version of the badge:

<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>

</div>
</div>

<script data-option="filename" data-value="Light"></script>

<script type="text/plain" data-language="html">
<a
  href="https://www.shopify.com/security/pci-compliant?utm_medium=shop&utm_source=secure"
  title="This online store is secured by Shopify"
  target="_blank"
  rel="nofollow"
>
  <img
    src="https://cdn.shopify.com/s/images/badges/shopify-secure-badge-white.svg"
    alt="Shopify secure badge"
  >
</a>
</script>

</div>
</p>



<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>

</div>
</div>

<script data-option="filename" data-value="Dark"></script>

<script type="text/plain" data-language="html">
<a
  href="https://www.shopify.com/security/pci-compliant?utm_medium=shop&utm_source=secure"
  title="This online store is secured by Shopify"
  target="_blank"
  rel="nofollow"
>
  <img
    src="https://cdn.shopify.com/s/images/badges/shopify-secure-badge-dark.svg"
    alt="Shopify secure badge"
  >
</a>
</script>

</div>
</p>


> Tip:
> The image files used for each badge are in `.svg` format, so they can be resized with no quality loss.