Assign Cookie To Variable? Shopify

I'm pretty new to all this so please bear with me! I am using Shopify and would like to change a picture on one of the pages based on which collection the customer just viewed.

We hope to achieve this using cookies. So far, I have managed to assign a cookie equal to the collection's handle when a user visits a collection (I know this works because it's been tested elsewhere on the site with a different feature) but I can't figure out how to use this to show the correct image.

All of our image files have been matched with the right collection by naming them with the handle of the collection. So, say you have just been on the collection with the handle defenders-of-wildlife, to display the image on the page the code is: {{ 'defenders-of-wildlife' | asset_url | img_tag }}

So I need to find a way to use the cookie to change that first section in the code.

Any advice is very much appreciated!!

You can not read in cookie in shopify liquid language. Everything needs to be done using js.

for example you can assign the shopify asset_url to a javascript variable.

var img_path = '{{ '?' | asset_url | split:'?' | first }}';

Then add your collection handle name from cookie and image extension ( .jpg or .png ) . Then display the image using javascript.