1. Go to your LimeSpot Admin Panel > Acquisition > Personalized Emails.
2. Click on "Create a Campaign".
3. Fill in your campaign details.
Campaign Title: Name of your campaign.
Email Provider: Select your email provider from the drop-down list.
UTM Tracking (Optional): UTM (Urchin Traffic Monitor) codes are one of the ways to track performance from any digital marketing campaign. Select the checkbox of what you want to track such as a source, medium, and campaign title. You can also just leave it as it is.
4. After you fill in your campaign title and email provider, the "Next" button will prompt you to proceed to Step 2 for editing the widget.
5. Click on "+ Add Recommendation Widget" to start editing the widget.
6. A slide out menu will appear on the right hand side titled "Product Widget". Note that you will need to create separate email widgets for Desktop or Mobile, and have your Email Service Provider choose which to show when you have different layouts.
You will see that there are default values in place already. However, you are still able to change the settings to fit your campaign needs.
Basic:
Title: Name of your widget. For your convenience, a default title named Widget 1 is already in place.
Recommendation Type: Choose what recommendation type to show in your email campaign. For more information, click here. For certain recommendation types, there will be a Fallback Option listed below (choose from Most Popular, New Arrivals, or Trending).
Reference: Depending on the recommendation type you choose, you can define the Reference based on Orders Past 24 Hours/3 Days/7 Days/30 Days.
Fallback Option: For the Fallback Option you choose, you can limit the scope based on what Collection to show. Make sure that you have enough items in those collections for us to populate data.
UTM Content + UTM Term: Track the performance of the widget and/or the product title. You can also just leave it as it is.
Template:
Choose from one of six predefined templates, or customize a predefined template. You can customize the Sales Tag, Call To Action, Show/Hide Price and Original Price, Font Type, Font Size Base, and even Customize Code!
Layout:
Widget Width (px): Set the width of the widget in pixels. A default value of 640px is already in place for desktop. For mobile view, a default value of 375px is set in place. (If you want to change this value, please get in touch with us at [email protected]).
Horizontal Padding (px): The horizontal padding between the campaign and each product recommendation. Refer to screenshot below.
Vertical Padding (px): The vertical padding between the campaign and each product recommendation. Refer to screenshot below.
Items Layout: Choose how you want the items to be displayed up to a maximum of 4 rows. Adjust the padding for left and right side.
Customize:
Further customize the following settings:
Code (Advanced):
Custom CSS for editing the email widget. Note: Only use this section if you are an advanced user of HTML + CSS. For beginners, we would strongly suggesting leaving this section as is.
Preview:
You can see how your widgets will be displayed in the email campaign in this area.
Desktop:
Mobile:
Aligning the Widget Items:
Some items have longer titles resulting in more than 1 or 2 lines and misalignment of the widget items. To fix this, we can:
1) Disable the Call To Action under the Customize settings.
2) Make the titles max 2 lines and then ellipsis (...) for the rest of the titles. This requires adding some CSS code under the Code (Advanced) setting. Copy and paste the following code, then replace it with the existing .title class in the Code (Advanced) editor. Then, click "Update Preview" to see the changes.
.title {
text-align: left;
font-size: 110%;
margin-top: 10px;
color: #000;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
Once you're happy with how everything looks, click "Save and Close".
7. After exiting the product widget editor, click "Next" to proceed to the last step. If you want another recommendation widget, you can also add another one based on the steps above.
8. The last step is to review the email campaign. All you have to do now is click "Copy to Clipboard". Once you've got your code copied to clipboard, finish by clicking on "Complete".
9. Congratulations on setting up your first email widget with LimeSpot! You will be taken back to the Email Personalization Campaigns dashboard where you can see a list of all your email widgets. You can also create more email widgets by clicking on the button "Create" at the top right.
10. We are not finished yet though. The next step is to login to your email provider dashboard and paste the code you have just copied to your clipboard over there. Click on the links below to see further instructions on how to add the LimeSpot email widget to our compatible email service providers: