Customizing The CSS for the Mailing List Pop-Up

Hi Caitlin,

You can add images. If you are only interested in adding a static image, the easiest way is to do so is to add this tag in the mailing list template:

<img src="/store_images/YourImage.gif" border="0" align="center"
style="width:110px;height:50px" border="0">

You will need to modify the width and height of the image and the path to where it is located.

You can find an example here:

http://belen4.demostore.nitrosell.com/

I have added our logo to the pop up before the tag:

<h2>Subscribe to our mailing list</h2>.

You could also add images using jQuery but this would be more complicated.

You can also completely redesign the popup - It’s like designing a web page, so unfortunately you will need some HTML knowledge.

The mailing list pop up is a form and in order to work it has some required elements (the name of the inputs).

If you want the pop up to work with the mailing list integration you need to keep the external tags:

<div id="nitro_embed_signup">
  <form method="post" id="nt-embedded-subscribe-form" name="nt-embedded-subscribe-form" class="validate" target="_parent"novalidate>


                   ****** HTML ******

  </form>
</div>

But you can modify all the html inside these tags, keeping the name of the inputs:

name="EMAIL" will be used for the email.
name="FNAME" will be used for the First name.
name="LNAME" will be used for the Last name.

You can even add more fields:

name="MMERGE4" will be used for the telephone.
name="MMERGE5" will be used for the address.
name="MMERGE6" will be used for the city.
name="MMERGE7" will be used for the country.

There are some tools that will help you to create the form if you are not familiar with HTML, for example ‘MailChimp’ allow their customers to create forms in their accounts.

If you are interested in modifying the style you will need to overwrite the css. (/themes/stylesheet.css)

If you have any more questions we will be happy to help, don’t hesitate to ask.

Kind regards,
Belén

2 Likes