How to customize the style of Jilt’s signup forms

List building is crucial for eCommerce stores and one of the most effective methods for acquiring subscribers is through pop-up forms. Jilt has a built-in signup form feature available to all customers that makes it ultra simple to add pop-ups to your site in minutes. 

Jilt’s signup forms are still a beta feature, and as of now, only allow for limited customization (as you can see in the screenshot below).

Jilt's signup form feature.

However, there is a way you can customize how your forms look to better attract a visitor’s attention and encourage them to give you their email address. And there are some very compelling reasons why you should take a little time to customize your form’s appearance.

Change things up to avoid ad blindness

Your customers see ads and pop-ups all the time, so it’s ideal if your signup form is different and breaks the monotony. The more your form stands out, the more likely your customers are to stop, pay attention, and consider giving you their email address.

Match your branding

It’s always a good idea to match the design of your form with your brand for consistency and credibility. Plus it helps reinforce your brand in your customer’s mind; about half of brands use a color from their logo in their call-to-action buttons, which helps establish a connection between the form and the rest of the site.  

Update your signup form for current marketing promotions

A consistent marketing strategy for your storefront is essential for grabbing your visitors’ attention. By updating your signup form to match your seasonal marketing promotions, it shows a united marketing front and signals to a visitor your emails will be relevant to their current needs. (After all, if you’re one of the few eCommerce stores willing to go the extra mile to update your pop-ups, just imagine what kind of care you’ll give to everything else.)

How to customize your signup forms in Jilt

It’s currently a manual process to customize your form (we are working on making this easier), but it’s not prohibitively complex. To make changes, you should be comfortable, or at least familiar, with basic CSS (Cascading Style Sheets)—you won’t need to do any real coding, but if you want to tweak any of the formatting beyond what we’ve provided below, a working knowledge of CSS will help.

We put together some example CSS that demonstrates how to customize each of the elements of the pop-up.

The CSS below will do a handful of things:

  1. Update the background to be an image
  2. Update the text to white to make it easier to see on an image
  3. Update the design of the form inputs to give them rounded corners
  4. Update the design of the submit button to stand out better against the image
/* Updating the Jilt signup form */

// Update the form background
.jilt-sign-up-form__overlay .jilt-sign-up-form__content {
  background-image: url('https://yourwebsite.com/pathtotheimage/image.jpg');
  background-size: cover;
  background-position: center;
  padding: 60px 30px;
}

// Update the form content
.jilt-sign-up-form__form .jilt-sign-up-form__heading,
.jilt-sign-up-form__form .jilt-sign-up-form__description {
  color: white;
}

// Update the form inputs
.jilt-sign-up-form__form .jilt-sign-up-form__input {
  border-radius: 4px;
  border: 1px solid white;
}

// Update the form submit button
.jilt-sign-up-form__form .jilt-sign-up-form__submit {
  background-color: white;
  border: 1px solid white;
  border-radius: 4px;
  color: black;
  font-weight: bold;
  text-transform: uppercase;
}

All of the CSS above is ready to be added to your site. (However, you’ll need to upload an image and insert its URL for the background-image attribute. You can grab the path to your image by uploading to your site, then right-clicking on it and selecting “Copy Image Address” or “Copy Image Location.”)

Adding the custom CSS to Shopify

Adding custom CSS to your Shopify theme is fairly simple, but be careful when you’re doing it because you’ll be editing your theme files. It’s always a good idea to backup your theme before making any changes. 

Visit the themes screen for your shop (Online Store > Themes) in the Shopify Admin.

Shopify themes page.

From the Actions menu on your Live theme, select Edit code.

Shopify edit code page.

Locate and open the ‘theme.scss.liquid’ file in the Assets directory.

Scroll down to the bottom of the file, paste in the code from above, then tweak it as necessary. We recommend leaving the comments in there (e.g., /* Updating the Jilt signup form */) so you can remember what the code is doing if and when you want to change it in the future.

Scrolling down to paste.

Note: If you change your Shopify theme, you will have to redo the steps above in your new theme.

Adding the custom CSS to WooCommerce

The easiest way to add quick snippets of CSS to your theme is to utilize a free plugin like Simple Custom CSS. This will provide a settings page in the WordPress admin where you can quickly add custom CSS to your site without having to edit any files.

Simply paste in the CSS from above, tweak to your liking, then click “Update Custom CSS” to save.

Pasting custom CSS in WordPress.

The result

If you followed all of the steps above, you will have a great looking signup form that matches your brand and marketing promotions. The above code will update the sign up form to look like this (your background image, of course, will vary):

A stylized pop-up.
Wes Cole
Wes is a frontend engineer for Jilt who sparks joy for Jilt users by bringing many a design to life. Outside code wrangling, he's an avid reader and has played violin for the Empress of Japan (and could have flown himself there in his former life as a pilot).

Leave a Reply

Your email address will not be published. Required fields are marked *