Add embed code to product media section

[sraspa]

Is there a way or app that allows you to add an embed code (ie social media post) to the media section so on the product page, the social post would display in the media section on a product page?

[DaisyVo]

Hi @sraspa 

I see exactly what you're asking, and this is actually a really interesting use case. You want to embed a social media post (like an Instagram reel, Twitter post, or YouTube video) directly into the media gallery of your Shopify product page. Shopify’s built-in media section doesn’t natively support embedding external content, but here are some practical workarounds.

How to Add an Embed Code to the Product Media Section in Shopify

1. Use Metafields to Add the Embed Code

Shopify's Metafields feature allows you to store custom data, including embed codes, for each product. Here’s how:

• Go to Settings > Custom Data (Metafields) > Products.
• Click Add definition → Name it something like "Embedded Media".
• Set the content type to Rich Text or Single Line Text (to store the embed code).
• Save and go to your product page in the Shopify admin.
• Under Metafields, paste your embed code (e.g., an iframe from Instagram or YouTube).
• Modify your theme files (product template) to pull this metafield into the media gallery.

💡 This method requires light coding, but it's flexible and doesn’t need an extra app.

2. Use an App That Supports Embedded Media

If you’re looking for a no-code solution, some Shopify apps can help:

• Custom Fields by Bonify – Lets you add embed codes via metafields without coding.
• Page Builder Apps (like GemPages or PageFly) – These allow you to embed social media posts within custom-designed product pages.

💡 This is easier if you don’t want to modify your Shopify theme manually.

3. Manually Edit the Product Page Code

If you’re comfortable editing Liquid code, you can add an embed field to your product template:

• Go to Online Store > Themes > Edit Code.
• Open product.liquid (or main-product.liquid for OS 2.0 themes).

Find where product images are displayed and insert:

{{ product.metafields.custom.embed_code }}

• Save and ensure you’ve added the embed code inside the product’s metafields.

💡 Best for those familiar with Shopify Liquid. A developer can also help with this!

Which Option Should You Choose?

• For a quick fix: Use an app.
• For long-term flexibility: Use metafields.
• For full control: Edit your theme code.

If you need any other assistance, I am willing to help.
Best regards,
Daisy.