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 the rest of your theme.

CSS

You can target any CSS class that is used on the HTML output of the product options.

You can also use the AI assistant to generate custom CSS styles:

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.