<form>
  <h2>Subscription Box</h2>
  <div>
    <span class="money">$13.50</span>
    <span>$15.00</span>
  </div>
  <div>
      <img src="https://cdn.shopify.com/s/files/1/0122/6686/4697/products/2-subscriptions-box_128x128.png" />
  </div>
  <button onclick="subscribe(event)">Add to Cart</button><br />
</form>

form {
  padding: 1em;
  background-color: #343434;
  width: 250px;
  text-align: center;
  color: white;
  font-family: Arial,sans-serif;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  span, p {
    font-family: "Times New Roman", Times, serif;
  }
}
h2 {
  margin: 0;
  + div {
    margin-bottom: 1em;
  }
}
span.money {
  font-size: 24px;
  + span {
    text-decoration: line-through;
    font-size: 24px;
    color: #AAA;
  }
}

button {
	background-color:#44c767;
	-moz-border-radius:28px;
	-webkit-border-radius:28px;
	border-radius:28px;
	border:1px solid #18ab29;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-size:17px;
	padding:12px 24px;
  margin-top: 1em;
  margin-bottom: 0.5em;
	text-decoration:none;
	text-shadow:0px 1px 0px #2f6627;
  
  &:hover {
    background-color:#5cbf2a;
  }
  &:active {
    position:relative;
    top:1px;
  }
  &:focus {
    outline: none;
  }
}

window.myshopifyDomain = 'bold-subscriptions-cashier.myshopify.com';

function subscribe(e) {
  e.preventDefault();
  BoldSubscriptions.cart.standard.addToCartCashier({
    id: 10616668160057,
    properties: {
      group_id: 60660,
      frequency_num: 1,
      frequency_type: 3,
      frequency_type_text: 'Month(s)'
    }
  })
    .then(() => alert('Successfully added'))
    .catch(() => alert('Failed as expected in CodePen'));
}