OKAY I WANT TO ADD THIS HAND EXTENSION INSIDE THIS PRODUCT MEDIA SECTION , IM UNABLE TO UNDERSTAND HOW TO DO IT. https://www.brilliantearth.com/Luxe-Secret-Garden-Diamond-Ring-(3/4-ct.-tw.)-Gold-BE1D6352-12137268/ IN HERE THEY DID THE SAME THING UNABLE HOW DID THEY ACHIEVE THIS . PLEASE HELP
Topic summary
Goal: Place a âhandâ graphic inside the product media gallery to preview rings on a hand (image attachment illustrates the desired overlay).
Context: The product images are inserted dynamically by an app extension (a Shopify app component that injects content into theme areas). Because of this, the hand image cannot be added manually via the Shopify Admin media uploader.
Early suggestions:
- Add a custom absolutely positioned div over the main product image in media-gallery/main-product.liquid.
- If static, simply upload the hand image as product media. Requests were made for a preview link/password.
Clarification: OP is new to Shopify and seeks the correct approach, not code. Media is generated by the app extension; needs a programmatic solution to place the hand image within the gallery sequence.
Latest guidance (most relevant):
- The app must upload the hand image via the Shopify Admin GraphQL API so it becomes a real product media item.
- The app should then set its position/order in the product media gallery. Admin override isnât possible for dynamically generated media; ordering must be controlled by the app.
- Reference learning material for making GraphQL requests was provided.
Status: No confirmation of implementation; solution proposed, discussion effectively open.
Add a custom <div> in media-gallery or main-product.liquid and absolutely position your hand graphic over the main image. I used this approach in a recent client build, just position:absolute; inset:0; pointer-events:none;.
@aditya.dolas is this hand added via description? you can add hand in media section, can you please share your website page link?
hello , this hand you see is done via theme extension and added in a demo theme as i am building it first time , and its in a local dev right now.
1 Like
@aditya.dolas you can share the preview link if it is online
@aditya.dolas this is admin link, we need preview link of the theme
https://ethical-9785.myshopify.com/ is this preview link
@aditya.dolas password to view page?
1 Like
password â> Aditya
How to place the hand image INSIDE the product media section
To make the hand show inside the media gallery you must upload that hand image as a product media file for that product.
Shopify will automatically place every uploaded media file inside the product gallery.
Steps:
-
Go to Shopify Admin â Products
-
Open the product
-
Scroll to Media
-
Click Add media
-
Upload the hand-with-ring image
-
Drag it to the position you want (e.g., after the main ring images)
Thatâs it.
Shopify will automatically place it inside the product media slider along with your ring photos.
If this is only for an image just put the image in the products media.
@aditya.dolas Making interactive CUSTOM media widgets inside OTHER sections/blocks is an advanced development way beyond the scope of the forums.
DIY, learn here: https://shopify.dev/docs/storefronts/themes/architecture/blocks/app-blocks
Others are not hear to teach you full web development if you donât know how to do this, nor want to go out and learn development then just hire someone.
At minimum you really need to be respecting other peoples time by showing your work so far or providing detail upfront making sure others can see or replicate things. And not buring the ask or details after an image nor using CAPCASE for everything in a description.
If your a developer then use the development forums.
But come correct as just asking others the rude way you are now just to try and get them to do your work for you will get you ignored or worse.
Iâm working with Shopify for the first time and still learning, so apologies for any confusion earlierâI accidentally posted in the wrong section instead of the developersâ area.
However, I did ask my question politely, and there was no need to assume otherwise or demean the conversation. I wasnât asking anyone to write my code; I simply wanted clarity on the correct approach.
Thanks for taking the time to reply. I think thereâs a small misunderstanding, so let me clarify for context.
In my case, the hand image isnât something I can manually upload through the Shopify Admin.
The product media is being added dynamically through an app extension, and the ring images are generated and positioned based on the extensionâs configuration. Because of that, the normal âadd media â upload imageâ method doesnât apply.
What Iâm trying to understand is the correct programmatic approach to place the hand image within the product media sequence that the app controls, rather than adding it manually.
Just sharing this so others learning app extensions can also understand the difference between static uploads and dynamically managed media.
Thanks again for the input.
Hey! Thanks for clearing things up; that actually helps a lot. Since your product images are coming from an app extension and not from the normal Shopify media uploader, the solution is a bit different. Because your app extension is generating the ring photos automatically, Shopify treats them as dynamic media, not manual uploads.
How to fix it
1. Your app needs to upload the hand image through the API. The app must send the hand image to Shopify using the Admin GraphQL API. This turns it into a real product media item.
2. Then the app must insert the hand image at the right spot. The app can control the order by telling Shopify which media goes where.
Since the media is generated automatically, Shopify Admin canât âoverrideâ it.
Only the app that creates the images can insert the hand picture in the right sequence.
Hope this breaks it down in a simple way! If you want to watch âHow to Use the Shopify API and Make GraphQL Requestsâ it explains GraphQL API calls clearly, and it will help you understand how our app needs to upload the hand image into Shopify.
