Liquid How-to: Inserting Media with Liquid Media Filters
Inserting Content Blocks
You can insert any content block from the database with a simple liquid filter.
The input (main-image-overlay-block) is the Content Block identifier.
{{ "main-image-overlay-block" | content }}
If you are using StoreConnect 10.5.0 and up use:
{{ all_content_blocks["main-image-overlay-block"].render }}
This will output the content block with that identifier.
Inserting Images
You can insert any image from the database with a simple liquid filter.
The input (main-image-overlay-block) is the Image identifier.
{{ "spin-bike-home-hero" | image, size: "large", class: "some-class", alt: "Spin Bike Image" }}
StoreConnect 10.5.0 and up use
<img src="{{ all_media['spin-bike-home-hero'].url }}" alt="{{ all_media['spin-bike-home-hero'].alt_text }}" />
This will output:
Where, size: "large"
in the above example, other available image sizes include:
- huge
- icon
- large
- massive
- medium
- pico
- small
- thumb
- tiny
For example, use size: "thumb"
for a thumbnail sized image.
Inserting Videos
You can insert any video from the database with a simple liquid filter.
The input (sample-video) is the Video identifier. The rest of the inputs are all optional.
{{ "sample-video" | video: autoplay: false, controls: true, height: 'auto', width: '100%', loop: true, muted: true }}
StoreConnect 10.5.0 and up use
<video controls="controls" loop="loop" muted="muted" src="{{ all_media['sample-video'].url }}" width="100%" height="auto"></video>
This will output:
Embedding YouTube Videos
The input (MdAKrzOLQTg) is the YouTube video id.
{{ "MdAKrzOLQTg" | youtube }}
This will load the video:
You can also specifying the starting time (in seconds) like this:
{{ "MdAKrzOLQTg" | youtube, 10 }}
StoreConnect 10.5.0 and up use
{{ "MdAKrzOLQTg" | youtube, start_at: 10 }}
This will load the video and start it 10 seconds in.
Embedding Vimeo Videos
The input (65107797) is the Vimeo video id.
{{ "65107797" | vimeo }}
This will load the video:
You can also specifying the starting time (in seconds) like this:
{{ "65107797" | vimeo, 10 }}
StoreConnect 10.5.0 and up use
{{ "65107797" | vimeo, start_at: 10 }}
This will load the video and start it 10 seconds in.
Back to Documentation