> ## Documentation Index
> Fetch the complete documentation index at: https://docs.nomadsarc.app/llms.txt
> Use this file to discover all available pages before exploring further.

# 🖼️ Image With Text

How to display **Image with text** on the Checkout using the **Custom ->** **Content -> Image with text** option.

<video src="https://mintcdn.com/nomads-arc/474JDwCjvejIYVVp/videos/Image-With-Text.mp4?fit=max&auto=format&n=474JDwCjvejIYVVp&q=85&s=d6bd1a2f6b09291660e67b3b68b0c853" controls data-path="videos/Image-With-Text.mp4" />

## Guide

<Steps>
  <Step title="**Create a new customization**">
    Create a new [customization](https://admin.shopify.com/apps/dynamic-checkout-customizer/customizations).

    <img src="https://mintcdn.com/nomads-arc/RJz7ONnhNAbrjhoP/images/image-24.png?fit=max&auto=format&n=RJz7ONnhNAbrjhoP&q=85&s=49e42e339f5cc8ac81e97e44e671d3b9" alt="Image" width="1024" height="533" data-path="images/image-24.png" />
  </Step>

  <Step title="**Choose the Content type**">
    Select **Image With Text** from the available content types to display custom images and text during checkout.

    <img src="https://mintcdn.com/nomads-arc/1BGCxx9quDc6OrCW/images/custom_content_card_image_with_text_focus.png?fit=max&auto=format&n=1BGCxx9quDc6OrCW&q=85&s=a6d1a31d87fcf1cb65050a14ede3fee2" alt="Custom Content Card Image With Text Focus" width="2754" height="1468" data-path="images/custom_content_card_image_with_text_focus.png" />
  </Step>

  <Step title="**Configure display conditions**">
    Add one or more **conditions** to control when the content appears during checkout.

    <img src="https://mintcdn.com/nomads-arc/1BGCxx9quDc6OrCW/images/image_with_text_conditional_experience_focus.png?fit=max&auto=format&n=1BGCxx9quDc6OrCW&q=85&s=666521e1159bdc0eee7a03bbc909f964" alt="Image With Text Conditional Experience Focus" width="2758" height="1472" data-path="images/image_with_text_conditional_experience_focus.png" />
  </Step>

  <Step title="**Configure the content**">
    Configure the **Content Settings**, including:

    * **Upload image**
    * **Add Title**
    * **Add Description**

    Adjust these settings to match your store's branding and checkout experience.

    <img src="https://mintcdn.com/nomads-arc/1BGCxx9quDc6OrCW/images/image_with_text_settings_focus.png?fit=max&auto=format&n=1BGCxx9quDc6OrCW&q=85&s=d39106ea2950df2b9dc4a1ac78a287c2" alt="Image With Text Settings Focus" width="2764" height="1474" data-path="images/image_with_text_settings_focus.png" />

    <img src="https://mintcdn.com/nomads-arc/1BGCxx9quDc6OrCW/images/image_with_text_uploaded_settings_focus-2.png?fit=max&auto=format&n=1BGCxx9quDc6OrCW&q=85&s=e455d62fa28bdc4aec10fc137caa1af8" alt="Image With Text Uploaded Settings Focus" width="2760" height="1476" data-path="images/image_with_text_uploaded_settings_focus-2.png" />
  </Step>

  <Step title="**Activate the customization**">
    Change the **Status** to **Active** using toggle button to activate the customization.

    <img src="https://mintcdn.com/nomads-arc/RJz7ONnhNAbrjhoP/images/image-29.png?fit=max&auto=format&n=RJz7ONnhNAbrjhoP&q=85&s=bbc0b53bf6ebd8aade9c8cd0345a4def" alt="Image" width="1024" height="546" data-path="images/image-29.png" />
  </Step>

  <Step title="**Customize the display**">
    Configure the **Display Settings** to control how the image and text will appear during checkout.

    <img src="https://mintcdn.com/nomads-arc/1BGCxx9quDc6OrCW/images/image_with_text_display_settings_focus.png?fit=max&auto=format&n=1BGCxx9quDc6OrCW&q=85&s=dc5b3476a6051176146f4b8902258802" alt="Image With Text Display Settings Focus" width="2768" height="1474" data-path="images/image_with_text_display_settings_focus.png" />
  </Step>

  <Step title="**Set the priority**">
    Configure the **Priority** (0–100) to determine the execution order when multiple customizations are eligible.

    <img src="https://mintcdn.com/nomads-arc/1BGCxx9quDc6OrCW/images/image_with_text_priority_focus.png?fit=max&auto=format&n=1BGCxx9quDc6OrCW&q=85&s=84e5edee24e66dc37dd3e8e4f98192dc" alt="Image With Text Priority Focus" width="2764" height="1480" data-path="images/image_with_text_priority_focus.png" />
  </Step>

  <Step title="**Copy the Placement ID**">
    Copy the generated **Placement ID** from clipboard icon. You'll use this in the Shopify Checkout Editor.

    <img src="https://mintcdn.com/nomads-arc/u9pYvztLRnrKdKD0/images/Screenshot-2026-10-08-at-16.24.12.png?fit=max&auto=format&n=u9pYvztLRnrKdKD0&q=85&s=7dce401223ca45e0f07697a909ff2074" alt="Screenshot 2026 10 08 At 16 24 12" width="2760" height="1472" data-path="images/Screenshot-2026-10-08-at-16.24.12.png" />
  </Step>

  <Step title="**Preview**">
    Preview shows , How this block looks like at **CheckOut.**

    <img src="https://mintcdn.com/nomads-arc/vNSi6Esnt8QhT1VY/images/image_text_preview_focus-1.png?fit=max&auto=format&n=vNSi6Esnt8QhT1VY&q=85&s=ede5f1f10b9fb67de6975fd2f48abc9e" alt="Image Text Preview Focus" width="2764" height="1480" data-path="images/image_text_preview_focus-1.png" />
  </Step>

  <Step title="**Save the customization**">
    Click **Save** to store your configuration.

    <img src="https://mintcdn.com/nomads-arc/1BGCxx9quDc6OrCW/images/image_with_text_unsaved_changes_focus.png?fit=max&auto=format&n=1BGCxx9quDc6OrCW&q=85&s=e8845e7bcd9fc19ca010e1acd8a20be8" alt="Image With Text Unsaved Changes Focus" width="2760" height="1472" data-path="images/image_with_text_unsaved_changes_focus.png" />
  </Step>

  <Step title="**Open the Checkout Editor**">
    Go to your Shopify [Settings](https://admin.shopify.com/settings) **→ Checkout**, select your checkout profile, and click **Edit**.

    <img src="https://mintcdn.com/nomads-arc/iXpFGcSFUJL7FNKL/images/screenshot_08.png?fit=max&auto=format&n=iXpFGcSFUJL7FNKL&q=85&s=16ba7d2015cd3c1cb9962b0f9665bac0" alt="" width="2852" height="1438" data-path="images/screenshot_08.png" />
  </Step>

  <Step title="**Add the app block**">
    In the [Checkout Editor](https://admin.shopify.com/settings/checkout/editor), click **Add app block**.

    <img src="https://mintcdn.com/nomads-arc/u9pYvztLRnrKdKD0/images/Screenshot-2026-10-08-at-16.25.08.png?fit=max&auto=format&n=u9pYvztLRnrKdKD0&q=85&s=9863aaeb303bee52b6ed0f1192f1a675" alt="Screenshot 2026 10 08 At 16 25 08" width="2866" height="1486" data-path="images/Screenshot-2026-10-08-at-16.25.08.png" />

    <Note>
      Make sure the app block is placed in the same checkout placement you selected in Dynamic Checkout Customizer.
    </Note>
  </Step>

  <Step title="**Configure the app block**">
    Select the **Checkout – Image Content** app block, and paste the copied **Placement ID**.

    <img src="https://mintcdn.com/nomads-arc/u9pYvztLRnrKdKD0/images/Screenshot-2026-10-08-at-16.25.29.png?fit=max&auto=format&n=u9pYvztLRnrKdKD0&q=85&s=30ea02b8f6993917a4c2797d12bcef0c" alt="Screenshot 2026 10 08 At 16 25 29" width="2878" height="1498" data-path="images/Screenshot-2026-10-08-at-16.25.29.png" />
  </Step>

  <Step title="**Publish your changes**">
    Click **Save** in the Checkout Editor to publish the customization.

    <img src="https://mintcdn.com/nomads-arc/RzpK3cAhme6CksMw/images/image_content_clean.png?fit=max&auto=format&n=RzpK3cAhme6CksMw&q=85&s=907a3035e95e467aeabbf5bf19b82d8f" alt="Image Content Clean" width="2878" height="1498" data-path="images/image_content_clean.png" />
  </Step>
</Steps>

<Note>
  **Why does it matter?**

  **Custom →** **Content → Image with text** , customization to review images during checkout, for positive impresion at the final stage of the purchase journey can help increase customer confidence and improve customer acquisition.
</Note>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.