Modal Button Embed

The Modal Button embed lets you attach the quiz to any existing button, link, or element in your Shopify theme. When a shopper clicks the element, the quiz opens in a modal overlay — no Theme Editor block needed.

How it works

The Gyde embed script (loaded via the Gyde Widget App Embed) scans the page for elements with a specific ID pattern. When it finds one, it automatically wires up a click handler to open the quiz as a modal.

The ID format is:

gyde_{quiz-handle}

For example, for a quiz with handle skin-type-quiz, the ID is gyde_skin-type-quiz.

Get your element ID

1. Open the quiz in the Gyde app.
2. Go to Quiz → Share → Embed Guide.
3. Select the Modal Button tab.
4. Copy the element ID shown.

Add the ID to your theme

Add the ID to any button, link, or element. You can do this via:

Option A — Theme code editor (Online Store → Themes → ⋯ → Edit code)

Open the template or section file where you want the button and add the ID attribute:

<button id="gyde_skin-type-quiz" type="button">
  Take the quiz
</button>

Option B — Custom HTML section in Theme Editor

Add a Custom HTML or Custom Liquid section to any page and paste the button HTML directly.

Option C — Any existing button

If you already have a button or link in your theme that you want to trigger the quiz, just add the id attribute to it:

<!-- Before -->
<button type="button">Find your product</button>

<!-- After -->
<button id="gyde_skin-type-quiz" type="button">Find your product</button>

Examples

<!-- Styled button -->
<button id="gyde_skin-type-quiz" type="button"
  style="background:#6366f1;color:#fff;padding:12px 24px;border:none;border-radius:8px;font-size:16px;cursor:pointer;">
  Take the Skin Quiz
</button>

<!-- Text link -->
<a href="#" id="gyde_skin-type-quiz">Not sure what to get? Take our quiz →</a>

Requirements

The Gyde Widget App Embed must be enabled in your Theme Editor (Online Store → Themes → Customize → App embeds → Gyde Widget). The embed script loads via the App Embed and handles the click wiring automatically.