Dynamically Change the Gift Card Image In the Cart to Match the Design Selected

You can add a snippet of code to your theme in order to change the image associated with the Gift Card product in cart.

What this means, is that the gift card design chosen by your customer will show in the cart where the product image loads. See here different designs chosen for different cards:

The first step is to add a new Snippet to your theme.

***It is always recommended to make theme file edits on a duplicate theme.

Go to the theme that you will be making the change on, and select Actions –> Edit Code.

Next, go to your Snippets folder, and select Add a new snippet.

Name this snippet cart-product-image:

Next, copy and paste this code into your cart-product-image.liquid file, and press Save.

{% assign is_gift_card = "false" %}
{% assign product_image = item.image %}
{% assign product_image_url = item.image | image_url: width: 300 %}
{% assign product_image_alt = item.image.alt | escape %}
{%- for p in item.properties -%}
  {% if p.first contains "_gcp" %}
    {% assign is_gift_card = "true" %}
    {% if p.last contains "/images/" %}
      {% assign product_image = p.last %}
      {% assign product_image_url = p.last %}
      {% assign product_image_alt = 'Gift Card' %}
    {% endif %}
  {% endif %}
{% endfor %}


<div class="CartItem__ImageWrapper AspectRatio">
  <div class="AspectRatio" style="--aspect-ratio: {{ product_image.aspect_ratio }}"> 
      <img src="{{ product_image_url }}" class="cartItem__Image" alt="{{ product_image_alt | escape }}" loading="lazy" width="150" height="{{ 150 | divided_by: product_image.aspect_ratio | ceil }}">
  </div>
</div>

Next, go to the location in your theme files where your cart items loop is present. Usually in cart.liquid, main-cart-items.liquid, cart-items.liquid, etc.

The cart items loop will generally start with a line that reads: {%- for item in cart.items -%}

Once you locate this, we want to comment out the existing line that loads the image.

It’s the line that will start with <img src=”{{ item.image…

Add a <!– and –> around this line:

Beneath this line, we will add a new line that will pull through our dynamic (or if it’s a regular product) image.

{%- render 'cart-product-image' with item: item -%}

Your Cart page will now pull through these dynamic values.

Please note – to also pull these through to the Checkout, you must be on Shopify Plus.

If you have any questions about the above, please don’t hesitate to get in touch with us as support@gist-apps.com