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.