1. Go to your Acquisition > Personalized Emails.
2. Click on "Create a Campaign".
3. Fill in your campaign details.
Campaign Title: Internal 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.
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 most of the fields have default values. However, you are still able to change the settings to fit your campaign needs.
General
Title: Name of your widget. For your convenience, a default title named Widget 1 is already in place. This name will not be displayed to customers.Recommendation Type: Choose what recommendation type to show in your email campaign. For more information on what each type of recommendation does, see this article.Fallback Option: For certain recommendation types, you will have the option to add a fallback option. If no product from the recommendation type option, the fallback collection will be used instead. Make sure that you have enough items in the fallback collection to feed the number of product shown in the widget.Reference: Depending on the recommendation type you choose, you can define the Reference based on Orders Past 24 Hours, 3 Days, 7 Days, or 30 Days.UTM Content + UTM Term: Track the performance of the widget and/or the product title. This is optional.
Template
Choose from one of six predefined templates, or customize a predefined template, including the sales tag, call to action, show or hide the price and the original price, font type, font size, and even add custom code.
Layout
Widget
Width: 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]).
Rows
Horizontal Padding: The horizontal padding between the campaign and each product recommendation. Refer to screenshot below.Vertical Padding: The vertical padding between the campaign and each product recommendation. Refer to screenshot below.
Items
Count: Set the total number of recommendations to display in the widget.Per Row: Set the number of recommendations to display per row.Padding LeftandPadding Right: Adjust the spacing between product cards.
Customize
Further customize the following settings as you see fit.
Code (Advanced)
This section requires understanding of HTML and CSS. In doubt, please reach out to your development team or our support team.
You can use custom CSS to fine-tuned the look of the widget.
Preview
The preview allows you to see how your widgets will be displayed in the email campaign in this area.
Desktop widget
Mobile Widget
Some items have longer titles resulting in more than 1 or 2 lines and misalignment of the widget items. This short section describes how to handle such situations.
Step 1 - Disable the Call To Action under the Customize settings.
Step 2 - Ensure that titles do not expand below 2 lines and add an ellipsis (...) for the part being cut off.
This step 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 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! One step remains, though. 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. The final 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: