How do I add custom HTML for Bandcamp embeds in the Dawn theme?

Store Design
,

Topic summary

A user wants to embed Bandcamp music players on their Shopify store using the Dawn theme without switching themes. They’re looking for a way to add custom HTML.

Initial Solution:

  • GemPages suggests using Dawn’s built-in Custom Liquid feature to insert the embed code
  • The user successfully implements this approach using HTML/iframe code with absolute positioning

Responsive Design Issue:

  • The embed displays correctly on desktop but doesn’t adapt properly on mobile devices
  • Fixed positioning causes the player to remain in the same location regardless of screen size or window resizing

Proposed Fix:

  • GemPages recommends adding CSS media queries in the theme.liquid file
  • Specifically, using @media (max-width: 767px) within <style> tags before the </head> tag to create mobile-specific styling

Alternative Approach:

  • EmbedAny app offers a no-code solution supporting 800+ platforms including Bandcamp
  • Users can simply paste links and format them as italic to auto-generate embeds
  • Includes a free trial and step-by-step guide

Status: The discussion remains open with the responsive design challenge partially addressed but not yet fully resolved.

Summarized with AI on October 24. AI used: claude-sonnet-4-5-20250929.
1

I am wanting to figure out how to use HTML with my website. I want to use embeds from a music website called Bandcamp on pages and I do not want to change the theme I have currently. The theme I am customizing is “Dawn”. Currently, I can’t find an option or section that allow me to add my ‘custom HTML’. I would love to add a Bandcamp player somewhere on each of these pages

2

Hello @SonoSpec

I would like to give you some recommendations to support you

Let’s try using the Custom Liquid feature of the Dawn theme:

GemPages_0-1668501864436.png
GemPages_0-1668501864436.png1916×964 87.4 KB

If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team

3

Hey @GemPages , thanks for the tip. It seems to have worked and I’ve further positioned the embed with an HTML code (

<iframe style=“border: 0; width: 475px; height: 475px;”). It website’s pages look great on desktop, however, the mobile version looks off, since the code locates it in a fixed area to where it does not adjust its size and position when transitioning to mobile. How would I be able to fix this issue for it to look proper on both desktop and mobile without having to insert another custom liquid? Would there maybe a separate CSS I can look into for strictly mobile?

4

The embed also does not adjust its size and position and stays in the same location when minimizes the tab window.

5

Hello @SonoSpec

You can add HTML code to the Custom Liquid field in the theme setting. If you want to adjust the separate size for the mobile, you can Go to Online Store → Theme → Edit code > Open your theme.liquid theme file > paste code before . Let’s use the tag and @media (max-width: 767px) to apply your code for mobile.

6

Hi @SonoSpec

Do you know that now you can easily embed Bandcamp tracks or albums at your desired place? You do not need to use any coding rather you can just paste a link, make it italic, save changes and it will be converted into Bandcamp track or album within a few seconds. It just not only work with Bandcamp rather it supports 800+ platforms including YouTube, Instagram and TikTok.

Enjoy a FREE trial.

App Link: Embed Any Social Media w/ Link - Embed Interactive Content on Shopify | Shopify App Store

Step by Step Guide: How to Embed Bandcamp Music on Your Shopify Store Using EmbedAny

Need any help. We’re here to help.

Regards,
EmbedAny Support