How to Guide: Design Tutorial - Unwrap the Valentine's Gift

Our step by step guide to designing your perfect Unwrap the Gift promotion. This is a perfect way to unbox a surprise for your customers this valentines.

Step 1

Click the Create Promotion button to create a Unwrap the Gift promotion   (not sure how? Then follow this guide to create your first promotion). 

Step 2

a) Select this Ready Made design from the available designs

Follow the steps to create this promotion by giving it a name and then proceeding to the Builder where you will be able to customize it. 

Step 3

First we're going to make a few updates to the possible prizes (and non prizes) that people can win when entering this promotion.   

Click anywhere on the gift box to open its settings.

This Ready Made design has two prize options already set. We called them Winner and Unlucky.   We'll show you how to add more and set prize quantities for each.

• A) Add Prizes:

To start this customization ,we'll rename the existing ones and add some more. We'll have 4 prizes and reserve a final Prize for a Lucky Dip or Sweepstakes.

Simply click to open each of the Prize Options and make the changes to the label and any texts and image changes you want. We've added other image options in the Ready Made folder in the image library. 

Here's a screenshot for what we've added.

• B) Set Prize Quantities:

Now that we have more prize options, we'll also now set some Prize Quantities for each of these.

First switch on the option to limit the prize quantities. You'll need to click on the boxes on the Start Page or Lucky draw page to open the settings. 

With this now ON, click on the individual Prize Options and on opening them you will see that each of your Prize Options will have a Quantity field.

To make the maths easy, we'll work on the assumption that there will be 1,000 entries in total. 25% will win a prize and 75% will get the 'Lucky Dip' or losing prize option and from this one winner will be chosen at random with the Winner Spinner.

Step 4

Now that we've changed the segments, we also have to change the Result Messages. This is really important to do as it is the final message your entrant receives and tells them what prize they got and how to redeem it.

Here is a tutorial video that explains how to map your Segments to Result Messages. 

  <div style="background-color:#f1f1f1;border:1px solid transparent;color:#333333;font-size:12px;margin:10px auto;padding:8px;text-align:center;">
    COUPON CODE
</div>

Custom Design

Here's a quick lesson on changing up the design.

With BeeLiked you can keep things simple and just add logos and change texts and colors, or you can go to town adding your own images and creating custom CSS to define behavior. It all depends on the time you have and your digital know-how. 

Step 1

Just to change up the design a bit, we're going to start by changing the background image. Head to Theme > Background. To change the image hover over the background image for the buttons to appear, then click the middle pencil icon. The Media Library will open.

Select an alternative image from the Ready Made folder, or add your own to one of the other folders and insert in place of the existing image.

Step 2

We're going to make an update to the design of the gift box by adding an alternate pattern and a different bow. Click anywhere on the gift box to open its settings and then navigate to the Box Details. Click the pencil icon next to the Lid Texture and Box Texture and from the Ready Made Folder, choose a new texture to add ( or upload your own). 

To update the bow's color, simply click to choose an appropriate color.  We chose: rgb(197, 91, 75)

Step 3: Animate the background image.  

This step is a bit more advanced and is totally optional.

Grab the URLs from your Media Library for the images below:

Background 1	Background 2

 Once you have these URLs, keep them safe as you'll need to insert them into the placeholders in the below CSS. 

With this then updated CSS code you copy it to Theme > Advanced. 

body {
  background: #4F0003 url(Insert-URL-Image-1) top center no-repeat;
  animation: back 10s ease-in-out infinite both;
  background-size: cover;
  overflow-x: hidden !important;
}

@keyframes back {
  0% {
    background: #4F0003 url(Insert-URL-Image-1) top center no-repeat;
    background-size: 100%;
  }
  25% {
    background-size: 105%;
  }
  50% {
    background: #4F0003 url(Insert-URL-Image-2) top center no-repeat;
    background-size: 100%;
  }
  75% {
    background-size: 105%; /* Aumenta 10% */
  }
  100% {
    background: #4F0003 url(Insert-URL-Image-1) top center no-repeat;
    background-size: 100%;
  }
}