Buy buttons in the description
A block with "Add to basket" and "Add to favourites" buttons that can be inserted right into a product description or into a "Bestseller" promotional block. The second example adds a live basket counter.
Where to put it
An HTML insert on the product card, or a block on the home screen.
The simple version
Two buttons. They work anywhere HTML can be inserted.
HTML
<div style="display:flex;gap:10px;margin:12px 0;">
<button data-mobius="basket.add" data-id="15" data-qty="1"
style="flex:1;padding:14px;border:none;border-radius:12px;
background:#1D8673;color:#fff;font-size:15px;font-weight:600;">
Add to basket
</button>
<button data-mobius="favorites.toggle" data-id="15"
style="padding:14px 16px;border:1px solid #E0E0E0;border-radius:12px;
background:#fff;font-size:15px;">
Add to favourites
</button>
</div>The version with a basket counter
The button adds the product and shows how many items are in the basket altogether. The counter updates itself. This version works in blocks on the home screen, on the product card and in stories.
HTML
<div style="margin:12px 0;">
<button id="add-15"
style="width:100%;padding:14px;border:none;border-radius:12px;
background:#1D8673;color:#fff;font-size:15px;font-weight:600;">
Add to basket
</button>
<p style="text-align:center;margin-top:8px;color:#7A7A7A;">
In the basket: <b id="basket-count">0</b>
</p>
</div>
<script>
document.getElementById('add-15').addEventListener('click', async () => {
await Mobius.basket.add('15', 1);
});
Mobius.on('basket:changed', data => {
document.getElementById('basket-count').textContent = data.basketCount;
});
</script>How to adapt it
data-id="15"andMobius.basket.add('15', 1): replace15with your product ID.data-qty: the quantity added by one tap.- Change the colours and spacing in
style.
Commands used
basket.add: adding to the basket.favorites.toggle: favourites.- The
basket:changedevent for the live counter.
Updated 04.09.2026 18:04
Was this page helpful?