/
Adding Item Specific Content to the Receipt

Adding Item Specific Content to the Receipt

Visual Builder Instructions (Recommended for Modern Themes)

To edit the receipt page using the Visual Builder:

  1. Log into your UltraCart backend account at https://secure.ultracart.com.

  2. In the same web browser, navigate to your StoreFront and place a test order to reach the receipt page. (Use test payment mode to avoid actual charges; you can void the order later if needed.)

  3. On the receipt page, an admin menu with an 'Edit' option will appear just above the top of the page (visible only when logged into the backend).

  4. Click 'Edit' to enable the Visual Builder mode.

  5. In Visual Builder, locate the section where you want to add the item-specific content (e.g., above the order summary or form).

  6. Drag and drop a Logic element or a Container element into the desired location.

  7. Configure the element's condition to check if the specific item was purchased. Use Velocity syntax for the condition, such as: #if ($order.isPurchased("earthtone_mug")) Special custom content goes here. #end

    • Replace "earthtone_mug" with your actual item ID.

    • For more complex logic, reference UltraCart's Velocity documentation.

  8. Add your custom content (text, images, etc.) within the conditional block using on-page editing tools.

  9. Preview the changes, then save and publish the updates.

[Screenshot Placeholder: Visual Builder interface on receipt page showing Logic element addition]

Expected Result

The custom content will appear on the receipt only for orders containing the specified item, enhancing personalization without affecting other orders.

Legacy Non-visual Builder Enabled Storefront Themes

The following tutorial will guide you through adding content to the receipt that is only displayed when the customer purchases a specific item.  First hover over the StoreFronts menu on the left hand navigation and select the StoreFront you're working with as shown below.

Next click on "Templates" and then click on "Checkout"

Scroll down until you reach "templates/system/checkout/receipt.vm" as shown below.

Now scroll down in the file to around line 213 where you will find "form.htmlOrder".  We are going to place our content just above that.  An example snippet of code is:

## Start Conditional if item earthtone_mug is purchased #if ($order.isPurchased("earththone_mug")) Special custom content goes here. #end ## End Conditional if item earthtone_mug is purchased

After placing the code into the page, make sure to click save.  The steps are shown below.