Product Options Block in Theme Editor
New Shopify themes that support Online Store 2.0 allow you to use app blocks to customize the location where the options are shown on the product page.
App blocks supported
In the app, navigate to the "Settings" page. Check if app blocks are supported on your theme:
Adding an app block
In the "Location settings" section, make sure that the Product options location is set to Automatic. If your theme supports app blocks, you will see the "+ Add app block" button, click on it to open the theme editor:
Theme editor
In the theme editor, make sure the product page is selected and the preview product is a product that has custom options configured. If that's not the case, select your desired product via the "Change" link:
In the Product section, click on "Add block":
In the "Apps" section, you can find the "Live Product Options" block type:
When you've added the block, you can drag it onto your desired location.
In our case we've placed it between the variant picker and quantity selector:
The theme editor should reload and the options should appear at the new location:
Home page support
If you add a "Featured product" section on your homepage. Make sure to also add the app block:
Common issues
Variant changes is removing the app
Some themes re-render the full product section when the variant is changed. This can cause the app to disappear. The solution is to make sure that the app block is placed via the theme editor (as described above).
Most themes will then respect the app block and not re-render it when the variant is changed.
Multiple product templates
When your theme has multiple product templates, you have to make sure that the app block is added to all of them, or at least the ones that make use of the app.
In the theme editor's top-center navigation, select "Products"
Then select from your available product templates:
Fixed product in block
When the app block is placed on a section, the Shopify theme editor will automatically link the "product" variable to use the current product from the Template:
Avoid changing the product to a fixed product:
This will make the block only work for that specific product, which in most cases is not what you want.
To make it work for all products, click on the selected product and select "Connect dynamic source":
The theme editor will then automatically suggest the Template product:
