How to Add a Custom Image Uploader to Your WordPress Site

Want visitors to upload their own photos and design a product right on your WordPress page — custom button badges, fridge magnets, business cards, photo prints or stickers? My Badge Studio lets you embed a live uploader and editor into any WordPress page or post, with bulk (multi-image) upload built in. It works with the block editor, the classic editor and every major page builder — no plugin to install, no code to write. Here's the full setup.

You'll create a custom template, turn it into a product, and paste one embed code into WordPress. That's the whole job.

Just want to embed an uploader? This guide is for adding an image uploader/designer to a page on any WordPress site. If you run a WooCommerce store and want the designer tied to a real product, cart and checkout, follow how to add a badge designer to WooCommerce instead. On Shopify? See the Shopify uploader guide. Not on WordPress at all — Wix, Squarespace, Webflow or plain HTML? See how to add an uploader to any website.

Step 1 — Create your custom template in the Studio

Open the Studio page and build a template at the exact finished size you sell — for example 3.5 × 2 inches for a business card.

Important: because a business card or flexible magnet is a flat product (not a domed badge with a separate rim), set the inner and outer dimensions to the same value. That gives you one clean, edge-to-edge print area with no rim.

Selling button badges or round fridge magnets instead? You don't need a custom template at all — just pick one of the ready badge and magnet templates (58mm, 44mm, 50×50mm and more). They already include the correct rim, so you can jump straight to Step 2 and select that size for your product.

Set your paper size and any other layout options, then save the template so it's ready to attach to a product.

Step 2 — Create the product in your Seller Dashboard

In the Seller Dashboard, create a new product and fill in:

1. Product name — what visitors will see (e.g. "Custom Business Cards").
2. Select Size for Product — choose the custom template you just made. This ties the uploader to your exact print size.
3. Maximum images customers can upload — the cap per order (for example 10). Set it to 0 for unlimited.
4. Other settings — configure pricing, description and so on as needed. For a pure WordPress embed these extra settings aren't required, so you can keep them minimal.

Save the product.

Step 3 — Copy the embed code and add it to WordPress

First, grab your embed code:

1. Open the Integration section of the dashboard — your saved product is listed there.
2. Click the product and copy its embed code.

Then paste it into WordPress using whichever editor your site uses:

• Block editor (Gutenberg): edit the page, click the + to add a block, search for Custom HTML, and paste the embed code into it. Preview or publish to see it live.
• Classic editor: switch from the Visual tab to the Text (HTML) tab and paste the embed code where you want the uploader to appear.
• Page builders (Elementor, Divi, Beaver Builder, WPBakery): drop in the builder's HTML / Custom Code widget and paste the embed code inside it.

That's it — the uploader and editor now appear right on your WordPress page, matched to your template size.

Not seeing it? A few themes or security plugins strip embedded code from the block editor. If the uploader doesn't render, paste the same embed code into a Custom HTML block (not a Paragraph block), or use your page builder's HTML widget, which always allows it.

Bulk upload — visitors can add multiple images at once

Bulk upload is fully supported. On your WordPress page a visitor can select and upload several images at once — up to the limit you set on the product — edit each one in the built-in designer, and then confirm their order. It's ideal for anyone ordering a set: a batch of team business cards, a wall of photo magnets, or a pack of stickers.

Upload-only mode (no editing interface)

Don't need the full editor? The Select Size for Product option also supports an image-upload-only mode. Visitors simply upload their images — no editing screen — which is perfect for print-ready artwork or when you just need the customer's file at the right size.

What you can sell with this

• Button badges & pin badges — round, square, oval or heart, using the ready badge templates (which include the rim).
• Fridge magnets — round photo magnets or flat square/rectangular magnets.
• Custom business cards — 3.5 × 2 in, edge-to-edge.
• Photo prints, stickers and labels — customer-supplied images at your exact dimensions.
• Any personalised flat product where the customer provides the artwork.

Tips

• Match inner & outer size for flat products (cards, magnets) so there's no unwanted rim.
• Set a sensible upload limit so orders stay manageable — or 0 for unlimited.
• Use upload-only mode when customers already have print-ready files.
• Use a Custom HTML block (not a paragraph) so WordPress keeps the embed code intact.
• Preview the page before publishing to confirm the size and upload cap behave as expected.

Ready to sell custom products on WordPress? Build your template, create the product, and paste the embed code — your site has a professional image uploader in minutes.