Coupon Pop CSS Editor - Examples

We've added below a few popular examples that will make your life easier when using the Coupon Pop CSS editor.
We also invite you to read our 'Getting Creative with Coupon Pop' post.

1. Edit the icons position

to the left side:

#preview-wrapper #banner {
    padding-left:10px;
    text-align: left;
}

to the right side:

#preview-wrapper #banner {
    padding-right:10px;
    text-align: right;
}

2. Edit the email text field size

make it wider (you need to change two classes):
.sb-cell.newsletter {
    width: 250px;
}
#email-input {
    width: 200px;
}

make it shorter:

#email-input {
    width: 100px;
}

3. Edit the pop up background color (to yellow for example):

.desktop-body #preview-wrapper,
#share-coupon-popup-container {
    background-color: #FFFF00;
}

4. Edit the coupon pop area size:

 You can make it higher (margin-top value should be half the height):

#share-coupon-popup-container {
    height: 600px;
    margin-top: -300px;
}

make it shorter (margin-top value should be half the height):

#share-coupon-popup-container {
    height: 300px;
    margin-top: -150px;
}

5. Add images to the pop up, above the title, or inside the text (we do offer an option to upload an image as background, you can find it under 'Advanced customization).

you can put a repeating background behind the headline (could also be a big background image to the header) -

#preview-wrapper .main {
    background-image: url(http://www.storeya.com/common/images/products_page/bk_grey.gif);
}

put an image next to the headline (position decides where it would be from the left top corner):

#preview-wrapper .main {
    background-image: url(http://www.storeya.com/common/images/couponpop/Easy.png);
    background-position: 6px 15px;
    background-repeat: no-repeat;
}

6. Edit coupon code area:

#preview-wrapper .coupon {
    background-image: none;
    padding: 3px;
    height: 100px;
}

#preview-wrapper .dashed-border {
    border: 2px dashed rgba(0, 0, 0, 0.24);
    height: 96px;
}

7. Hide Coupon Pop tab in mobile view

#share-coupon-small.mobile {
 visibility: hidden;
}

8. Hide Coupon Pop tab from all devices

#share-coupon-small {

    visibility: hidden;

}

 

 

9. Background image on the entire popup
You might not be able to see it in the preview mode, but it will work on the real site.

#storeya-couponpop #preview-wrapper {
    background-image: url(http://www.storeya.com/common/css/../../common/images/hp/header-ima...);
}

 

 

10.  Change the color of the text at the coupon area "Coupon will be shown here".

#coupon-text-before{
 color: #595959;
}

11. Change the color of the text after the coupon code is shown (coupon code text color) -

#coupon-text-after{
 color: #595959;
}

 

 

12. Change fonts on the popup:

All fonts in the popup:

#storeya-couponpop #preview-wrapper, #storeya-couponpop #paragraph-text, #storeya-couponpop .input-medium {

font-family: Georgia;

}

headline font:

#storeya-couponpop h3#headline-text {

font-family: Georgia;

}

description text font:

#storeya-couponpop #paragraph-text{

font-family: Georgia;

}

enter you email input field:

#storeya-couponpop .input-medium {

font-family: Georgia;

}

13. Remove the scissors icon:

#storeya-couponpop .scissors {
display: none;
}

14. To link the Coupon Pop to a banner on your website (trigger it with a custom link):

<a data-cp-link="28358"> Open popup </a>

15. Change the color of the grey strip

#banner {

    background-color: #e9e9e9;

}