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.

//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.

Navigate to your Theme settings and select Custom CSS to copy/paste the styles

#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:

#shopwaive_accttable thead {
    background: YOUR_BRAND_BACKGROUND_COLOR_HERE
    color: YOUR_BRAND_FONT_COLOR_HERE
}

If you do not use the Minified script provided below, use of the selector tags will require the App embed to be turned on from your Shopify Admin Theme settings. For the most recommended implementation, turn off the Popup app embed and render the Minified script

Brands can use these selectors and styles in combination with server requests to the Shopwaive API to provide the most optimal integration experience with your site. Have questions on any specific features? Contact us

Minified script for HTML and snippets

When using the Checkout extension for Shopify Plus you may wish to reduce loading global scripts on your storefront, in which case you should disable the Popup app embed and instead render the minified script using the liquid snippet below which renders the HTML and snippets described above. For brands on Shopify Plus, the following liquid code can be added to a new snippet called shopwaive_script.liquid for example. Then include the snippet in your theme.liquid using the render tag like so

In your file theme.liquid, add this:

{%- render 'shopwaive_script' -%}

Create a snippet named shopwaive_script.liquid and add this:

{% 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 %}