Products

How to let shoppers personalize a product (product options)

October 13, 2026
How to let shoppers personalize a product (product options)

Product options in a TeleportHQ store let shoppers choose or add something before they buy: a size, the text for an engraving, a gift message, gift wrapping or their own photo. Open the product in the E-Commerce panel, click Options under More ways to sell it, pick a ready-made option or start from scratch, and click Save Changes. An option can add to the price, and can show only when another answer matches.

Before you start

  • Options or variants? Options share the product's stock. If each size or color needs its own stock, price and SKU, use variants instead. See How to add sizes, colors and other variants.
  • A product can have up to 30 options, and a list option up to 60 choices.

Steps

1. Open the product's options

  1. In the editor's left sidebar (the icon column), click E-commerce (the card icon). If you don't see it, click Plugins, then E-commerce, then Open next to E-commerce panel. The E-Commerce panel opens.
  2. In the Products list, click the product, for example Celebration Cake. To start a new product, click + (Add Product) instead.
  3. In the product form, scroll to More ways to sell it.
  4. Click Options ("What shoppers choose or add before buying — a paper, an engraving, a photo."). The Options column opens beside the form.
The More ways to sell it section of a TeleportHQ product, with the Options row highlighted

2. Add an option

  1. The empty column asks What can shoppers customise? Pick a starting point; you can rename everything afterwards:
    • Ready-made: Size, Paper type, Material, Colour swatches, Engraving, Gift message, Photo upload, Gift wrap and Length (priced per metre).
    • Start from scratch: Pick one, Pick several, Short text, Long text, Number, Yes or no and File upload.
The empty Options column of a TeleportHQ product, with the ready-made options and the option types to start from
  1. Click a card, for example Size. The option opens as a card with its settings.
  2. In the name field at the top of the card, change the name if you want, for example Cake size.

3. Set up the option

What you can set depends on the option type. For a Pick one option such as Size:

  1. Required: tick it when shoppers must answer before they can add the product to the cart.
  2. Show as: Buttons, Colour swatches or Image cards (a photo per choice).
  3. Choices: rename them, give a choice an extra price, and tick Default on the choice that's selected when the page opens. To add a choice, type it in Add a choice and press Enter and press Enter.
  4. How shoppers see it: a live preview of the option, with "In the cart:" and the price shoppers pay. Try the answers here before you save.
A Size option in TeleportHQ, with 1 Required, 2 Show as, 3 Choices and 4 the How shoppers see it preview

The other types have their own settings:

  • Pick several: Shoppers may pick at least and at most a number of choices. Leave "at most" empty to allow any number.
  • Short text and Long text: Placeholder (a hint in the empty field) and Max characters, for example 30 for an engraving. Charge when filled in adds a price only when the shopper types something.
  • Number: Unit (for example m), Starts at, Min, Max and Step. Its Price can be Charge per unit, for example per metre.
  • Yes or no: Charge when switched on, for example for gift wrapping.
  • File upload: Accepted files: Photos (JPG, PNG, WEBP or GIF), PDF, or Photos or PDF. Shoppers attach one file of up to 4 MB. Charge when a file is attached sets its price.

Every option also has Help text ("Shown under the option on the product page."). A price can be No extra charge, Add an amount or Add a percentage.

4. Make an option depend on another one (optional)

Once a product has a Pick one, Pick several or Yes or no option, the options below it can depend on it:

  1. Price depends on another option: under the option's price, click Price depends on another option and choose the earlier option. A small table appears with a price for each of its choices, for example a message costs more on a large cake. "Otherwise" uses the standard price above.
  2. Show only when…: under Always shown., click Show only when…, choose the option it depends on and the answers that show it. For example, show Gift message only when Gift wrap is switched on. Click Add another condition for more (all conditions must be true).
A Gift message option in TeleportHQ below a Size option, with 1 Price depends on another option and 2 Show only when… highlighted

