Advanced sign up form customization

You can customize the sign-up form design from within our app. If further customizations are required, we provide a mechanism to make changes through JS. 

Add JS config

On page load, any settings configured in admin are output onto the window.BISAData object. 

You may customize this configuration by adding a new essential script to the Head of the page in Script Manager. 

The following example can be used to override the modal heading when a customer successfully unsubscribes.

    window.BISAData = window.BISAData || {};
    window.BISAData.unsubscribe_success_heading = "You've successfully unsubscribed".

Customize Unsubscribe Modals

When a customer unsubscribe link in an email, there are redirected to your store. A modal is shown to confirm the unsubscription. 

To customize the display of the modal, you can add the following to a script in the header.

    window.BISAData = window.BISAData || {};
    window.BISAData.unsubscribe_success_heading = "Success";
    window.BISAData.unsubscribe_success_message = "You have been unsubscribed from back in stock alerts.";
    window.BISAData.unsubscribe_failure_heading = "There was a problem";
    window.BISAData.unsubscribe_failure_message = "Something went wrong when unsubscribing you from back in stock alerts."
    window.BISAData.unsubscribe_button_label = "Continue";

Manually show back in stock form

In instances where the product page is heavily customised, you may find the need to manually trigger the form display for a particular product or product variant. 

This can be achieved after the page has loaded with the following code snippet if the product ID was 97, e.g. on button click.

window.BISAData.forceShowFormForProduct({id: 97});

For a product variant, please pass by product ID and variant ID.

window.BISAData.forceShowFormForProduct({id: 97, variantId: 134});

Full list of configuration options

The following is a full list of configuration options that can be defined on

Field Type Notes
api_domain string
store_hash string BigCommerce store hash
number Current BigCommerce storefront.
currency_id number Current BigCommerce currency ID
customer_id number ID of logged in customer
customer_first_name string First name of logged in customer
customer_last_name string Last name of logged in customer
customer_email string Email of logged in customer
enable_newsletter_signup boolean Should an option be shown to allow customers to subscribe to the newsletter
form_type string 'inline' or 'modal' to select the type of form to use.
string A list of space separated classes to add to the modal trigger button and the form submission button
button_settings.override_styles boolean Set to true to add additional styles to buttons to customise the button look and feel further
button_settings.modal_text string Modal trigger button text
button_settings.submit_text string Form button text
button_settings.background_color string Button background color
button_settings.text_color string Button text color
button_settings.hover_background_color string Button background color on hover
button_settings.hover_text_color string Button text color on hover
button_settings.border_radius string Button border radius
string Form heading
success_message string Text to show on form submission success
string Label to show on newsletter subscription checkbox
string Text to shown near the submission button to add clarity to informed consent.
boolean When collecting newsletter subscriptions is enabled, should the first name be collected.
boolean When collecting newsletter subscriptions is enabled, should the last name be collected.
string DOM selector for the add to cart form.
string DOM selector for the product ID input on the add to cart form.
string DOM selector for any product variant options which are of type input
string DOM selector for any product variant options which are select boxes.
string DOM selector for the add to cart button.
string DOM selector for the quick view modal.
boolean When true, the form or modal trigger will be added next to the add to cart button rather than at the end of the form. It will also mean that the add to cart button will be hidden. 
string Modal heading on unsubscribe success
string Success message to show in modal when successfully unsubscribed.
string Modal heading on unsubscribe failure
string Failure message to show in modal when the customer could not be unsubscribed.
string Button text to dismiss unsubscribed modal
({id: string, variantId?: number | null) => void
Function to call for a particular product, or product and variant combination that will trigger the display of the modal and form.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us