# Shop widgets - sell on any website with copy and paste

> Create SmartPOS Hub shop widgets - full shop, online menu, product grid, buy button, search, cart, category tiles, bookings - and paste them into any site.

Source: https://docs.smartposhub.com/online/widgets/  
Last updated: 2026-10-30  
Product: SmartPOS Hub (https://smartposhub.com)

Shop widgets let customers browse your products and order on any website you already have. You build a widget in SmartPOS Hub, watch it in a live preview, copy one short code and paste it into your site. Orders go straight into SmartPOS Hub as online orders and sales. This page shows how.

> **How to turn it on**
> 1. **Plan:** Website & online store
> 2. **Switch:** Settings › Business Settings › Modules › Website & online store (Bookings widgets also need Bookings or the Services module)
> 3. **Permission:** Manage embeddable shop widgets (User Management › Roles, under Website); admins have it

## The eight widget types

| Type | What the visitor sees | Good for |
|---|---|---|
| **Full shop** | Search, categories, products, cart and checkout in one block | A shop page on your existing website |
| **Online menu** | Restaurant style: pickup / dine-in / delivery first, categories as sections, options window | Restaurants, cafés, bakeries |
| **Product grid / carousel** | Chosen products, categories or best sellers with a floating cart | Home page, landing pages, blog posts |
| **Buy button** | One product as a card or a single button | Selling one hero product |
| **Search bar** | Instant product search that opens the product and cart | Header of a content site |
| **Floating cart** | Cart and checkout button for any page; shares the cart with your other widgets | Every page of a site that has grid or buy-button widgets |
| **Category tiles** | Category tiles that open your shop widget or a link | Navigation on the home page |
| **Bookings** | Customers book a table or an appointment | Restaurants (Bookings) and salons, clinics, studios (Services) |

Types your business cannot use yet are greyed out with the reason, for example "Turn on Bookings (Settings › Business Settings › Modules) or the Services module to use this widget."

## Before you start

- Products are marked to show on the website (or **Show all sellable products** is on) and have prices; photos make widgets look much better.
- At least one location is shown on the website with an address.
- You have a way to get orders: pickup, a delivery zone with a price in **Website › Shipping**, or tables for dine-in.
- You have at least one way to pay in **Website › Payments** (see [Payments for online orders](https://docs.smartposhub.com/online/payments-for-online-orders/)).

## Create a widget

1. Open **Website › Widgets** and press **New widget**.
2. Choose a type, for example **Online menu**, and give it a **Widget name** only you see (for example "Homepage menu").
3. The editor opens. Settings are on the left, the **Live preview** on the right. Work down the sections below.
4. Press **Save widget**.

![Shop widgets list with eight live widgets, their views, add to cart, orders and revenue, and Link, Copy embed code, Edit, Pause buttons](https://docs.smartposhub.com/_astro/on-widgets-list.68EJyUIG.png) (web app page: `/website/widgets`)
*Website › Widgets: every widget with its results for the last 30 days.*

## Set up the widget (the configurator)

The editor starts with a **Performance** card (views, add to cart, checkouts started, orders, revenue and orders per 100 views for the chosen dates, split by Embedded, Direct link and QR code), then these sections:

| Section | What you choose |
|---|---|
| **General** | Name, **Widget is live**, language (or **Website default language**) |
| **Store and ordering** | Which **Stores (locations)** sell through it, the **Default store**, **Order types** (Pickup, Delivery, Dine-in), the **Default order type**, and **Ask first in a popup** (order type, store, table number) |
| **Products** | **Show** all products, chosen categories, brands or products, featured, best sellers, newest or on sale; **Sort**; products per page; **Category display** (tabs, sidebar, chips, sections in menu style) and an "All" tab |
| **Layout and product cards** | Grid, list (rows) or carousel; **Card style**; **Image shape**; columns for phone, tablet and desktop; show price, stock status, badges, short description; spacing; maximum width |
| **Search** | Show the search box and its placeholder |
| **Checkout** | **Phone number required**, **Order notes field**, **Discount code field**, **Let customers pick a time (time slots)**, **Terms page link**, **Payment methods** (leave all unticked to offer every method of the store), **Message after the order**, a bot check, and **Customer accounts** (Off, Optional or Required) |
| **Colours, fonts and texts** | **Colour mode** (light, dark or follow the visitor's device), **Main colour**, background, text, **Corner radius**, **Font**, **Button texts**, price display and the floating cart position |
| **Link page** | The text shown when the direct link is shared, and whether search engines may show it |
| **Allowed websites** | Which domains may show the widget |

![Widget editor for an online menu with the Performance chart, the General section and the Live preview on the right](https://docs.smartposhub.com/_astro/on-widget-editor.CefkMVbU.png) (web app page: `/website/widgets/2`)

![Store and ordering section with store checkboxes, default store, default order type, order types Pickup Delivery Dine-in and Ask first in a popup](https://docs.smartposhub.com/_astro/on-widget-store-ordering.Diyk6Paf.png) (web app page: `/website/widgets/2`)
*Store and ordering: tick the stores, the order types and what the popup asks first.*

![Products section with Show Chosen categories, Sort Recommended, products per page and Sections menu style next to the live preview](https://docs.smartposhub.com/_astro/on-widget-editor-products.BET0w4A5.png) (web app page: `/website/widgets/2`)
*Products and layout settings update the preview on the right as you change them.*

**Note:** 
Only order types your business supports can be ticked. Delivery needs an active delivery zone with a price in **Website › Shipping**; dine-in needs tables (Restaurant › Tables & floor plan).

## Check it in the live preview

The **Live preview** shows your unsaved changes with your real products. Switch between **Phone**, **Tablet** and **Desktop** to see how it looks for each visitor. Ordering is switched off in the preview ("Preview - orders are switched off here.").

![Live preview on the Phone setting showing the restaurant menu with search, Pickup selector and Add and Choose options buttons](https://docs.smartposhub.com/_astro/on-widget-preview-phone.DIhhu4-P.png) (web app page: `/website/widgets/2`)

If the widget would show no products, a warning card above the preview names the cause (no products on the website, nothing at that store, or the chosen categories are empty) with buttons to fix it, such as **Show all sellable products**.

## Copy the code and paste it into your website

1. In the **Embed code** card, press **Copy embed code** under **Script (recommended)**. (On the widgets list, **Copy embed code** does the same.)
2. In your website builder, add an HTML or "custom code" block where the widget should appear and paste the code.
3. Publish the page. The widget appears and stays up to date by itself - prices, stock and settings change as soon as you save in SmartPOS Hub.

![Embed code card with the script version, a Copy embed code button and the iframe version for site builders that block scripts](https://docs.smartposhub.com/_astro/on-widget-embed-code.CWFGKLhK.png) (web app page: `/website/widgets/2`)

  **WordPress:**
Add a **Custom HTML** block on the page and paste the code. Several widgets on one page need the script line only once.
  **Wix / Squarespace:**
Use the **Embed code** or **Code block** element and paste the code. If scripts are blocked, use the **Iframe** version.
  **Shopify / Webflow:**
Add a **Custom liquid** or **Embed** block and paste the code.
  **Plain HTML:**
Paste the two lines where the widget should appear, before `</body>` or inside your page content.

## Protect the widget: Allowed websites

By default any website can show the widget. Type your own domains in **Allowed websites**, one per line - for example `mybakery.com` (which also covers `www.mybakery.com`) and `*.mybakery.com` for other sub-domains. Other sites then cannot show it. Your direct link always works.

![Allowed websites box with example domains and the warning Any website can show this widget](https://docs.smartposhub.com/_astro/on-widget-allowed-websites.yiJ2OPP-.png) (web app page: `/website/widgets/2`)

## Manage widgets

- **Pause / Activate**: hide a widget everywhere without removing its code.
- **Duplicate**: copy a widget to make a variant (for example one per branch).
- **New key**: makes a new code. The old code stops working, so replace it on your websites.
- **Delete**: removes the widget; websites that use its code stop showing it.

## Tips and mistakes to avoid

- One store, one cart: grid, buy-button, search and floating-cart widgets on the same site share a cart. Add a **Floating cart** on pages that have no shop or menu widget.
- Guest checkout is always available in widgets; with **Customer accounts** set to Optional or Required, customers can also sign in and see their orders and saved addresses.
- Prices and totals are always worked out by SmartPOS Hub, so a changed page cannot change a price.
- Need a link instead of a website? Every widget except the floating cart has a [direct link and QR code](https://docs.smartposhub.com/online/order-links-and-qr/).

## Related pages

  - [Order links and QR codes](https://docs.smartposhub.com/online/order-links-and-qr/)
  - [Website orders](https://docs.smartposhub.com/online/website-orders/)
  - [Payments for online orders](https://docs.smartposhub.com/online/payments-for-online-orders/)
  - [Widgets module reference](https://docs.smartposhub.com/modules/widgets/)

## Frequently asked questions

### Which websites can show a SmartPOS Hub widget?

Any website where you can paste HTML - WordPress, Wix, Shopify, Webflow, Squarespace or plain HTML. If your site builder does not allow scripts, use the Iframe version of the embed code.

### How many widget types are there?

Eight - Full shop, Online menu, Product grid / carousel, Buy button, Search bar, Floating cart, Category tiles and Bookings. The Bookings type is only offered when Bookings or the Services module is on.

### Can I put several widgets on one page?

Yes. Paste the script line once per page and one widget line for each widget. Widgets of the same store share one cart, so a customer can add from a product grid and check out from the floating cart.

### Do widget orders reduce stock?

Yes. A widget order is a normal online order and a normal sale at the chosen store, so stock, tax and reports work exactly as for any sale.

### Can someone copy my widget to their own website?

Only if you leave Allowed websites empty. Add your own domains there (for example mybakery.com and *.mybakery.com) and other websites cannot show it.

### Why does my widget show "No products here yet"?

Usually because no product is marked to show on the website, or the widget's chosen categories or store have no products. The editor shows a warning with the cause and a one-click fix such as "Show all sellable products".

### Does the live preview place real orders?

No. The preview uses your real products and unsaved settings, but ordering is switched off in it.

### What happens if I pause a widget?

It disappears from every website that uses it, without removing the code. Activate it again and it comes back. Its direct link shows "not available" while paused.