Embedding & Styling

You can display Spectre forms on your Shopify store in two main ways: the Theme App Block (no code) or Web Components (embed code for any page or site).

Theme App Block (no code)

The easiest way to add a form is with the Spectre Form block in the Shopify theme editor. You place the form visually—no copy-paste of code required.

Enable the app embed first

Before the form block works, you must enable the Spectre Forms app embed so the form scripts load on your storefront.

1. In Shopify admin, go to Online Store → Themes → Customize
2. Click Theme settings (or open any page)
3. Scroll to App embeds
4. Find Spectre Forms and turn it On
5. Save

Tip: The app embed loads the form CSS and JavaScript globally. You only need to enable it once.

Add the form block

1. In the theme editor, open the page where you want the form (e.g. Contact, Home, a custom page)
2. In a section, click Add block
3. Under Apps, select Spectre Form
4. In the block settings, choose your Form from the dropdown
5. Adjust Alignment (left, center, right) and Width (full, 50%, 33%, or custom) as needed
6. Optionally set Success message and Redirect URL to override the form's default success behavior
7. Use the color settings to match your theme (section background, heading, caption, label, input colors)
8. Click Save

Image needed: Screenshot of the theme editor with the Spectre Form block selected and its settings panel visible.

You can add optional Heading and Caption text above the form. The block uses your store's current locale by default; you can override it in the block settings if needed.

Web Components (embed code)

For more control—or to embed forms outside the theme editor (e.g. in a custom page template or another platform)—use the Web Components embed. You copy a snippet of HTML into your page.

Inline form

To show the form directly on the page:

<spectre-form form-id="YOUR_FORM_ID"></spectre-form>

Replace YOUR_FORM_ID with your form's ID (found in Get Embed Code in the Form Builder).

With a custom success message:

<spectre-form 
  form-id="YOUR_FORM_ID" 
  success-message="Thanks for your submission!"
></spectre-form>

Modal (pop-up) form

To open the form in a modal when the visitor clicks a button:

<spectre-form-button form-id="YOUR_FORM_ID">Contact Us</spectre-form-button>

The text between the tags is the button label. You can style the button with attributes:

<spectre-form-button 
  form-id="YOUR_FORM_ID" 
  button-background="#2563eb" 
  button-text-color="#ffffff"
  button-effect="hover"
  button-hover-background="#1d4ed8"
  show-close-button="true"
>Open Form</spectre-form-button>

Image needed: Screenshot of the Embed modal in the Form Builder showing the Inline Embed and Modal Button tabs with code examples.

Where to use web components

• Shopify: Add the app embed (Spectre Forms) so the scripts load, then paste the <spectre-form> or <spectre-form-button> snippet into a Custom HTML block or your theme's Liquid where HTML is allowed.
• Other sites: Host or link to the Spectre Form Builder web component assets and use the same HTML on any site that allows custom HTML or JavaScript.

Style templates

Each form can use a style template that controls the look of fields, buttons, and spacing. Choose one in Form Settings or in the theme block settings.

The theme block can override some colors (e.g. label, input background, input text) so the form matches the section without changing the global style template.

Custom CSS

For advanced styling, use the Custom style template and add your own CSS. Custom CSS can be applied via the App embed settings (theme-wide) or in Form Settings (per form), depending on your setup. Use CSS custom properties and the form's class names to target specific elements without breaking layout or validation.

Warning: Incorrect CSS can affect form layout or accessibility. Test on a staging theme or duplicate before changing live forms.