How can I add custom CSS and Javascript?

If you want to customize the app's design and functionality, you can add your own custom CSS and Javascript using one of the methods listed below..

Config

You can include custom CSS and JavaScript within each Product-Options config. This is the recommended way for extending the app's functionality without impacting other configurations or the rest of your theme.

CSS

The generated CSS is scoped to the specific config, the selectors are dynamically prefixed with the id of the config. E.g when you provide a custom style for the option label:

The saved CSS code will be scoped to the config using its ID:

This makes the styles to only apply to this specific config.

JavaScript

The Javascript code is only executed when this config is active (on the product page).

The code is executed after all options are rendered. This allows the use of document.querySelector to get a reference to an option. E.g:

var optionEl = document.querySelector('[data-option="NAME_HERE"]')

if(optionEl){
       console.debug('got optionEl', optionEl);

        // depending on the option type we have to use different selector
        var inputEl = optionEl.querySelector('input');

        if(inputEl){
            console.debug('got option input', inputEl);
            // set custom value
            inputEl.value = 'Hello World';
            // trigger input event for the app to update and re-render
            inputEl.dispatchEvent(new Event('input'));
        }
}

Note: the code is automatically wrapped by the app to only execute after the options:rendered event is executed, to learn more about events triggered by the app visit: JavaScript Events

Global

If you have common functionality and styles that apply to every config, or you want to change another style that is outside the options, e.g the options style on the cart page, then you can put the custom code in the global settings:

At the bottom you can enter custom CSS/JavaScript:

Note: this code will be added on every page, regardless if the options are displayed.