Six widgets are designed to put your products in front of shoppers wherever you write text — on your About page, in a blog post, in another product's description. This article covers all of them with copy-paste examples and live previews of how each one renders.
If you're new to widgets, read how widgets and template tags work first.
[product] — single product card
Embeds one product. Defaults to a card with image, name, and price.
[product id=12]To find a product's id, open the product in your dashboard. The number at the end of the URL is the ID.
Three display styles. Inline:
Bring it home today: [product id=12 style=inline]Button:
[product id=12 style=button]Buy the Argan Oil[/product]| Style | Looks like | Use it for |
|---|---|---|
| card | Image + name + price, like the storefront grid | Featuring a product mid-page |
| inline | "Argan Oil — KSh 1,200" link inside a paragraph | Mentioning a product in flowing text |
| button | "Buy [Name]" call-to-action button | End-of-section CTA |
The button style accepts custom text inside the tag. If you leave the inner text empty, the button reads "Buy [product name]" automatically.
[product_grid] — static grid of products
Drops a tidy grid of products from a category. Great for "Our top sellers" or "New arrivals" sections.
[product_grid cat=2 limit=4 cols=2]All attributes:
| Attribute | What it does | Default |
|---|---|---|
title | Heading shown above the grid | Empty |
cat | Category ID, or comma-separated IDs (cat=1,2,3) | All products |
limit | How many products to show (1–24) | 6 |
cols | Number of columns: 2, 3, or 4 | 2 |
sort | default, newest, price_asc, price_desc, name_asc | default |
[product_slider] — horizontal scrolling row
Same idea as the grid, but products scroll sideways instead of wrapping. Good for the homepage when you have many products and don't want to dominate the screen.
[product_slider title="Best sellers" limit=8]Same attributes as [product_grid], except there are no columns (it's always one row that scrolls).
Use the slider for "browse" sections where shoppers expect to swipe. Use the grid for "featured" sections where you want everything visible at once.
[price] — inline price
Drop the current price of a product into a sentence:
This month's argan oil is just [price id=12], delivered.If you change the product's price later, the sentence updates automatically. Useful in promotional copy where you don't want to retype prices everywhere when stock turns.
[stock] — live stock badge
Shows whether a specific product is in stock right now:
The latest batch is here — [stock id=12] — order today.Renders as either an "In stock" green badge or an "Out of stock" grey badge:
[stock id=12] (when product.stock = 0)Updates the moment a product sells out, no manual editing required.
[category] — link to a category
Send shoppers to one of your category pages, as a card with the category image or as a button:
[category id=2][category id=2 style=button]Useful in blog posts when you want to nudge readers towards a specific section of your shop. To find a category's ID, open Categories in your dashboard and look at the URL.
Putting them together
A typical "Featured" section on a custom page might look like:
<h2>What's hot this week</h2>
[product_grid title="" cat=2 limit=4 cols=2 sort=newest]
[divider]
<p>Stock is moving fast — the argan oil is [stock id=12] right now, just [price id=12].</p>
[product id=12 style=button]Get yours[/product]That gives you a heading, a 4-product grid, a divider, a sentence with live stock and price, and a final call-to-action button. All of it stays current as you update products.
Tips that save time
Stop typing prices in your copy. Use [price id=X] for any product you mention. When you raise prices, every page that mentions the product updates automatically.
Don't list products by hand. If you're tempted to type "Our products: ...", use a [product_grid] instead. New products you add to the right category appear without you editing the page.
Pair stock badges with CTAs. A "[stock id=X] — buy now" line converts better than a generic "Buy now" because it signals scarcity when stock is low.