Liquid img_url: How to Get Image URL in Shopify
Drive 20-40% of your revenue with Avada
Shopify is now known as the marketplace with exetreme lucrative revenue. The reasons for Shopify becoming an effective markets for online sellers are its useful functionalities and the 24/7 supportation. One of the best tools in Shopify is Liquid which is a flexible and safe language in Shopify. In addition, thank to the Liquid applications, online merchants have built their websites by manipulating storefront. They can create a professional stores website in their admin dashboard.
Such as a reference to a web resource, Uniform Resource Locator which is stood for URL specifies the location from a computer network or a mechanism. Moreover, people also have term URI (Uniform Resource Identifier) to descript for this URL is a specific type. In many websites and web browsers, Uniform Resource Locator is displayed in an address bar by the URL of a web page. In addition, URLs is usually to reference web pages (http), file transfer (ftp), email (mailto), database access (JDBC), and other applications.
In this article Liquid img_url: How to Get Image URL in Shopify will provide the Shopify users simple steps to get their image URLs.
Free 1:1 Shopify consultation & 30-day all-app trial FREE
- Shopify Plus Strategy and Consultation
- Personalized E-commerce Solutions
- Conversion Rate Boosting Techniques
- Inventory Management Hacks
Liquid img_url: How to Get Image URL in Shopify
About Image URL {#about-image-url}
An image URL is defined as an internet address that link the readers to a specific image directly. Instead of showing an entire index, webpage, by the image URL, the internet users can see how the product looks like. Besies, the web developers can totally descript of the image inluding their filenames. As the rule in the HTML code, it is essential for URL form is with the tag which is inside.
There are many kind of Liquid objects that allows the Shopify store owners to use img_url on such as product, variant, line item, collection, article or image. Besides, the Shopify store owners can modify the size of images depending on their purposes. Especially, this functionality has been accepted by image size parameters.
How to Get Image URL in Shopify
Case 1
At the Shopify admin dashboard, the Shopify store owners can find these codes.
After that, they should copy the below codes to paste img_url: '100x100'
Within the code, '100x100' is the size of image.
Input
{{ product | img_url: '100x100' }}
{{ variant | img_url: '720x720' }}
{{ line_item | img_url: '1024x' }}
{{ product | img_url }}
After entering the input, the output will be as below:
Output
https://cdn.shopify.com/s/files/1/1183/1048/products/boat-shoes_100x100.jpeg?v=1459175177
https://cdn.shopify.com/s/files/1/1183/1048/products/boat-shoes_720x720.jpeg?v=1459175177
https://cdn.shopify.com/s/files/1/1183/1048/products/boat-shoes_1024x.jpeg?v=1459175177
https://cdn.shopify.com/s/files/1/1183/1048/products/boat-shoes_small.jpeg?v=1459175177
Case 2
The Shopify store owners also can use img_url on the src attributes object.
The input below as a example for the case.
Input
{{ variant.image | img_url: '300x300' }}
{{ variant.image.src | img_url: '240x' }}
Output
After entering the input, the results will be like that:
https://cdn.shopify.com/s/files/1/0159/3350/products/red_shirt_100x100.jpg?v=1398706734
https://cdn.shopify.com/s/files/1/0159/3350/products/red_shirt_240x.jpg?v=1398706734
img_url can't transform icon files (.ico). If you specify a size or format for an icon file, img_url will return the original file.
Case 3
Because the img_url is not enable transforming into icon files (.ico), it will make img_url return to the original file.
This is the input:
Input
{{ settings.favicon | img_url: '300x300' }}
{{ settings.favicon | img_url: '240x', scale: 2, format: 'pjpg' }}
Output
The result of the input will be like that:
https://cdn.shopify.com/s/files/1/0159/3350/files/icon.ico?v=1398706734
https://cdn.shopify.com/s/files/1/0159/3350/files/icon.ico?v=1398706734
Conclusion
For the images in Sohpify, the default size is 100x100. In case that online sellers requests a smaller images, it is possible for the Shopify store owners to scale the images for online sellers. Unless the variant have an assigned image, img_url will return the URL of featured image. Through the article Liquid img_url: How to Get Image URL in Shopify which includes simple steps to get the image URLs. In addition, we hope that online sellers can have more understanding Liquid URLs through our chain of articles in this list:
- How to Generate a Link in Shopify
- How to Get a Link From Vendor in Shopify
- How to Get a Type Link in Shopify
- How to Get a Tag Link in Shopify
- How to Add a Tag Link in Shopify
- How to Get a Payment Type Image URL in Shopify
Liquid