To add another option, click Add option below the cards. The Add an option list opens with the same cards. To change the order shoppers see, drag an option by its grip. To copy or remove an option, use the copy and trash buttons at the top of its card.

5. Save the product

  1. At the bottom of the product form, click Save Changes (or Create Product for a new product).

When you save a product with options, TeleportHQ gets your store ready for them: the product page shows the options next to Add to cart, and the cart and checkout carry the shopper's answers.

Check that it worked

  • In the Products list, the product's card shows a badge such as 2 options.
  • Open the product details page on the canvas and preview the product: the options show next to Add to cart. See How to show products on your pages.
  • After you publish, shoppers answer the options before they add the product to the cart, and the price follows their answers. Each order line lists the answers, with attached files as links. See How to find and manage orders.

Troubleshooting

The product doesn't save, and an option says "Needs attention" An option has a problem, for example a missing name or a choice without a label. The form opens the Options column: open the option marked Needs attention and fix what it says.

"Shoppers cannot choose product options on your store yet: …" Your product page has no place for the options, or Add to cart can't carry the answers, for example because the button was removed or moved. Click Add options to the store. If a message says the page has no Add to cart button connected to the store, put the store's Add to cart button back on the product page, then click Add options to the store again.

"Your checkout page was built before product options existed. …" Click Recreate checkout page so every order's options are checked. You can also do this from More actions (…) next to Products → Recreate Checkout Page.

"This is a gift card: …" or "This is a subscription: …" A gift card is sold at its face value and a subscription at its plan price, so their options can't change the price. Click Remove every option price, or keep the options without prices. See How to sell gift cards and accept them at checkout and How to sell subscriptions and manage subscribers.

Good to know

  • Translations. When your site has more than one language, a Product Option Translations section appears under the options. Fill in the option names, help texts, placeholders and choice labels for each language, or translate them with AI. Choices and prices are the same in every language.
  • Designing with the shopper's answers. If your product page shows a shopper's answer, for example their photo on a postcard, a switch above that element on the canvas shows it Before answers, with Sample answers, or Off. It only changes the editor preview.
  • Products with their own page. A product that opens on a custom product page needs that page to have the options too; the notice and Add options to the store check the right page. See How to give a product its own page and design.
  • AI. Autofill using AI can suggest options for a new product, and the AI Assistant can add or change options, for example "Add a gift message option to the Celebration Cake, up to 200 characters". See How to fill in product details with AI.
  • Import and export. Options travel in the option_groups column of a product file. See How to import products from a file (including Shopify).
Share

Related Articles

How to add a product

To add a product to your TeleportHQ store, open the E-Commerce panel from the editor's left sidebar, click + (Add Product), fill in Product Name and Price, check the Currency and Status, and click Create Product.

How to add sizes, colors and other variants

To sell a TeleportHQ store product in sizes, colors or other variants, open the product, click Variants under More ways to sell it, add up to 3 variant options with their values, set a price, stock and SKU for each combination, and click Save Changes.

How to give a product its own page and design

In a TeleportHQ store, every product opens on the standard product page; to show some products differently, open E-Commerce Settings → Product pages → Manage, create a custom product page (for example Made to order), choose its products and design it on the canvas, and those products open at its own address.

How to fill in product details with AI

In a TeleportHQ store, click + (Add Product) in the E-Commerce panel, then Autofill using AI, describe the product in a sentence and click Generate Product; the AI fills in the name, description, price, category, photos and more, which you review before clicking Create Product.

How to find and manage orders

In TeleportHQ, open Growth → E-Commerce → Orders in the editor's left sidebar to see your store's sales figures, search and sort every order, and click one to ship, refund, cancel, mark as paid or change its status; your live site's admin panel lists them too.

How to import products from a file (including Shopify)

To import products into a TeleportHQ store, open the E-Commerce panel, click More actions (…) → Import Products next to Products, drop a CSV or JSON file of up to 10 MB (a Shopify product export works as it is, variants included), check the preview and click Import; files with other column names can be mapped with AI.