Hatsembly

Getting started

Four steps in your theme, then your hats, your patches, and your first product.

Before you start

  • A Shopify store with an Online Store 2.0 theme. Shopify's free themes, such as Dawn, all qualify.
  • Photos of your blank hats from your vendor, one per view: front, left and right panel, left and right side, and back. The front view is enough to start.
  • Your patch artwork as PNG or SVG files.

Set up your theme

Hatsembly draws your product live on the product page and puts the built picture in the cart. Both live in your theme. Hatsembly's Home page lists these four steps, marks the ones your theme already has as Done, and gives each one a button that opens the right place.

  1. Choose the product page template on Settings. Every product Hatsembly creates gets this template. To keep your other products as they are, first make a copy of the product template in the theme editor (Create template), then choose the copy.
  2. Add the Hat viewer block to that template. Add block opens the theme editor with the block added at the end of the main product section. Drag it above the variant picker in the left list, then save the theme.
  3. Turn on the Cart preview pictures app embed. Turn on opens the App embeds panel with the embed switched on. Save the theme.
  4. Turn on the Picture swatches app embed. The same, for the color swatches. Turn off any other swatch app on the same theme.

The two embeds are not in the theme editor's Add block list. They are on the App embeds panel, behind the icon at the bottom of the editor's left sidebar. If that panel says no installed app has embeds, reload the theme editor page.

Make your first product

  1. Blank Hat Catalog. Add a hat model and upload its photos for each colorway. Hatsembly removes the background and lines the photos up.
  2. Design Assets. Upload your patch artwork into a folder, add the patch colors you offer, and add any fonts you want for customer text.
  3. Product Builder. Pick a blank hat, place the patch, and add text fields if customers can personalize it. Check it on each model and color, then Save product.
  4. Create Shopify product. Hatsembly creates one Shopify product with a variant for every hat model and hat color, and a picture for each color. After you change the design, use Sync with Shopify.

Let customers filter by patch color

Each product has one variant per hat model and hat color. The patch color is chosen on the product page, so it is not a variant option. Instead, every product carries a Patch colors field that Hatsembly fills in. To offer it as a filter on collection pages, once, after your first product is on Shopify:

  1. Open the Search & Discovery app, then Filters, then Add filter.
  2. Under Product metafields, choose Patch colors (Hatsembly), and save.

Hat color needs nothing: it is a variant option, and Shopify's Hat color filter reads it as it is.