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

Last updated