This article is intended for advanced users and our partners as it requires advanced web development or Salesforce admin or programming knowledge. While the functionality is part of StoreConnect, we do not provide end user assistance to implement it beyond our help documentation. If you need help or are unsure on how to do this, you can hire one of our StoreConnect partners.

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:

Spin Bike Image

Where, size: "large" in the above example, other available image sizes include:

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