Articles on: CornerCart

How to override title or image of a product rendered in the cart?

Does your store have long product titles for SEO purposes that become unreadable in the cart? Corner Cart allows you to display alternate, shorter titles and different images specifically for your cart drawer using Shopify metafields.



What You'll Need

This feature uses Shopify's metafield system to store alternate product information. You can override:

  • Product titles - Display shorter, cart-friendly titles
  • Product images - Show different images in the cart (using image URLs)



Step 1: Create Metafields in Shopify

First, you'll need to create product-level metafields in your Shopify admin.

  1. Go to Settings → Metafields & Meta Objects
  2. Under the "Metafield definitions" card, select Products
  3. Either select an existing metafield or click Add Definition to create a new one


Metafield setting

Setting Up Your Metafield


When creating or editing a metafield definition:

  1. Copy the Namespace and Key: Look for the textbox labeled "Namespace and key" - this will show a value in the format namespace.key (for example: custom.cart_title)
  2. Save this value - you'll need it later for Corner Cart configuration
  3. Enable API Access: Make sure the "Storefront API access" toggle is turned ON - this is crucial for the feature to work




Important: The namespace and key can only be edited when creating a new metafield. Once created, this value becomes read-only.

Repeat this process if you want to create separate metafields for both title and image overrides.





Step 2: Configure Corner Cart

Now you'll connect your metafields to Corner Cart:

  1. Open the Corner Cart app
  2. Navigate to Cart Drawer → Cart Behaviours
  3. Click Show More Options
  4. Find the Cart Overrides section
  5. Paste your metafield namespace and key values:
    • Alternate Product Title: Enter the namespace & key for your title metafield
    • Alternate Product Image: Enter the namespace & key for your image metafield (the metafield value should contain an image URL)





Step 3: Add Alternate Values to Your Products

With the metafields created and Corner Cart configured, you can now add alternate values to specific products:

  1. Go to your Shopify Admin → Products
  2. Edit the product you want to customize
  3. Scroll to the bottom of the product edit page
  4. You'll see text boxes for the metafields you created
  5. Add your alternate values:
    • For titles: Enter a shorter, cart-friendly title
    • For images: Enter the full URL of the image you want to display



Step 4: Test Your Setup

To verify everything is working correctly:

  1. Open an incognito/private browser tab (this prevents caching issues)
  2. Visit your store
  3. Add products with alternate metafield values to your cart
  4. Open the cart drawer to see your custom titles and images

Why incognito? Private browsing ensures you're seeing the latest changes without any browser cache interference.


Troubleshooting Tips

  • Not seeing changes? Make sure "Storefront API access" is enabled for your metafields
  • Images not displaying? Verify that your image metafield contains valid image URLs
  • Still showing original titles? Double-check that the namespace.key values in Corner Cart exactly match your Shopify metafield definitions

That's it! Your cart will now display the alternate titles and images you've specified, making your cart more readable while keeping your SEO-optimized product titles on your product pages.

Updated on: 17/06/2025

Was this article helpful?

Share your feedback

Cancel

Thank you!