Having different layouts on Desktop vs. Mobile platforms have a major effect on customer engagement and conversions.
LimeSpot email personalization provides full flexibility to merchants to design completely different layouts per device type (Desktop and Mobile) and use them side by side on their email template.
Note: To use this feature, your email service provider should support Desktop and Mobile only contents. This feature is supported by Klaviyo and OmniSend apps out-of-the-box.
Step 1 - Create Separate Widgets for Desktop vs. Mobile.
When you are creating a new widget, make sure to select "Desktop" or "Mobile" type on the side drawer. You'll 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.
Step 2 - Setup a Proper Widget Layout According to Device Type (Desktop vs. Mobile)
a. Email width:
The recommended size for emails on Desktop is between 590px to 640 px. For Desktop, a default value of 640px is in place to provide the highest resolution possible.
The recommended size for emails on Mobile is between 375px to 480 px. For Mobile, a default value of 375px is in place to provide the same user experience on small vs. big mobile screens.
b. Single or multiple products per row
We recommend having different setups for the number of products per row in Desktop vs. Mobile widgets. Two products per row on a mobile device tends to be too dense to easily read.
We recommend to show 3 products per row for Desktop and 1 product per row Mobile Widgets.
Tip: Use the Customize tab to indicate if you would like to show Price, Discounted Price, Sales Tag, or SHOP NOW Call-to-Action on your Desktop or Mobile widgets.
Step 3 - Add Both Desktop and Mobile Widgets to your Email Template and Set the Styling Accordingly
Once your Desktop and Mobile widgets are created, you'll need to copy the source code of each widget and paste them into two different HTML content sections on your email template.
a. Klaviyo platform:
Figure out where you want to add the product recommendations on your email template. Then, drag and drop a "Text Block" to your specified location and select the "Source" to paste your code into. Your product recommendations should be previewed there.
Navigate to the Block Styles option on the left panel to choose the setting to show that block for Desktop only or Mobile only.
Click here for more and detailed information on how to add your widget to the Klaviyo email templates.
a. OmniSend platform:
Figure out where you want to add the product recommendations for your selected campaign. Then, drag and drop the "HTML code" block to your specified location. Paste the source code that is copied to your clipboard, and your product recommendations should be previewed there.
Navigate to the HTML Code settings on the right panel to choose the setting to show that block for Desktop & Mobile, Desktop only or Mobile only.
Click here for more and detailed information on how to add your widget to the Omnisend email templates.
Step 4 - Send a Test Email and Preview the Layouts on Different Devices
Sending a test email and testing the results on multiple email platforms (Gmail, Yahoo, Apple Mail, Microsoft Mail, etc.) and different devices (Desktop vs. Mobile) is always recommended.
Sometimes, a small customization on the horizontal or vertical padding would create a big difference in the way your widgets are shown on different platforms.
If you have any problems with your setup and the way widgets are rendering on your emails, please contact us via the chat button at the bottom right. Our support team is available 24/7 and will be happy to help!