Custom HTML & CSS

Full control over widget appearance.

When to Use

• Templates don't match your brand
• Need specific layout changes
• Want to add icons or images

Access

1. Go to Settings → Cart Widget
2. Scroll to Advanced Template Editor
3. Tick Enable advanced template editing
4. Edit the HTML and CSS directly

HTML Variables

• {{title}}: fee title
• {{description}}: fee description
• {{price}}: formatted amount
• {{checkboxProperties}}: the checkbox input attributes

{{checkboxProperties}} is the working variable, not {{checkbox}}. A template built with {{checkbox}} renders a toggle that does nothing and never adds a fee. Always include {{checkboxProperties}} on your <input type="checkbox">.

Example HTML

<div class="tackon-widget">
  <div class="tackon-header">
    <span class="tackon-icon">🎁</span>
    <span class="tackon-title">{{title}}</span>
  </div>
  <p class="tackon-desc">{{description}}</p>
  <label class="tackon-label">
    <input type="checkbox" class="cartcharge-widget-checkbox" {{checkboxProperties}}>
    <span>Add for {{price}}</span>
  </label>
</div>

The checkbox class is a contract. TackOn wires up the toggle by looking for a recognized class name. Use one of cartcharge-widget-checkbox, tackon-widget-checkbox, cartwrap-widget-checkbox, or gw-toggle on the <input>. Rename it to something custom and the widget renders but never applies the fee. Style it with your own additional class instead.

Example CSS

.tackon-widget {
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 16px;
  margin: 16px 0;
}

.tackon-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.tackon-title {
  font-weight: 600;
}

.tackon-desc {
  color: #666;
  font-size: 14px;
  margin-bottom: 12px;
}

.tackon-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

Tips

1. Test on desktop, tablet, mobile
2. Use your brand colors
3. Keep sufficient contrast
4. Always include {{checkboxProperties}} on a checkbox with a recognized class

Going deeper

For the complete template-variable reference and the advanced editor in context, see Designing the Cart Widget.