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.
To use this feature, your email service provider should support separate desktop and mobile content. This feature is supported by Klaviyo and OmniSend apps out-of-the-box.
Create separate widgets for desktop and mobile
When you are creating a new widget, make sure to selectDesktoporMobiletype on the side drawer. You'll need to create separate email widgets for desktop and mobile, and have your Email Service Provider choose which to show when you have different layouts.
Setup a proper widget layout according to device type
Select the 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 a similar user experience on small and big mobile screens.
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.
Add both desktop and mobile widgets to your email template
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.
Klaviyo
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.
OmniSend
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.
Send a Test Email and Preview the Layouts on Different Device
Sending a test email and testing the results on multiple email platforms (GMail, Yahoo, Apple Mail, Outlook, 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.
🤔 Questions? Need help? Contact us via the in-app chat or email.