OptionfierOptionfier

Add Optionfier to your theme

By the end you'll have the Optionfier block on your product page template, so every product with a published option set shows its custom options in the right spot. You'll also know where a Build-a-Box shows up, because that one works differently and trips people up.

This is the one setup step you can't skip. Optionfier doesn't inject itself into your theme, and it doesn't rewrite your product template behind your back. You place the block, you decide where it sits.

Add the options block

  1. In your Shopify admin, go to Online Store > Themes.
  2. Click Customize on your active theme. The theme editor opens.
  3. Switch to your product page template using the template dropdown at the top of the editor. Any product will do; you're editing the template, not that one product.
  4. Click Add block and type Optionfier into the search field. Three blocks come back on a product template. The one you want here is Optionfier: Options.

Screenshot: theme editor with the Add block panel open and "Optionfier" typed in the search field, the "Optionfier: Options" block visible in the results

  1. Add the block, then drag it to where the options should appear. Most stores put it directly above the add-to-cart button, so customers fill the fields in before they buy. Below the price works too.
  2. Optional: with the block selected, the right sidebar carries its settings, grouped under Typography, Colors, Layout and Buttons & Swatches. Fonts, text and border and accent colors, padding, gaps, field radius, button colors, swatch size. It's all there, so the fields can match the rest of your product page instead of looking bolted on. Two fields sit above those groups, Product form ID and Product price selector. Leave them blank unless Optionfier can't find your theme's add-to-cart form or price element on its own. When that happens, the block shows a notice in the theme editor telling you which one to set.
  3. Click Save.

Screenshot: the block placed above the add-to-cart button, with its styling settings open in the right sidebar

That's it, and you only do it once. From here on the block automatically renders the options for any product that has a published option set connected in Optionfier.

Nothing showing up yet?

That's expected if you haven't built an option set. The block renders nothing on products that don't have one. Three things have to be true for options to appear on a product page: the block is on the template, the option set's Status is toggled to Published, and it's connected to that product.

Where Build-a-Box appears

Build-a-Box uses a different block, and one of its three surfaces needs no theme editing at all.

Its own page, free. Every published box with a parent product connected gets a standalone page on your store, wrapped in your theme's header and footer. The URL is the box's handle under the app proxy path, so a box named "Build your own six pack" lives at /apps/optionfier/box/build-your-own-six-pack. The handle gets generated from the box name the first time you save, and you can change it after.

To reach it, open the box editor and click Box page in the Storefront layout card. That opens the layout composer, and the Box page panel inside it holds the URL handle field along with Open page and Copy link. Copy the link, put it in a menu, drop it in a campaign email. No block, no theme editor.

Your product pages. Add the Optionfier: BYOB block to your product page template, exactly the way you added the options block above. It renders the builder for whichever box is connected to that product as its parent product. The block has three settings that matter: Presentation (Inline or Popout (drawer)), Add to cart (Use the theme's button or Show my own), and Sync the theme price, which makes your theme's displayed price follow the box total as the customer builds.

Any other page. A block with the same Optionfier: BYOB name shows up on non-product templates: a landing page, a collection page, a page you build just for this. It's a different block with different settings, because there's no product to key off. You paste the box's ID into its Box ID field. Grab that ID with the Copy ID button in the layout composer's Other pages view.

There's also an Optionfier: BYOB Link block, a button for product pages whose Button label defaults to "Build your box". It opens the drawer if a popout box is on the page, scrolls to the builder if an inline box is on the page, and sends the customer to the box page if neither is there.

Screenshot: theme editor Add block panel showing both "Optionfier: BYOB" and "Optionfier: BYOB Link" blocks in the results

What the customer sees

On a product with a published option set, the option fields render inside your product page, in the position you picked, styled by the block settings you set. Customers fill them in, add to cart, and their answers ride along to the cart and the order.

On a Build-a-Box product, they get the box builder itself: the pool of products you defined, a running count of picks, and an add-to-cart button for the finished box.

If you're on a theme that doesn't support Shopify's bundle format, bundle components won't display as indented sub-items in the cart. Everything still adds correctly and the pricing is still right, it just looks like a flat cart line.

Go deeper