How to Style Your Custom Affiliate Signup Form (Pro plan)
The Simple Affiliate signup block inherits your Shopify theme's font, input, checkbox, and button styles. You can also change layout and colors in the theme editor, or target CSS classes when you need more control.
This article assumes you have the Pro plan or above and the Affiliate Signup app block is on the installed signup page. To set it up, start with How to set up a custom affiliate signup form.
CSS scope and targeting rules
Scope every custom CSS rule under .sa-storefront-signup-root so the styles stay on this form and do not leak into other theme
sections.
Field IDs use the format sa-sf-{block-id}-{name} and change for each app-block instance. Target CSS classes, not IDs.
Theme editor settings
In the theme editor, click the Affiliate Signup block to open its settings. You can set Form columns, Padding, Width, heading and body visibility, Alignment, color/size, Heading margin, Description margin, and optional color overrides including submit-button background and text. Turn off Show heading, Show description, and Show login link to embed the form only. Leave color fields blank to inherit your theme. Heading size defaults to 48px; heading or description size of 0 keeps the theme type. Padding of 0 keeps the section's default spacing. Theme heading and paragraph margins are reset so Heading margin is the space under the title. Description margin is the space between the description and the form. The submit button keeps the theme button shape. Button Alignment is left, center, or right. Button padding of 0 keeps the theme button padding. Set button colors when the theme button does not contrast with the page.
Those block settings are covered step by step in How to set up a custom affiliate signup form. The tables below list the CSS classes for further styling.
Targetable CSS classes
Wrappers
| Class | What it is |
|---|---|
sa-storefront-signup-host |
Shopify app-block host |
sa-storefront-signup-block |
Width and centering wrapper (data-sa-sf-width) |
sa-storefront-signup-frame |
Background, text color, and padding |
sa-storefront-signup-root |
Form root. Also has sa-signup-layout-single, sa-signup-layout-two, or
sa-signup-layout-three
|
sa-storefront-signup-step |
One screen (form, unavailable, or post-submit message) |
Layout
| Class | What it is |
|---|---|
sa-signup-layout-single |
One column |
sa-signup-layout-two |
Two columns (collapses to one below 749px) |
sa-signup-layout-three |
Three columns (collapses to one below 749px) |
Form chrome
| Class | What it is |
|---|---|
sa-subHeader / sa-sf-heading
|
Title (h2) |
sa-sf-lede |
Description paragraph under the title |
sa-affiliateForm |
The <form>
|
sa-formRow |
One field row |
rowType-text |
Text, tel, select, or derived username |
rowType-email |
Email (full width in multi-column layouts) |
rowType-url |
TikTok or Instagram URL (inside a social platform card) |
sa-sf-social |
TikTok and Instagram section (full width in multi-column layouts) |
sa-sf-social-platforms |
Platform grid: stacked in single-column layout, two columns in two- or three-column layouts (one column below 749px or when only one platform is shown) |
sa-sf-social-platform |
One platform card (URL, username, followers) |
sa-sf-social-meta |
Username and followers row (two columns, stacks below 749px) |
rowType-checkbox |
Agreement and newsletter (full width in multi-column layouts) |
rowType-submit |
Submit button and form error (full width in multi-column layouts) |
Inputs and theme classes
These class names match standard Shopify theme classes (such as Dawn) so theme styles apply automatically. The sa-*
classes let you target this form only.
| Class | What it is |
|---|---|
field |
Wrapper around a labeled input |
field__label |
Field label |
field__input |
Text input, select, or phone country button |
checkbox |
Theme checkbox |
sa-formCheckbox |
Same checkbox, scoped to this form |
sa-checkboxRow |
Checkbox and its label on one line |
button |
Theme button |
button--primary / sa-sf-submit
|
Submit button (theme button shape, block padding when set, plus block button colors when set) |
Phone field components
| Class | What it is |
|---|---|
sa-sf-phone |
Phone field row |
sa-sf-phone-row |
Country control and number input |
sa-sf-phone-country |
Country picker |
sa-sf-phone-country-btn |
Flag and dial button |
sa-sf-phone-flag |
Flag image |
sa-sf-phone-dial |
+1-style prefix |
sa-sf-phone-country-panel |
Dropdown panel |
sa-sf-phone-country-search |
Country search |
sa-sf-phone-country-list |
Country list (li items have data-iso) |
Errors and validation state
| Class | What it is |
|---|---|
sa-sf-form-error |
Banner under the submit button |
sa-sf-field-error |
Per-field error message |
sa-sf-invalid |
Added to a row when field validation fails |
Custom CSS example
Add rules to your theme's base.css or theme.css, or to the Custom CSS setting for that section in
the Shopify theme editor:
/* Custom letter spacing for form title */
.sa-storefront-signup-root .sa-subHeader {
letter-spacing: 0.04em;
}
/* Remove border radius on email field */
.sa-storefront-signup-root .rowType-email .field__input {
border-radius: 0;
}
/* Force uppercase text on primary submit button */
.sa-storefront-signup-root .button--primary {
text-transform: uppercase;
}What you can and cannot change with CSS
Elements that cannot be edited in CSS or the theme editor
| Element | Reason |
|---|---|
| Field selection, order, and requirements | Controlled in Simple Affiliate under Settings > Signup |
| Form copy and translations | Title, description, labels, placeholders, submit text, and error messages are managed in app settings |
| TikTok and Instagram usernames | Read-only fields filled from the entered URLs |
| Agreement wording and legal links | Terms, newsletter wording, and destination URLs are managed in app settings |
| Form and field IDs | System-generated and scoped with the block ID (sa-sf-{block-id}-email, and so on) |
sa-storefront-signup-config |
Hidden JSON configuration script, not part of the visible UI |
.sa-sf-phone-country-select |
Visually hidden native <select>. The visible picker is the button and panel |
| Host width lock |
Shopify wrappers (.shopify-block, .shopify-app-block, host, and form) are forced to full section width
|
| Password fields | There is no password field. Affiliates authenticate later through customer accounts |
Elements that inherit theme styling
Leaving block color settings blank keeps your theme defaults. Setting padding to 0 keeps the section's default spacing.
| Element | How it inherits theme styles |
|---|---|
| Text, email, URL, and tel inputs | Via .field, .field__label, and .field__input
|
| Submit button | Via .button.button--primary
|
| Checkboxes | Via .checkbox
|
Form title (h2.sa-subHeader) |
Uses the page heading font, body font, and block text color when set |
| Intro paragraph | Matches standard page paragraphs, plus block text color when set |
| Agreement and newsletter label text | Matches standard page body text, plus block text color when set |
| Agreement links | Matches standard theme link styles |
| Phone flag, dial prefix, and country list | Uses font: inherit from the surrounding field |
| Country search input | Uses font: inherit from the surrounding field |
Important Rules to Remember
-
Scope: Prefix custom CSS with
.sa-storefront-signup-root. Do not target field IDs. - Fields: CSS cannot add, remove, or reorder fields. Change field visibility and required status in Settings > Signup.
- Colors: Leave theme-editor color overrides blank if you want the form to match your store's default background, text, inputs, and buttons.