Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Debugging Objects in Shopify Templates
<script>console.log({{ product | json }});</script>
@veganista
Copy link
Author

This will log an object to the developer console for debugging

@leixiaochen
Copy link

tanks!!!!!

@WoyongE
Copy link

WoyongE commented Dec 22, 2020

Thanks!!

@procarrera
Copy link

saved my life!

@aguriken
Copy link

Thx !

@heo001997
Copy link

Nice xừ!

@honestech74
Copy link

Someone might need this for the string log.
<script>console.log({{ image | img_url: 'master' }}");</script>

@Thiritin
Copy link

Thiritin commented Sep 3, 2021

Thank you very much!

@linus-komnick
Copy link

linus-komnick commented Oct 26, 2021

Thx! It works. But not everywhere. E.g. in product-template.liquid I was able to get the log when inserting it above the div with the product description:

        <script>console.log({{ product | json }});</script>

        <div class="product-single__description rte">
          {{ product.description }}
        </div>

@Henry31
Copy link

Henry31 commented Apr 21, 2022

Thanks a lot!

@ru4ert
Copy link

ru4ert commented May 2, 2022

What are you doing when you have larger objects and JSON isn't allowed?

Shopify/liquid#1153
json not allowed for this object

@veganista
Copy link
Author

I accessed the properties of the object until it allowed me to do it in my last project.

For example...

<script>console.log({{ product.images | json }});</script>

When I first posted this product supported JSON, but I guess now it doesn't.

This snippet was a quick way of me examining the object without looking at the docs, maybe not quite as useful now.

@gdSuhail
Copy link

gdSuhail commented Jun 2, 2022

Thanks

@luongh0202
Copy link

Good job

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment