Skip to main content

Smart Cart Content Blocks: add an image and text to your cart

Add an image with rich text to your Smart Cart using the Content Block component. Covers image source, size, placement, and title and description text. This is the Smart Cart component, separate from the Checkout Extensions Content Blocks feature.

Written by Tom

The Content Block is a Smart Cart component that shows an image alongside rich text directly inside your cart. Use it to add promotional messaging, a banner, a value proposition, or a shipping notice without custom code. This is the Smart Cart component and is separate from the Checkout Extensions Content Blocks feature, which runs on checkout, thank-you, and order status pages.

How to add a Content Block to your Smart Cart

  1. Open your Smart Cart editor from the Manage Your Smart Carts page.

  2. Click Add + from the anchor section where you want the block to appear.

  3. Select Content Block from the component list.

  4. Set the image and text options described below, then save your cart.


Content Block image and text settings

Configure the block using the settings below. A Content Block needs at least an image or some text to display.

Note: The Content Block is static. It cannot display dynamic or personalized content, and there is no data source support for it. Set the image and text manually for each cart. To show personalized product recommendations in the cart, use the Cross-Sell Widget component instead.

Setting

What it does

Image Source

Toggle between Image URL and Upload Image. Choose Image URL to point at an image already hosted online, or Upload Image to upload a file and set alt text.

Image URL

The web address of the image to display, used when Image Source is set to Image URL.

Upload Image

Uploads an image file and lets you set alt text, used when Image Source is set to Upload Image.

Image Size

A slider that scales the image from 10 to 100 in steps of 5. The default is 50.

Image Placement

Sets where the image sits relative to the text: top, bottom, left, or right. The default is top.

Super Title

A small line of text shown above the title, useful for an eyebrow label or category.

Title

The main heading text for the block.

Description

Body text with a rich text editor for formatting such as bold, links, and lists.

(Screenshot above: Content Block settings panel showing the Image URL / Upload Image toggle, Image Size slider, the four Image Placement options with top selected, the Super Title / Title / Description text tabs, and the Advanced section.)


How to customize the text in a Content Block

The Description field uses a rich text editor. For most formatting, use the toolbar: Normal for text style, plus bold, italic, underline, link, image, and alignment. Reach for HTML only when you want customization that the toolbar does not offer.

To style your text with HTML:

  1. Click into the Description field to open its rich text editor.

  2. Click the code view button (the </> icon) in the toolbar to open the Code Editor.

  3. Enter your text wrapped in an HTML tag with an inline style attribute, then close the editor.

Use the font-family property to set the font and the color property to set the text color with a hex code.

Example:

<p style="font-family: Georgia, serif; color: #1a1a1a; font-size: 18px;">Your text goes here</p>
<p style="font-family: Arial, sans-serif; color: #666666;">Your text goes here</p>

(Image above: Content Block Description field rich text editor with the Normal, bold, italic, underline, link, image, and code (</>) toolbar button highlighted.)

(Image above: Description Code Editor modal with inline font-family and color styles.)


Content Block custom template (Advanced)

The Advanced section includes an Enable Custom Template toggle for the Content Block, matching the custom template option on other Smart Cart components. Turn it on to override the default block layout with your own template. For how component-level custom templates work, see Smart Cart Custom Templates.

Did this answer your question?