Articles on: Blockify - Checkout Rules

Add Image Banner to your Checkout flow

The Image Banner component allows you to display promotional or informational images directly in your checkout to improve conversion and communicate key messages to your customers.



Availability


  • Available on: Premium and Plus plans
  • Supported pages:
  • Checkout
  • Thank You page
  • Order Status page



What you can do with Image Banner


  • Display promotional banners (discounts, campaigns, seasonal offers)
  • Show trust messages (free shipping, guarantee, secure checkout)
  • Redirect customers to landing pages or product pages



How to add an Image Banner


  1. Go to Checkout Components (Plus) or Postpurchase customization
  2. Click “Add component”
  3. Select “Image Banner”


Step 1: Add Images


You can add up to 3 images per banner.


Option 1: Upload from your device

  • Click “Add image”


  • Select “Upload Image”


  • Drag & drop your image or click to browse


Supported formats:

  • JPG, PNG, WEBP

Max file size: 2MB



Option 2: Import from URL

  • Go to “Upload New”
  • Paste your image link into the “Image URL” field


Example:

https://example.com/banner.jpg


Note:

  • The URL must be a direct image link
  • The system will automatically import and store the image



Step 2: Manage Images


After adding images, you can:


  • Change image → replace with another image
  • Remove → delete the image
  • Reorder (if supported) → control display order




Step 3: Display Behavior


Single image

  • Displays as a static banner


Multiple images (2–3 images)

  • Displays as a carousel
  • Customers can manually navigate between images
  • Carousel does not autoplay

=> Save the rule and set the status to "Active" to proceed with next step


Step 4: Add Image Banner component


  • Click "Go to ... page" (Depend on your choice on Checkout (ShopifyPlus), Order Status or Thank you Page)


  • Add Image Banner


  • Place the component in your desired position in the layout
  • Add Block ID of the components (if you have multiple Image Banner Components)


Best Practices


  • Use landscape images for better layout
  • Avoid overly tall images (may affect checkout layout)
  • Keep text readable and minimal
  • Use high-quality images for better visual impact



Common Use Cases


  • Flash sale banner
  • Free shipping message
  • Upsell promotion
  • Trust badges or guarantees



Notes


  • Maximum 3 images per banner
  • Performance is optimized for checkout experience
  • Ensure your image URLs are valid and accessible




If you need further assistance, feel free to contact our support team.


Updated on: 18/03/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!