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. 

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

Use of the selector tags require the App embed to be turned on from your Shopify Admin Theme settings

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 can disable the app embed and include the minified script using the liquid snippet below which renders the HTML and snippets described above. For brands on Shopify, the following liquid code can be added in the <head> tag of your theme.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 %}

Alternatively, you can add this liquid to a new snippet called shopwaive_script.liquid for example, and then include it in your theme.liquid using the render tag like so

{%- render 'shopwaive_script' -%}
PreviousAutomatic DiscountsNextiframe

Last updated