> For the complete documentation index, see [llms.txt](https://docs.shopwaive.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.shopwaive.com/shopify/accounts/html-css-and-snippets.md).

# HTML, CSS and Snippets

Include Shopwaive's HTML snippets in your theme to conveniently display transactional history and customer balances

## Selector tags

After customer's log into their account, you can display their account balance and transaction history with the following markup.

```html
//An authenticated customer's balance
<span id="shopwaive_acctbalance"></span>

//An authenticated customer's balance string
<div id="shopwaive_acctstatus"></div>

//An authenticated customer's table of transactions (i.e ledger)
<div id="shopwaive_accttable"></div>
```

## Global styles

You can style your customer's transaction table on their account page by including these styles to your Theme: open your theme settings, select Custom CSS and paste the styles.

```css
#shopwaive_acct_table_history > thead > tr:first-child > th:last-child {
  border-radius: 3px;
  border-top-right-radius: 3px;
  border-top: none;
}
#shopwaive_acct_table_history > thead > tr:first-child > th:first-child {
  border-radius: 3px;
  border-top-left-radius: 3px;
  border-top: none;
}
#shopwaive_accttable table {
  border-collapse: separate;
}
#shopwaive_accttable thead {
  background: #c6573f;
  color: white;
}
#shopwaive_accttable td {
  padding: 10px;
  border: 0.5px solid #e5e5e5;
}
#shopwaive_accttable {
  text-align: left;
}
#shopwaive_accttable th {
  font-weight: normal;
  padding-left: 10px;
}
body:has(* > #shopwaive_accttable table) #credit_title_h1 {
  display: block;
}
#shopwaive_acctstatus {
  margin-top: 10px;
  margin-bottom: 10px;
}
```

In the CSS ABOVE, the table header includes a brand color you can change:

<pre class="language-css"><code class="lang-css">#shopwaive_accttable thead {
<strong>    background: YOUR_BRAND_BACKGROUND_COLOR_HERE
</strong><strong>    color: YOUR_BRAND_FONT_COLOR_HERE
</strong>}
</code></pre>

{% hint style="info" %}
If you do not use the [Minified script](#minified-script-for-html-and-snippets) provided below, the selector tags need the **Storefront scripts** app embed turned on in your theme (**Online Store** > **Edit theme** > <mark style="color:blue;">App embeds</mark>). Storefront scripts fills the selector tags for a logged-in customer on the pages that carry them.
{% endhint %}

Brands can use these selectors and styles in combination with server requests to the [Shopwaive API](https://api.shopwaive.com) to provide the most optimal integration experience with your site. Have questions on any specific features? [<mark style="color:blue;">**Contact us**</mark>](mailto:support@shopwaive.com)

## Minified script for HTML and snippets

Instead of turning on the Storefront scripts app embed, you can render the minified script with the liquid snippet below, which fills the selector tags described above. Add the following liquid code to a new snippet called <mark style="color:blue;">**shopwaive\_script.liquid**</mark>, for example. Then include the snippet in your <mark style="color:blue;">**theme.liquid**</mark> using the <mark style="color:blue;">**render**</mark> tag like so

In your file <mark style="color:blue;">**theme.liquid**</mark>, add this:

```liquid
{%- render 'shopwaive_script' -%}
```

Create a snippet named <mark style="color:blue;">**shopwaive\_script.liquid**</mark> and add this:

{% code overflow="wrap" %}

```liquid
{% if customer %}
  {% assign shopwaive_customer_id = customer.id %}
  {% assign shopwaive_customer_email = customer.email %}
  {% assign store_domain = shop.permanent_domain %}
  {% assign store_primary_domain = 'https://' | append: shop.domain %}
  <script id="sw_crypto_" async type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js"></script>
  <script>
      window.Shopwaive = {};
      window.Shopwaive.customer_id = '{{ shopwaive_customer_id }}';
      window.Shopwaive.customer_name = '{{ customer.first_name }} {{ customer.last_name }}';
      window.Shopwaive.customer_email = '{{ shopwaive_customer_email }}';
      window.Shopwaive.shop = '{{ store_domain }}';
      window.Shopwaive.domain = '{{ store_primary_domain }}';
      var elementExists = document.getElementById("shopwaivecom");
      if (!elementExists) {
          var script = document.createElement('script');
          script.id = 'shopwaivecom'
          script.type = 'text/javascript';
          script.async = true;
          script.src = 'https://app.shopwaive.com/admin/2024-05/account_script/shopwaive.js';
          document.head.append(script);
      }
  </script>
{% endif %}
```

{% endcode %}