Customizing The CSS for the Mailing List Pop-Up

Meta
1

Is there a way to fully customize the style of the Mailing List Pop-Up? Our company would like to override the template look to make it fit in better with our brand. Outside of changing button color it is confusing as to how much freedom we have to customize this feature.
Has anyone had experience with overriding the template (beyond changing the button color) of the mailing list pop-up feature? Is there a way to incorporate images (ie-a logo or brand pattern)?

2

Hi Caitlin,

It is customizable for sure. Doing so requires pretty solid knowledge of jQuery and CSS. Iā€™m going to defer to @belen_ibanez because she wrote the feature. BelĆ©n, maybe you could suggest a way to include an image in the popup, please? I guess it would be something like:

$('#nitro_mailing_list:first-child').prepend('<img src="..."/>');

Thanks,
Donogh

3

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>.

f0afebea6420edab.png490Ɨ506 43.5 KB

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
4

Hi BelƩn,

I need your advice on our Email Sign Up Pop-up Form. Overall it is working great and has more than doubled our email signup participation; however, a customer recently wrote:

ā€œā€¦the ad for signing up for your newsletters reappears with each and every screen shot, which is a bit annoyingā€¦ā€

I know the pop-up is controlled by a customerā€™s browser cookie properties, but Iā€™ve also noticed that in my browser it pops up on the home page and checkout page roughly once a week; which is the frequency Iā€™ve setup (7 Days). Is there a way to completely remove it from the ā€œcheckout pageā€ page only as that is supposed to be a secure connection?

Please advise

Stan

5

Hi Stan,

Glad that the pop-up is helping with the marketing :slight_smile:

If you donā€™t want the Pop-up in the ā€˜checkoutā€™ you only need to wrap all the [template][1] under this conditional:

  {if (pageproperty['pageid'] ne 'checkoutstep2' )}
    << Mailing list template>>
    {endIf}

The pop-up only reappears if the customers clicks outside the window. If they close it or they click ā€œNo, thankā€ it will not reappear until next week.

This is general example excluding the ā€˜homeā€™ page and the ā€˜checkoutā€™:

{if ((pageproperty['pageid'] ne 'checkoutstep2' ) && (pageproperty['pageid'] ne 'home'))}
<div id="nitro_embed_signup">
  <form method="post" id="nt-embedded-subscribe-form" name="nt-embedded-subscribe-form" class="validate" target="_parent" novalidate>
    <h2>Subscribe to our mailing list</h2>
    <div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
    <div class="nt-field-group">
    	<label for="nt-EMAIL">Email Address  <span class="asterisk">*</span></label>
    	<input type="email" value="" name="EMAIL" class="required email" id="nt-EMAIL">
    </div>
    <div class="nt-field-group">
    	<label for="nt-FNAME">First Name <span class="asterisk">*</span></label>
    	<input type="text" value="" name="FNAME" class="" id="nt-FNAME">
    </div>
    <div class="nt-field-group">
    	<label for="nt-LNAME">Last Name  <span class="asterisk">*</span></label>
    	<input type="text" value="" name="LNAME" class="" id="nt-LNAME">
    </div>
    <div class="clear">
      <div id="nt-embedded-buttons">
      <input type="submit" value="Subscribe" name="subscribe" id="nt-embedded-subscribe" class="button">
      <input type="button" value="No Thanks" name="close" id="nt-embedded-nothanks" class="button">
      </div>
     </div>
  </form>
</div>
{endIf}

Best regards,
BelƩn
[1]: The Best Premium Cigars, Lighters, and Cutters - CoronaCigar.com

1 Like