How to Style Your Custom Affiliate Signup Form
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 the Affiliate Signup app block is already on a store page. If it is not, 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, and optional color overrides. Leave color fields blank to inherit your theme. Padding of 0 keeps the section's default spacing.
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 or sa-signup-layout-two
|
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) |
Form chrome
| Class | What it is |
|---|---|
sa-subHeader |
Title (h2) |
sa-affiliateForm |
The <form>
|
sa-formRow |
One field row |
rowType-text |
Text, tel, select, or derived username |
rowType-email |
Email (full width in two-column layout) |
rowType-url |
TikTok or Instagram URL |
rowType-checkbox |
Agreement and newsletter (full width in two-column layout) |
rowType-submit |
Submit button and form error (full width in two-column layout) |
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 |
Submit button (theme primary style) |
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.