Docs

What Vinyl Designer does

Shoppers design vinyl lettering on your store — text, font, colour/finish, size, and extras — with a live preview and price. You get cut-ready order data in WooCommerce.

Try the live demos

Open a real storefront designer — same plugin your customers use. Try typing text, picking a font, toggling measurements, and walking through the step wizard on a phone-sized window.

1. Subscribe

Create an account, open Pricing, choose Monthly or Yearly (yearly shows the % and £ you save), then checkout with Stripe or PayPal. Your license key is emailed and shown in the portal. Some plans also offer a one-time / lifetime purchase.

• Starter — 1 published designer, 1 site
• Pro — 3 published designers, 1 site
• Agency — 5 published designers, 5 sites

2. Activate in WordPress

1. 1
   Download the plugin ZIP from Portal → Downloads.
2. 2
   Install & activate it in WordPress (Plugins → Add New → Upload).
3. 3
   Open Vinyl Designer → License, paste your key, and activate.

The key binds to your site URL. Without an active license the storefront shows as unavailable. Publishing more designers than your plan allows keeps extras as drafts until you upgrade or unpublish.

3. Create a designer profile

Go to Vinyl Designer → Designers and create a profile linked to a WooCommerce simple product. Each profile is a complete ruleset for one storefront experience.

• Product — the WooCommerce product that receives the custom cart price
• Layout & colour picker — how the designer is arranged and how colours are chosen
• Text style — bold, italic, letter spacing, mirror (optional defaults)
• Sizes & pricing — presets or any letter height, plus your price formula
• Preview backgrounds — optional “preview on” colours (dropdown on the storefront)
• Custom CSS — optional styles scoped to that designer

Use the checklist on Settings to track fonts, colours, and your first published designer.

4. Layouts

Pick one layout per designer:

• Side by side — preview left, options right (best on desktop)
• Stacked — large preview on top, option panels below
• Step wizard — guided flow: Text → Style → Buy

Colour picker modes: grid, swatches only, or dropdown (best when you have many colours).

5. Mobile options

On each designer’s Layout section you’ll find mobile toggles. Turn on what helps your shoppers:

• Sticky preview on mobile — keeps the preview visible while scrolling through options on phones/tablets.
• Show measurements by default on mobile — starts with dimension callouts on (shoppers can still turn them off; their choice is remembered).
• Tap preview to enlarge — opens a larger preview popup on mobile so lettering isn’t cramped. Look for “Tap to enlarge” on the canvas.

On phones, opening the font or colour dropdown does not auto-open the keyboard — the keyboard only appears when they tap a text field (or search themselves).

6. Fonts, colours & finishes

Fonts — add Google Font families (with weights) or upload TTF, OTF, WOFF, WOFF2. Enable only what you want on the storefront. Shoppers get a searchable picker with live “Aa” previews.

Colours — hex values, optional price modifiers, sort order, and category assignment.

Colour categories — customer-facing finish names (e.g. Gloss, Matte, Holographic). Each category can use a preview effect: solid, gloss, matte, or animated holographic on the canvas.

Preview backgrounds — optional list of colours to show lettering against (e.g. vehicle paint). On the storefront this is a compact dropdown labelled “Preview on”, plus None.

7. Materials & text effects

Materials — optional picker (e.g. Orafol, 3M) with a fixed £ or % add-on. Enable under the designer’s Materials section and add rows your shoppers can choose.

Text effects — optional outline and hard-offset shadows. Choose which effect types are available, defaults (on/off, size, gap, colour), and whether shoppers can pick a colour. Effects can add a price modifier too.

8. Sizes & pricing

First choose how shoppers pick a size:

• Fixed size list — presets (e.g. 50mm, 75mm, 100mm) with labels, dimensions, and optional character limits
• Any letter height — shoppers type a letter height in your allowed range; width and overall size calculate from their text

Then choose how price is calculated:

• Fixed — set a price per size preset
• Height / Width / Area — base + dimension × rate, plus colour / material / effect modifiers
• Minimum price — optional floor so small pieces still make sense
• Sold as pair — price and label for two stickers when enabled

The UI price is a live preview. The cart total is recalculated on the server when they add to cart.

9. Place the shortcode

Copy the shortcode from the designer card and paste it into a page or product:

• [vinyl_designer] — default / first available designer
• [vinyl_designer id="123"] — specific profile
• Optional attributes: product_id, layout, color_picker, embed="1"

Multiple shortcodes on one page are limited by your plan’s designer slots.

10. What arrives with the order

Each cart line stores the design: text, font, style, colour, finish, size, letter spacing, material, effects, mirror, and pair/single. Colour and black (cut) PNG previews — plus SVG where available — are attached for production, visible on the order in WooCommerce admin (HPOS compatible).

Shoppers can toggle Show measurements on the canvas to confirm finished width, height, and descenders before buying.

11. Download updates

When we publish a new build, we email a “new version available” notice. Download the ZIP from Portal → Downloads while your subscription is active. Emails never include a direct download link.

Requirements

• WordPress 6.0 or newer
• WooCommerce 7.0 or newer (must be active)
• PHP 7.4 or newer
• Outbound HTTPS so the plugin can reach the license API
• An active Vinyl Designer subscription or lifetime license
• ionCube Loader on the host — required for commercial plugin ZIP builds

Questions? See the FAQ or contact us.