Upload Field 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 upload field is 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 app, edit or create an Upload Field config:
Product form
App blocks are currently only available on the "Product" form. You can add a block on the product page or as a featured product on the homepage:
Display settings
In the "Display settings" section, make sure that the Upload location is set to Automatic. If your theme supports app blocks, you will see the "+ Add upload block" button, click on it to open the theme editor:
In the theme editor, make sure the product page is selected and the preview product is a product that has an upload field 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 "Upload-Lift Field" 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 upload field should appear at the new location:
Multiple app blocks
In most cases, the block settings can be left as is. If you want to use multiple blocks on single page, you can provide a unique Field name:
Make sure to save the theme editor. You can then connect the field in the upload app to a specific block by matching it's name:
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 are resetting file uploads / removing the upload field
Some themes re-render the full product section when the variant is changed. This can cause the app to disappear or reload. 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:
