How to Customize Inquiry Squirrel

You normally should not need to customize Inquiry Squirrel, but if you'd like to play with the "look and feel" of the out-of-stock inquiry form you can do so using standard HTML "Cascading Style Sheet" (CSS) techniques.

When you install Inquiry Squirrel on your Shopify account it adds a file to your Theme's "Assets" folder called "inquiry_squirrel.css". You can exercise fine-grained control over the style of the out-of-stock inquiry form by editing that file and including a link to it in the "head" section your "theme.liquid" file.

Before you begin making changes to the "inquiry_squirrel.css" file, take a minute to familiarize yourself with the HTML of the out-of-stock inquiry form that you are going to be styling. Note that virtually every HTML element in the form has an 'id' attribute that you can use to target the element for styling using a CSS element id selector.
    
<div id="inqsq_modal_container" class="modal fade" tabindex="-1" role="dialog">
    <div id="inqsq_modal_dialog" class="modal-dialog" role="document">
        <div id="inqsq_modal_content" class="modal-content">

            <!-- modal header -->
            <div id="inqsq_modal_header" class="modal-header">
                <span id="inqsq_modal_title" class="modal-title">
                    <span id="inqsq_title" class="lead">Temporarily out of stock!</span>
                </span>

                <button id="inqsq_modal_x_button" type="button" class="close" data-dismiss="modal">
                    <span id="inqsq_modal_x_span">&times;</span>
                </button>
            </div>

            <!-- modal body -->
            <div id="inqsq_modal_body" class="modal-body">

                <p id="inqsq_message">
                    "We're sorry but this item is not in stock at the moment! " +
                    "Please enter your name and email address in the form below and " +
                    "click on the \"Notify Me!\" button and we'll let you know as soon " +
                    "as it's back in stock. " +
                </p>

                <!-- form -->
                <form id="inqsq_form" action="" method="post">

                    <div id="inqsq_first_last_email_div" class="form-group">

                        <div class="form-group">
                            <input id="inqsq_first_name_input" class="form-control" type="text" size="15"
                            'placeholder="First Name" required />
                        </div>

                        <div class="form-group">
                            <input id="inqsq_last_name_input" class="form-control" type="text" size="20"
                            'placeholder="Last Name" required />
                        </div>

                        <div class="form-group">
                            <input id="inqsq_email_input" class="form-control" type="email" size="30"
                            'placeholder="email@address.com" required />
                        </div>

                    </div>

                    <div class="modal-footer">
                        <input id="inqsq_submit_button" type="submit" class="btn btn-primary"
                        'value="Notify Me!" />
                    </div>

                </form>

            </div>

        </div>
    </div>
</div>
    
Your "inquiry_squirrel.css" file should be located in the "Assets" folder in the Theme editor section of your Shopify Admin account (Online Store, Themes, "...", Edit HTML/CSS, Assets). You can change the look and feel of your out-of-stock inquiry form by making changes to this file. The initial contents of the "inquiry_squirrel.css" are shown below.
    

#inqsq_modal_container {
    /* outermost container div */
}

#inqsq_modal_dialog {
    /* modal-dialog div */
}

#inqsq_modal_content {
    /* modal-content div */
}

#inqsq_modal_header {
    /* modal-header div */
}

#inqsq_modal_title {
    /* modal-title div */
}

.inqsq_title_span {
    /* title text span */
}

#inqsq_modal_x_button {
    /* button containing the close ("x") span */
}

#inqsq_modal_x_span {
    /* spain containing the close ("x") character */
}

#inqsq_modal_body {
    /* modal-body div */
}

#inqsq_form {
    /* out-of-stock form */
}

#inqsq_message {
    /* message paragraph ("We're sorry but this item is not in stock...") */
}

#inqsq_first_last_email_div {
    /* div that contains first name, last name and email inputs */
}

#inqsq_first_name_input {
    /* first name form input */
}

#inqsq_last_name_input {
    /* last name form input */
}

#inqsq_email_input {
    /* email form input */
}

#inqsq_submit_div {
    /* div that contains "Notify Me!" button */
}

#inqsq_submit_button {
    /* "Notify Me!" button */
}
    
As an example, if you wanted to make the 'submit' button in the inquiry form red, you could make the following change to the "inquiry_squirrel.css" file:
    
#inqsq_submit_button {
    /* "Notify Me!" button */
    background-color: red;
}
    

Changes you make to the "inquiry_squirrel.css" file will not have any effect on the appearance of the out-of-stock inquiry form until you include a link to the "inquiry_squirrel.css" file in your "theme.liquid" file.

Insert the following lines of code into the <head> section of your "theme.liquid" file:
    
<!-- inquiry squirrel css file -->
{{ 'inquiry_squirrel.css' | asset_url | stylesheet_tag }}
    

Once you've made the changes to your "inquiry_squirrel.css" and "theme.liquid" files, you can test them by navigating to a product page in your Shopify store, selecting a product variant that you know is out of stock, and making sure the out-of-stock inquiry form looks like you expect it to look. Note that you may need to clear your browser's history / cache / web content to see the changes (browsers cache CSS files).

Learn How to Use Inquiry Squirrel