Admin extension support for Add New Product page

Shopify Apps
1

How to target Admin extension for the Add New Product Page ?

Admin extension target is available for Product details, Product index, Product index Selection and Product variant index pages as per https://shopify.dev/docs/api/admin-extensions/unstable/extension-targets

But is there a way to target the Add Product page ? I don’t see any docs for that.

add_new_product_page
add_new_product_page1853×1010 106 KB

I want to target the Media section (preferably) of the Add Product page and insert my app-extension module.

What are my options here ? Can a Theme extension help in this case ? Any help/suggestion is appreciated, Thanks.

2

Hello @dibya-cels ,

So there are only two options that you can perform to insert an app-extension-module into the media section of the product page.

1.Admin Extension Points

As of now, Shopify’s extension points don’t include a specific extension point for targeting the Media section of the product page directly, While there is not a pre-defined extension point currently for the media-section at the moment, you can try achieving your goal by targeting a broader area within the product details page and then positioning your app block within the Media section using JavaScript and CSS,
But Shopify is keen on updating their platform and may provide “extension points” that target the media-section of the product’s page in the future.

2.Theme Extension

You can create a custom add block section on your theme extension for your media section within your store that includes your app-extension module and position it on your media-section .

Steps:-

  1. Design Your App-Extension Module

Create the module that you want to insert into the Media Section, it can include features like images , image galleries ,
videos related to your product etc.

  1. Create a Custom Section or Block

a. Access Theme Customization:-
First of all Login in to your Shopify Admin Dashboard and find your way to the Online Store and then navigate to Themes section.

b.Edit Theme Code:-
Select the theme you would like to modify and then click on the “more actions” button and Select “edit code” from the dropdown to access the Code Editor.

c.Create a New Section or Block:-
On the left side you can see the “edit code” page structure which has all the templates, sections, Layouts that your theme uses.Create a new section where you can insert your app-extension module. You can achieve this by clicking on the “Add a new section” button.
Write the liquid code for your “Media-section” and style it with HTML,CSS and Java script depending on how you want your module to look and work.

  1. Integrate Your Module with Product Template

a. Finding Product Template:
On the left hand side of the “edit code” page structure , find the product’s template file (product,json ,product.liquid or similar) inside the “Sections” folder.

b. Add Your Custom Section or Block:
Inside the Product template file, insert/include the custom section you created earlier by rendering the section in the liquid code wherever you desire it to appear on the product page.

  1. Customize Module Placement

a.Identify Media Section:
Write a Liquid Code to identify your Media Section in the product details page , it should include targeted HTML elements and classes that are used.

b.Position Your Module:
Create the desired css styling to place the section you created with your default “Media-section”, you can include margins, paddings etc.

  1. Test Your Integration
    Finally, test the following integration and publish your changes, to make the “Media-section” available on your Shopify Store.
3

I think Shopify is not recommending us to “Edit Theme Code” or “Modify Asset” as per https://shopify.dev/docs/apps/build/online-store/asset-legacy

Coming to the “theme-app-extension” - I think it is for the store, not for the shopify admin pages. (I may be wrong here).

Just to be clear - We don’t want to modify anything in the storefront or in the store admin (like editing theme for a store), only interested in the Shopify Admin section - Product Details or Add Product Page (please refer the screenshot attached with the question). We want our App features to be displayed on these Admin pages. So far what we have found, there are only two options Admin-Actions and Admin-Blocks (https://shopify.dev/docs/apps/build/admin))

4

Hello @dibya-cels
Sorry for the misunderstanding.

So, as of now(latest updates) and looking at all the APIs that are available we reached the conclusion that targeting a custom extension module directly into a specific section in this case “media section” of the “Add Product” page is not allowed. Even Shopify’s extension points do not allow for manual/arbitrary placement of user’s custom UI components within specific sections.

However you can use the “Admin UI Extensions” to add custom functionality to your product details page, though not within the media section of the “Add Product” Page.

5

Right. Even with Admin UI extensions, what we have found so far is that we can only use the Polaris components in Admin Actions or Admin Blocks. Rendering custom UI components is prohibited in these sections by shopify.