How to Slice a Photoshop Design File for Klaviyo

Klaviyo is a great platform for sending and tracking your marketing emails, but when it comes to design there are limitations that are hard to get around without custom html. Since not everyone has a developer at their disposal, a common workaround is to design the entire email in photoshop, and then slice it into jpegs that are then uploaded into Klaviyo. 

Follow these simple steps to create on-brand custom emails without ever having to code:

1. Create a new file in photoshop with 2 artboards, one sized 1200 px wide for desktop, and one 600 px wide for mobile, with a resolution of 72 dpi.

2. Design your email for both sizes, adjusting font size and layout accordingly. 

3. Once the design is complete, go to View > Show and check Slices to show slices.

4. Now select your Slice Tool in your tool panel (located alongside the Crop tool).

5. Using your slice tool, slice your design into sections, keeping in mind that each section will become a jpeg that can be linked separately in Klaviyo. 

6. By using the Slice Select Tool (also alongside the crop tool), you can double click your slices and adjust the slice properties.

7. To export all of your slices, go to File > Export > Save for Web. Make sure that the Slice Select Tool is selected in the top left of the Save for Web dialog box. Choose JPEG file type, with a Maximum quality (100) and hit Save. Choose All Slices from the Slices dropdown menu at the bottom of the Save As dialog box, determine a destination for the files, and hit Save. Your slices will then all be saved within a folder named “images”. Depending on how precise your slice work is, there may be a few extra sliced jpegs in that folder. I typically trash those to keep my files clean. 

8. Now you can upload your jpegs into Klaviyo as separate images, each with its own link.

Using this method allows for much more control over your design, and ensures that everyone in your mailing list receives the same final product. No more stressing over which email platforms support custom fonts or how to code to get your design just how you want it.