{"title":"How to insert media using Liquid","slug":"liquid-how-to-insert-media","url":"https://support.storeconnect.com/articles/liquid-how-to-insert-media","url_markdown":"https://support.storeconnect.com/articles/liquid-how-to-insert-media.md","subtitle":null,"summary":"Embed images, videos, YouTube, Vimeo, and content blocks in your store templates using Liquid filters, with size options and version-specific syntax.","type":"Help_Documentation","video_url":"","keywords":"liquid, insert media, embed images, embed video, liquid filters, youtube, vimeo, content blocks, image size, all_media, theme templates, dynamic content","last_modified":"2026-08-21T07:12:35+0000","body_markdown":"## Inserting images using Liquid filters\n\nYou can easily insert any image from the database into your content by using a simple liquid filter. This method is particularly useful when creating complex theme templates, or when you need to insert images within text in your articles or page content.\n\n**Example**\n\nSuppose you have uploaded an image of your bike product. The media record has generated the identifier `spin-bike-home-hero`, which you can use within the following liquid image filter:\n\n\n```\n\n{% assign image = all_media['spin-bike-home-hero'] %}\n```\n\n\nor you can use it in one line of code:\n\n\n```\n\u003cimg src=\"{{ all_media['spin-bike-home-hero'].url }}\" alt=\"{{ all_media['spin-bike-home-hero'].alt_text }}\" /\u003e\n\n```\n\n\nAnd this will be the output with its original size:\n\n![Spin Bike Image](https://res.cloudinary.com/hzkr6fi81/image/upload/v1781677797/documentation-media/liquid/spin-bike.png)\n\nIf you still using a StoreConnect version below 10.50, please use the following liquid filter:\n\n\n```\n{{ \"spin-bike-home-hero\" | image, size: \"large\", class: \"some-class\", alt: \"Spin Bike Image\" }}\n```\n\n\n### Rendering images in various sizes\n\nWith our cloud-based storage, you can now render images in different sizes. This becomes very useful when you need to save site memory and fit images according to your design.\n\n**Important:** Avoid setting an image size attribute in hero and full-width banners as they will not expand to 100% on very large screens.\n\nAvailable image sizes include:\n\n-   massive: 2048px\n-   huge: 1024px\n-   large: 640px\n-   medium: 480px\n-   thumb: 240px\n-   small: 100px\n-   tiny: 50px\n-   icon: 32px\n-   pico: 16px\n\n**Example using the thumb size attribute**\n\n\n```\n\u003cimg src=\"{{ all_media['spin-bike-home-hero'].image.thumb_url }}\" alt=\"{{ all_media['spin-bike-home-hero'].image.alt_text }}\"\u003e\n```\n\n\n**Output:** A 240px width image\n\n![Spin Bike Image](https://res.cloudinary.com/hzkr6fi81/image/upload/v1781677797/documentation-media/liquid/spin-bike.png)\n\n## Inserting videos\n\nYou can insert any video from the database with a simple liquid filter. This filter is useful when you want to embed a video within some content or within an article. They can also be used within theme templates.\n\nThe input (sample-video) is the Video identifier. The rest of the inputs are all optional.\n\n\n```\n\u003cvideo controls=\"controls\" loop=\"loop\" muted=\"muted\" src=\"{{ all_media['sample-video'].url }}\" width=\"100%\" height=\"auto\"\u003e\u003c/video\u003e\n```\n\n\nUse the following filter if you using any version below StoreConnect 10.5.\n\n\n```\n{{ \"sample-video\" | video: autoplay: false, controls: true, height: 'auto', width: '100%', loop: true, muted: true }}\n```\n\n\nThis will output:\n\n## Embedding youtube videos\n\nThe input (MdAKrzOLQTg) is the YouTube video id.\n\n\n```\n{{ \"MdAKrzOLQTg\" | youtube }}\n```\n\n\nThis will load the video:\n\n\u003ciframe src=\"https://www.youtube.com/embed/MdAKrzOLQTg?start=0\" allowfullscreen width=\"720\" height=\"405\"\u003e\u003c/iframe\u003e\n\nYou can also specifying the starting time (in seconds) like this:\n\n\n```\n{{ \"MdAKrzOLQTg\" | youtube, 10 }}\n```\n\n\nStoreConnect 10.5.0 and up use\n\n\n```\n{{ \"MdAKrzOLQTg\" | youtube, start_at: 10 }}\n```\n\n\nThis will load the video and start it 10 seconds in.\n\n\u003ciframe src=\"https://www.youtube.com/embed/MdAKrzOLQTg?start=10\" allowfullscreen width=\"720\" height=\"405\"\u003e\u003c/iframe\u003e\n\n## Embedding vimeo videos\n\nThe input (65107797) is the Vimeo video id.\n\n\n```\n{{ \"65107797\" | vimeo }}\n```\n\n\nThis will load the video:\n\n\u003ciframe src=\"https://player.vimeo.com/video/65107797#t=0s\" allowfullscreen width=\"720\" height=\"405\"\u003e\u003c/iframe\u003e\n\nYou can also specifying the starting time (in seconds) like this:\n\n\n```\n{{ \"65107797\" | vimeo, 10 }}\n```\n\n\nStoreConnect 10.5.0 and up use\n\n\n```\n{{ \"65107797\" | vimeo, start_at: 10 }}\n```\n\n\nThis will load the video and start it 10 seconds in.\n\n\u003ciframe src=\"https://player.vimeo.com/video/65107797#t=10s\" allowfullscreen width=\"720\" height=\"405\"\u003e\u003c/iframe\u003e\n\n## Inserting content blocks\n\nYou can insert any content block from the database with a simple liquid filter.\n\nThe input (main-image-overlay-block) is the Content Block identifier.\n\n\n```\n  {{ \"main-image-overlay-block\" | content }}\n```\n\n\nIf you are using StoreConnect 10.5.0 and up use:\n\n\n```\n  {{ all_content_blocks[\"main-image-overlay-block\"].render }}\n```\n\n\nThis will output the content block with that identifier."}