Working with HTML and URL filters

In the previous chapter, we had the chance to see a type of URL filter when we worked on outputting the product images, {{ image | img_url: "400x400" }}. However, what exactly are URL filters?

URL filters are methods that allow us to output a direct path to the assets on Shopify's Content Delivery Network (CDN). We can use URL filters in many ways. However, URL filters alone only provide a string path to the requested asset. Therefore, to find them helpful, we must pair them with HTML tags, such as the image tag, inside which we can add the string path to a specific asset as the href attribute. Alternatively, we can combine URL filters with HTML filters to automatically generate the necessary HTML element with the necessary attributes. Let's see them in action now.

In Chapter 1, Getting Started with Shopify, we learned about the Assets directory inside our theme files and how it contains all of the internal assets that our...