Go Gift Cards
Knowledge Base
In this article
How to Add Custom CSS to the Popup
Home
Customization

Applying Custom CSS to the Recipient Details Popup Iframe

Edited

You may notice that the Recipient Details Popup does not inherit styles from your Shopify theme's stylesheet. This is by design. The popup operates within a secure iframe—an inline frame that isolates its content from the rest of your page.

This isolation ensures the popup's functionality is always secure and reliable, but it also means standard CSS from your theme cannot affect it. To solve this, our app provides a dedicated Custom CSS field designed specifically to inject styles directly into the iframe.

How to Add Custom CSS to the Popup

  1. Navigate to the Popup Editor:

    • From your app's dashboard, go to the section where you edit your gift card products.

    • Select the specific gift card product you wish to customize.

    • Click on the customization tab labeled "Popup".

  2. Locate the Custom CSS Field:

    • On the editor page, you will see a preview of the Recipient Details Popup.

    • Scroll down past the standard options to find the text box labeled "Custom CSS". Any code added here will be applied directly to the popup inside the iframe.