If you have a site with a very specific and creative design, you might find that our standard styles and templates for Smart Offers don't really mesh with your site. That's perfectly ok - we've provided you with a way to show custom images (that you design) to your visitors under our standard behavioral conditions.
Here's a quick tutorial on how to make an image slide out anywhere on your site just like a Smart Offer.
1. Create your image in a program like Photoshop. Here's the image that I want to slide out and appear on my website:
2. In your Spring Metrics account, click "Create a New Smart Offer". Navigate to "Step 3: Content".
3. Delete all of the text in the "Main Text" section so that there is no messaging in the Offer, like so:
4. Now, click on the "Coupon Inset" section on the left, and then click on the large orange box on the right side of the page, like so:
5. Click the "Choose File" button, and select your custom image. Then, click the "Upload Now" button.
6. You should now see your custom coupon image in the preview. We still have some work to do though, because the alignment of the image isn't quite right:
7. To address this, head over to "Step 2: Design", and select the "Inset Border" section on the left. Choose the "Empty" border option, like this:
8. Now, select the "Advanced" section on the left. Set the "Padding around offer" slider to 0. This shrinks the padding around the image so that the image is flush against the side of the Offer's frame:
9. Next, use the "Offer Width" slider to adjust the width of the Offer so that the side of the image is flush with the edge of the "collapse" bar, like so:
10. Finally, adjust the color to your liking (affects the color of the "collapse" bar), and choose a target segment to which you'll show the Offer.
The final product, as a preview:
And then on site: