You can use the image_tag <\/strong>filter in Liquid code to add images anywhere in Shopify. It generates an <img> HTML tag to display images.<\/p>\n\n\n\n For example:<\/p>\n\n\n\n {{ image_source | image_url | image_tag }}<\/p>\n\n\n\n Here:<\/p>\n\n\n\n You can also specify image attributes in the code to generate images of specific sizes or add image alt texts. E.g.:<\/p>\n\n\n\n {{ product.featured_image | image_url: width: 200 | image_tag: alt: product.title, width: 200, height: 200, loading: ‘lazy’ }}<\/p>\n\n\n\n The above code will generate an image tag from the Product > Featured Image object with specific height, width, alt text, and lazy loading.<\/p>\n\n\n\n You can use the code directly where you want to add images in Shopify. Here are the steps:<\/p>\n\n\n\n Navigate to Shopify admin > Online Store > Themes > three dots(…) > Edit code<\/strong><\/p>\n\n\n Add a Custom Liquid section in the theme editor or edit a .liquid file (e.g., sections\/meetanshi-custom-image.liquid)<\/strong>.<\/p>\n\n\n\n Click on Add a new section.<\/strong><\/p>\n\n\n Then create a liquid file named meetanshi-custom-image<\/p>\n\n\n Now, add this code in the file:<\/p>\n\n\n\n Then, save <\/strong>the file. <\/p>\n\n\n Save them file and top Click the three dots(…) > <\/strong>Customize theme<\/strong><\/p>\n\n\n To add the Meetanshi Custom Image<\/strong> section, go to Customize<\/strong>, click on Add Section<\/strong>, and select Meetanshi Custom Image<\/strong> from the list<\/p>\n\n\n Add a section, then click on any image to select it<\/p>\n\n\n Choose an image, add it, and use the Save or Preview buttons<\/p>\n\n\n To dynamically load the current product or collection image, you can use the image_tag<\/strong> with other Liquid components like:<\/p>\n\n\n\n For product images:<\/strong><\/p>\n\n\n\n {{ product.featured_image | image_url: width: 400 | image_tag }}<\/p>\n\n\n\n For collection images:<\/strong><\/p>\n\n\n\n {{ collection.image | image_url: width: 400 | image_tag }}<\/p>\n\n\n\n The above syntaxes will render images of the respective product and collection. This is helpful when you\u2019re making changes to the Shopify template files and want to load media dynamically.<\/p>\n\n\n\n You can specify the filter inside the image syntax code, separated by a pipe |<\/strong> sign. Here are some examples of common image filters in Shopify Liquid:<\/p>\n\n\n\n You can also combine these filters to achieve specific outputs in Shopify Liquid code.<\/p>\n\n\n\n You can use the following Liquid code to define a background image:<\/p>\n\n\n\n <div style=”background-image: url(‘{{ image | image_url }}’); background-size: cover; height: 400px;”><\/p>\n\n\n\n In the above code, make sure to replace the image <\/strong>with the correct path to the image.<\/p>\n\n\n\n\n
How to Add an Image in Custom Liquid Shopify?<\/strong><\/h2>\n\n\n\n
Step 1: Edit Theme Code<\/h3>\n\n\n\n
![\"Edit](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/1-Edit-Theme-Code.png\")
<\/figure>\n<\/div>\n\n\nStep 2: Create Custom Liquid Block<\/h3>\n\n\n\n
![\"Click](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/2-Click-on-Add-a-New-Section.png\")
<\/figure>\n<\/div>\n\n\n![\"Create](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/3-Create-a-Liquid-File-Named-meetanshi-custom-image.png\")
<\/figure>\n<\/div>\n\n\n{% style %}\n .custom-image {\n\tdisplay: flex;\n\tjustify-content: center;\n }\n .meetanshi-image,svg {\n\twidth: auto;\n\theight: 300px;\n }\n\n .custom-image svg {\n\twidth: 200px;\n\theight: 200px;\n\tbackground: gainsboro;\n }\n{% endstyle %}\n\n<div class=\"custom-image\">\n {% if section.settings.image != blank %}\n\t<img\n \tclass=\"meetanshi-image\"\n \tsrc=\"{{ section.settings.image | image_url }}\"\n \talt=\"{{ section.settings.image.alt }}\"\n \twidth=\"{{ section.settings.image.width }}\"\n \theight=\"{{ section.settings.image.height }}\"\n\t>\n {% else %}\n\t{{ 'image' | placeholder_svg_tag }}\n {% endif %}\n<\/div>\n{% schema %}\n{\n \"name\": \"Meetanshi Custom Image\",\n \"settings\": [\n\t{\n \t\"type\": \"image_picker\",\n \t\"id\": \"image\",\n \t\"label\": \"Select Image\"\n\t}\n ],\n \"presets\": [\n\t{\n \t\"name\": \"Meetanshi Custom Image\"\n\t}\n ]\n}\n{% endschema %}\n<\/pre>\n\n\n\n![\"Save](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/4-Save-the-File.png\")
<\/figure>\n<\/div>\n\n\n![\"Customize](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/5-Customize-Theme.png\")
<\/figure>\n<\/div>\n\n\n![\"Customize](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/6-Customize-Add-Section-Add-Meetanshi-Custom-Image.png\")
<\/figure>\n<\/div>\n\n\n![\"Add](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/7-Add-Section-and-Click-on-Any-Image-to-Select.png\")
<\/figure>\n<\/div>\n\n\n![\"Choose](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/8-Choose-Image-Add-It-Save-and-Preview.png\")
<\/figure>\n<\/div>\n\n![\"Image](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/9-Image-Preview.png\")
<\/figure>\n<\/div>\n\n\nDynamically Get Product\/Collection Image<\/strong><\/h2>\n\n\n\n
Frequently Asked Questions<\/strong><\/h2>\n\n\n\n
How to Apply Image Filters in Liquid Code?<\/h3>\n\n\n\n
\n
Can I Set a Background Image in Shopify Liquid?<\/h3>\n\n\n\n