Cart: Add an image to the cart

To add an image at the bottom of your cart page, you can add some HTML code and CSS style to your cart.liquid file from the templates folder.

Sample result for Modal cart:

For this customization, the image can be any image you've uploaded to your Shopify Files. We don't recommend linking to an external image outside of your Shopify Files library. 

Example Page cart:

Important: This is an advanced customization - Intermediate HTML and CSS code experience is required.

1

Add image to Shopify Files library

If you have a custom image to use, upload that image to your Files library:

Quick link:
https://shopify.com/admin/settings/files

Upload your image here.

Image URL:

The URL is longer than what's show, be aware of that as we will need the complete URL in step 3. 

2

Find location to add image code to cart.liquid

Always make a duplicate of your theme before adding any code. This will save you if anything goes wrong or if you decide not to use the added code in the future. We can not support or be responsible of any code changes that you make to your theme. For that reason, save yourself and make a duplicate first.

Make a duplicate before any code changes:

Next, open the Code Editor:

From your list of themes, find the Actions link for the theme you'd like to edit. Then select Edit code. Example draft theme:

Example if you're working from your main live/published theme:

Important: Since this is a cart modification, do not skip creating a duplicate of your theme.

From the templates folder, open cart.liquid:

In the code area, use the Find feature (Command-F on Mac, Control-F in Windows) and search for:

/form

Once you find the closing form tag, add a couple blank lines above. We will insert some HTML above the closing form tag:

3

Sample image code

Add your image HTML above the closing form tag. Here is a sample you can use and then modify with your own image:

<div class="cart-image">
<img src="https://cdn.shopify.com/s/files/1/2018/8867/files/secure-checkout.png?15647581554923919392">
</div>

Example:

Next: 

Return to Step 1 and copy the entire URL of your image. 

Replace inside the quotes of second line with the entire URL from Step 1 of your image. Be sure you only replace what's inside the double-quotes and not the entire line:

Save the file

4

Add CSS style code

Open theme.scss.liquid (Pipeline 4 and above) or style.scss.liquid for earlier versions of Pipeline:

Use this link to learn where exactly to add this code snippet:

Where to add your CSS style code

Code to add at the bottom:

/* -- custom image on cart page -- */
.cart-image {
  display:flex;
  justify-content: center;
  margin-top: 10px;    
}
.cart-image img {max-height:80px}
/* - end - */

I've used a max-height setting of 80px for my sample image. You may need to modify that value based on your image size.

Notes:
Since we are using flex-box, the alignment can be adjusted. Here are left, center and right versions:

justify-content: flex-start;
justify-content: center;
justify-content: flex-end;

Save the file