Skip to main content
All CollectionsHow-To TutorialsFind the Perfect Design
How to Combine Grid & Pixel Designs to Create a Stunning Email Graphic
How to Combine Grid & Pixel Designs to Create a Stunning Email Graphic
Cathy Wilson avatar
Written by Cathy Wilson
Updated over a week ago

Grid & Pixel allows you flexibility to build longer, graphic-forward emails with designs that you've picked. We've also optimized the file sizes for email clients. Here’s how you can combine graphics with ease to create a longer email.

1. Pick Your First Email Graphic

First, pick an email graphic that’ll serve as your “hero” image at the top of the email. Our ready-made graphics are optimized to include the most important elements for a successful email design:

  • 1:1 personalization, e.g. a customer’s name embedded in the graphic

  • Headline text

  • Space for promo codes

  • Call-to-action buttons

  • Product imagery

And, of course, the ability to customize each design to match your brand aesthetic. If you want to stack designs to create the illusion of a larger image, we’d recommend choosing a graphic with a solid background at the bottom.

2. Pick Your Second Email Graphic

Second, pick an email graphic (or more than one) to add below the main hero image. The world is your oyster, but you’ll want to pick designs that complement each other. This might mean mixing a static design with an animated design, or a product-heavy design with something that’s text heavy. Here are a few of our favorite combos:

example of an email graphic with a stacked design

This is a perfect combo for a promotional sale. Both designs display discount codes prominently and use complementary tactics to grab the customer’s attention. The clever “swipe” from the hero image gives opportunity to showcase your products, while the second graphic is all about reinforcing the discount to spur clicks.

This stack combines two simple designs that really show why less is more. Big, attention-grabbing fonts and bold color blocks (customizable, of course) will instantly draw in customers. And, both graphics offer opportunities for showcasing your favorite products. All in all, it’s a seamless and stunning combo.

example of an email graphic with a stacked design

You might call this stack a reverse mullet. It’s all party in the front, with a top hero image that has fun fonts and a playful design. But the second graphic is all business, offering ample space to let your products speak for themselves with a simple rotating slideshow.

3. Add your graphics to your email campaign or flow

Add both graphics as separate blocks, right next to each other. This part is super simple. Instead of creating one block (Text block for Klaviyo users, or a Custom Liquid block for Shopify* users), you’ll simply create two blocks and place them right next to each other vertically.

Make sure there is no padding on the images, especially on Klaviyo (which automatically adds padding to all new Text blocks). Simply change the padding to zero if need be, and the graphics will sit flush next to each other. Also make sure to keep the “stacked on mobile” toggle on so that the images always appear stacked on one another.

Ecommerce stores are competing for just a second of a prospective customer’s attention, and a show-stopping email graphic is one of the best ways to get it.

Why Email Graphics Matter

Your email graphics – or lack thereof — can make or break a campaign. Send an email that’s filled with tons of graphics in huge file sizes, and customers could be waiting upward of 10 seconds for them to load (and they’ll be closing your email before that happens). Send an email that’s without any graphics, and they’ll likely glaze over the copy or miss the big selling point of the message.

Ecommerce marketers need to find that sweet spot of an engaging email graphic that loads quickly and instantly draws in customers. Grid & Pixel fills that void with ready-made graphics and animations that are both beautiful and optimized for quick load times.

One popular email design trend is using longer, more vertically aligned graphics that are more optimized for mobile viewing. Considering that most email views happen on mobile devices and mobile-responsive email designs can generate 15% more clicks, this strategy is a sound one.

*Note that Shopify users will need to turn off AI for all designs, to avoid hitting a variable limit.

Did this answer your question?