Shopify's desktop and mobile email previews help you build a campaign, but your subscribers open it in different apps. Product columns, image sizes and button spacing can change between Gmail, Outlook and Apple Mail, even when the editor preview looks right. Checking a phone manually helps with one app. Repeating that check across several apps, collecting screenshots and making sure everyone reviewed the same revision takes more work. MailSlurp is an email testing platform that captures your campaign in selected email clients so you can compare the results together. You will need a Shopify store with email sending available, a saved email draft and a MailSlurp workspace with device previews available. ## How automated device rendering works Choose the devices and email services you want to test, and MailSlurp gives you a special email address. Send your campaign to that address. MailSlurp opens the email in the selected apps and webmail services, then captures screenshots automatically. The screenshots come back together, ready to compare across phones, tablets and computers. Check the layout, images and buttons, then share a result link so your team can review the same version of the email. ![One email branches to an iPhone, a desktop computer and a tablet for automated rendering.](/_astro/automated-device-rendering-v1.DkA8n4lC_20VMnF.webp) ## Let's test a Shopify campaign The example is a product launch email from Slurp Store, a demonstration shop selling reusable straws. It introduces a starter set, links to the collection and shows four product packs with photographs and prices. The product grid has two columns on a wide screen; on a phone, the names, prices and shopping button still need to be readable without horizontal scrolling. The saved draft was sent through Shopify's **Send test** control. MailSlurp received the email with **[TEST]** at the start of its subject and completed captures for **Gmail Android**, **iOS Mail**, **Gmail.com** and **Outlook Classic**. Gmail Android kept the products in two columns, while iOS Mail stacked them into one. The [mobile comparison](#compare-the-layout-in-two-apps) explains what to inspect in those results. This is a preview of a Shopify test email. A normal campaign sent to a subscriber segment is a separate send; these screenshots do not establish its delivery or inbox placement. ### Prepare your draft in Shopify Open your existing campaign in **Messaging**, or choose **Create message**, then **Email**. Use a Shopify template or your own saved design; the MailSlurp address workflow is the same. The Slurp Store example uses **Code your own**, which accepts Shopify-compatible HTML and Liquid. If you use that option, follow Shopify's [custom Liquid instructions](https://help.shopify.com/en/manual/promoting-marketing/create-marketing/shopify-messaging/email/create-email/custom-liquid) for the required unsubscribe and open-tracking variables. ![Shopify Messaging template picker with Email selected and Code your own available](/_astro/shopify-templates.CeF-Xaof_Z149QRB.webp) Choose the email's starting point in Shopify Messaging. This example uses Code your own. Store address details are masked. To try the example layout, [download the Shopify email template and four product images](/resources/shopify-email-preview/shopify-portable-template.zip). Unzip the archive, then: 1. Upload the four JPEGs to **Files** in Shopify. In `slurp-launch.liquid.html`, replace each `https://example.com/uploaded-images/` image URL with the URL of its matching uploaded file. The starter-set image appears twice. 2. Update the product and collection links, wording and sample prices for your store. Keep the Shopify unsubscribe and open-tracking variables. The footer uses your store's address, so check that it is correct. 3. Paste the adapted HTML into **Code your own**, save the draft and send it through the test workflow below. This portable version uses replacement image URLs. The screenshots show the original Slurp Store send; test your adapted version again to see how it displays with your own images, links and store details. Set the subject, preview text and sender details. Keep the images, product links, footer and tracking settings representative of the campaign you intend to send. Use the desktop and mobile preview controls to catch obvious problems before starting client tests. ![Shopify email editor showing the Slurp Store launch campaign, subject, sender and product photograph](/_astro/shopify-editor.BckXujzK_1VTqyI.webp) The saved Slurp Store draft in Shopify. The editor preview establishes the intended design; it does not establish how each email app displays it. The sender address is masked. ## Send a Shopify test email to MailSlurp ### 1. Choose the email clients Open the [new device preview form](https://app.mailslurp.com/device-previews/create?onboardingRequest=devicePreview) in MailSlurp. Expand the target selector under **Select device types**, choose the clients you need, then confirm with **Use selected**. For this example, select **Gmail Android**, **iOS Mail**, **Outlook Classic** and **Gmail.com**. Use your campaign's audience information to choose additional clients. Gmail on an iPhone and Apple's Mail app are separate checks, even though they run on the same phone. Add a named dark-mode target if you need to inspect color changes; the four captures here do not demonstrate dark mode. ![Expanded MailSlurp device selector showing the available apps and selected client set](/_astro/targets.DT35yM43_2lJVwU.webp) Expand the selector to choose the apps for your campaign. The four selected clients match this example. The generated recipient is masked. ### 2. Copy your generated address Copy the complete value under **Send your email to this address**. That recipient tells MailSlurp which selected clients to capture when the email arrives. Use the address generated in your account. ![MailSlurp create-preview page with an arrow pointing to the generated email address](/_astro/render-address-arrow.WcoORdNR_2hgDam.webp) Copy the generated recipient after confirming the target set. The arrow points to the address field; its private value is masked. ### 3. Send the test from Shopify Return to the saved Shopify email and click **Send test**. Remove any default recipient you do not need, paste the MailSlurp address into **Email addresses**, then press Enter so it becomes a recipient chip. Check the complete address before clicking **Send**. ![Shopify Send test email dialog with the MailSlurp render recipient entered](/_astro/shopify-test-recipient.C_RjqQ_1_Z12MjrJ.webp) Enter the generated MailSlurp recipient in Shopify. This screenshot shows preparation, not a successful send. Sender and recipient addresses are masked. Wait for Shopify to confirm the send. If the dialog reports an error, use the [send troubleshooting steps](#if-shopify-will-not-send-the-test) before trying again. Opening MailSlurp's waiting screen does not send the email from Shopify. ### 4. Open the completed captures After Shopify accepts the test, return to MailSlurp and click **I have sent my email**. Open **View results** when the received message appears. Match the sender and subject to your draft, allowing for Shopify's **[TEST]** subject prefix, then wait for each client you selected to finish. All four selected clients completed for the Slurp Store test. A **Ready** capture means its screenshot is available to inspect; reviewing the image is the next step. ![MailSlurp results for the Shopify test email with a TEST subject prefix and four completed client captures](/_astro/render-results.CM6JAXIm_24rGg4.webp) The Shopify [TEST] email produced four ready captures. The adjacent Email audit and Domain health checks are separate from render completion. Private identifiers and footer details are masked. ### See your Shopify email in the apps your customers use Compare product images, columns and buttons across email clients before approving your next campaign. [Preview my Shopify email](https://app.mailslurp.com/sign-up/?onboardingRequest=devicePreview&returnTo=%2Fdevice-previews%3FonboardingRequest%3DdevicePreview) ## Compare the layout in two apps Open a client image and use **Compare** inside the screenshot viewer to select another client from the same email. Start at the top, then continue through the products, button and footer. Compare the same source revision before deciding which differences need a change. In the Shopify-delivered Slurp Store test, **Gmail Android** keeps the four products in a two-column grid. The product names wrap across several lines in the narrower spaces. **iOS Mail** places each product on its own row, with a larger photograph and more room for the name. That makes the email longer. Gmail Android: two columns ![Product section of the Shopify test email in Gmail Android, with products in two columns](/_astro/gmail-android-grid.BPshHgZY_1kPXjz.webp) iOS Mail: stacked products ![Product section of the same Shopify test email in iOS Mail, with products stacked in a single column](/_astro/ios-mail-grid.BKZZJKyR_1ELmkw.webp) Cropped sections of the actual Shopify test email show how the same products reflow in each app. The full comparison is below.
Open the full mobile comparison ![Full-length comparison of the same Shopify test email in Gmail Android and iOS Mail, with private headers and footers masked](/_astro/mobile-comparison-full.pLHb9-Wz_Z1xsdR2.webp) The same Shopify [TEST] email in both mobile clients. Gmail Android is on the left; iOS Mail is on the right. Private message headers and footer details are masked.
Both mobile captures display the starter-set photograph, all four product images and the green **Find your slurp** button. The Gmail.com and Outlook Classic captures also display those elements, with a two-column product grid. These observations describe this email in the selected clients; they do not establish that every Shopify template will behave the same way. Start with the product names and prices at full size. Can you read each name without confusing it with the neighboring product? Does its price stay beside the right image? In this example, Android's compact grid is the part to inspect closely, while the iOS version needs a longer scroll to reach the final product and footer. A difference in layout is worth reviewing, but it is not automatically a broken email. Continue through the shopping button, image proportions and unsubscribe content. Send a copy to a test inbox you can open and click its links to check their destinations; the screenshot shows their appearance, not where they lead. If a colleague is reviewing the campaign, use a [comment or review link](/docs/device-rendering-review/) to identify the client and the exact element that needs attention. For example: "Gmail Android keeps this product grid in two columns; check whether the longer product names need more room." Open the shared view before sending it to check which campaign details are visible. After editing the Shopify draft, send a fresh test and compare its captures with the earlier revision before approving the change. A [saved target profile](/docs/device-rendering-profiles/) lets you repeat the same client selection. ## If Shopify will not send the test If Shopify reports **Test emails are temporarily unavailable for your store**, check its account notices, sender verification and [Messaging requirements](https://help.shopify.com/en/manual/promoting-marketing/create-marketing/shopify-messaging/requirements). Ask the person who manages your sender domain to complete any authentication records Shopify requests. An **Authenticated** domain status confirms that setup step; it does not explain every sending restriction. If the message still cannot be sent, contact Shopify Support with the exact error. There is no received email for MailSlurp to capture when Shopify rejects the send. You can use MailSlurp's **Paste HTML** option to inspect a template during layout work. Use HTML with its Liquid values already resolved, then repeat the address workflow from Shopify when sending is available. An imported-HTML preview and a Shopify-delivered test have different sources, so keep their results separate. ## Next: test Shopify inbox placement A readable email can still land in spam. Continue with [Shopify inbox placement testing](/guides/shopify-inbox-placement-testing/) to send the campaign to controlled provider inboxes and inspect the folders where it arrives. Keep that result separate from the device-rendering review.