Start here

From download
to your first mockup.

These quick-start steps cover the essentials. Follow the release notes included with your software for version-specific details.

WordPress + WooCommerce

1. Back up your site and test the installation on staging.
2. Install and activate WordPress, WooCommerce, and the Hat Foundry plugin.
3. Add hats under Hat Studio, or use its bulk import tools.
4. Create the WooCommerce product that will price your custom hats. Set its price and variations if needed.
5. Choose that product in Hat Studio settings.
6. Add the Hat Foundry block or

   Free maker tool

   Hat Mockup Studio

   Upload your artwork, drop it on a real hat, and download a client-ready mockup.

   Your mockup appears hereUpload your patch artwork and pick a hat to begin.

   Download mockupDownload spec sheetCopy imageReset placement

   Everything happens in your browser. Your artwork is never uploaded or stored unless you add it to the cart.

   1Your patch artwork

   Drop your artwork hereTransparent PNG works best · JPG, WebP and SVG also work

   2Pick a hat

   Or use your own hat photoShoot straight on with the patch area flat to camera

   

   3Patch shape

   Die CutRoundedSquareCircleWide OctagonOval

   Fill enclosed gaps with the patch color

   4Base material

   Bright WhiteRawhideBlack

   5Cut line

   Finished patch width (inches)

   Cut offset

   The base material outside your artwork, in real inches.

   6Nudge the placement

   Size

   Across

   Up / down

   Rotate

   7Compare hat colors

   Select hats and export them with the same design.

   Select allClear

   Download comparison sheetDownload each separately

   8Order these Hats

   −+

   122550100250500

   Quantity

   Each

   Order total

   Add to cart

   Artwork, specifications, and the mockup attach to the cart item.

   Client said yes? Order the Hats.

   No minimums and production-ready order details.

   shortcode to a page.
7. Run Hat Studio → Settings → Test connection, then complete a guest test order.

Shopify

1. Duplicate your theme and preserve a copy of the original files.
2. Install the supplied section using the instructions included with the download.
3. Add the section to your page template in the theme editor.
4. Load your hat images and configure patch-color blocks.
5. Connect the builder to your configured Shopify product.
6. Review its prices, variants, artwork attachments, and cart behavior on the duplicate theme.
7. Publish after your test order succeeds.

Before going live

Test on desktop and mobile. Check that the correct hat, patch color, dimensions, original artwork, and mockup reach the order. Confirm tax, shipping where applicable, and any quantity discounts in checkout.

Something not working?

Note your software version, page URL, exact error text, and whether it happens in a private browser window. On WordPress, include the connection-test result. Those details make a problem much easier to trace.