Install Any Moast Widget Using Embed Code

For stores that do not support Shopify app blocks, such as vintage themes or headless stores, you can add the Moast widgets via an embed code.

⚠️ The embed feature is currently in beta, and we're actively working on improvements to make the installation process faster and easier. Thanks for your patience as we continue to refine it!

Carousel

Copy and paste this code into a Custom HTML section on any page:

<moast-carousel autoplay show-likes show-share mute-player></moast-carousel>

The moast-carousel element accepts the following options for you to customize the look and functionality of your player in the same way you do from the theme editor.

Properties

Some features are only available in the Pro plan. If your store is using the Free plan, the property will not apply.

Property	Values	Plan	Notes
show-likes		All	Displays the like button in the fullscreen player.
show-share		All	Displays the share button in the fullscreen player.
buy-action	link add	All	Behaviour of the buy button, either link to the product page or open a quick add. Defaults to "add".
sort	video manual random	All	Sort order for the media between: Video-priority will randomize the order and place the videos at the front Manual - the order set in the feed view of the app Random - randomized order
mute-player		All	Open the player muted.
slide-type	cards stories	All	How to display the slides. Cards - Displays the slides as cards (9:16 aspect ratio) Stories - Displays them as smaller circles
autoplay-mode	all showcase sequential none	Pro	Autoplay videos in the carousel. Defaults to all on the free plan. All - plays all videos Showcase - will play one video at a time, in a larger, featured format Sequential - will play one video at a time None - won’t autoplay any videos
autoscroll	number (min: 0)	Pro	Time in seconds to automatically scroll the carousel to the next slide. 0s on the Free plan.
show-products		Pro	Display the product cards on the carousel. Products will always be displayed in the fullscreen player.
show-reviews		Pro	Show reviews on the product cards.
show-captions		Pro	Show captions below the slides in the carousel.
show-player-captions		Pro	Show captions in the fullscreen player.
player-mode	floating fullscreen	Pro	Which mode to open the player in between fullscreen or floating in the screen corner. Defaults to fullscreen on the Free plan.
float-location	bottom-right bottom-left top-right top-left	Pro	Which corner of the screen to display the floating player in. Defaults to “bottom-right”.

Filtering by product

To show media for one specific product, you can add the product ID to the embed code. This tells the widget to only display videos or photos tagged with that product.

HTML

<moast-carousel
  product="1234567"
></moast-carousel>

If you're adding the widget to a Liquid template like product.liquid, you can insert it dynamically so it automatically shows the right videos for each product. For example, if a video is tagged with Product A, it will only appear on Product A’s product page.

HTML

<moast-carousel
  product="{{ product.id }}"
></moast-carousel>

CSS Variables

The player exposes a few CSS variables that can be tweaked. The following are the default values:

CSS

--moast-padding-top: 40px;
--moast-padding-bottom: 40px;
--moast-slide-spacing: 16px;
--moast-slide-rounding: 20px;
--moast-slide-size: 250px;
--moast-border: 0px;
--moast-border-color: linear-gradient(to right, #833ab4, #fd1d1d, #fcb045);

Add them to the player in a style tag to modify them:

HTML

<script src="/apps/moast/embed/carousel.js" async type="module"></script>
<moast-carousel
 style="
    --moast-padding-top: 0px;
    --moast-padding-bottom: 0px;
    --moast-slide-spacing: 8px;
    --moast-slide-rounding: 0px;
    --moast-slide-size: 200px;
    --moast-border: 2px;
    --moast-border-color: #000000;
  "
></moast-carousel>

Example of a Customized Player

The following would display a player whose videos would autoplay; with product cards on the slides; display likes and share on the player; open the products as links; sort the slides by the order set in the feed view; open the player in a floating view in the bottom left; and autoscroll the slides every 6s.

<moast-carousel

autoplay

show-products

show-likes

show-share

buy-action="link"

sort="manual"

player-mode="floating"

float-location="bottom-left"

autoscroll="6"

></moast-carousel>

ℹ️ To add the Stories carousel, make sure to change the slide type property to stories: slide-type="stories".

📌 If you need help installing the carousel using our embed code, our team’s here to help! Reach out via chat or email.

Pop-Up (Floating)

The Pop-Up (Floating player) is only accessible on the pro plan.

Copy and paste this code into a Custom HTML section on any page:

<script src="/apps/moast/embed/floating.js" async type="module"></script> 
<moast-floating></moast-floating>

The moast-floating element accepts the following options for you to customize the look and functionality of your player in the same way you do from the theme editor.

Properties

Property	Values	Plan	Notes
delay	Number (min: 0)	Pro	Number of seconds before the floating player appears. Defaults to 5s.
show-likes		Pro	Displays the like button in the fullscreen player.
show-share		Pro	Displays the share button in the fullscreen player.
show-reviews		Pro	Show reviews on the product cards.
show-player-captions		Pro	Show captions in the fullscreen player.
buy-action	link add	Pro	Behaviour of the buy button, either link to the product page or open a quick add. Defaults to "add".
sort	video manual random	Pro	Sort order for the media between: Video-priority will randomize the order and place the videos at the front Manual - the order set in the feed view of the app Random - randomized order
float-location	bottom-right bottom-left top-right top-left	Pro	Which corner of the screen to display the floating player in. Defaults to “bottom-right”.
float-size	small medium large	Pro	Size of the floating widget. Defaults to “250px” on the Free plan.

Filtering by product

To show media for one specific product, you can add the product ID to the embed code. This tells the widget to only display videos or photos tagged with that product.

HTML

<moast-floating
  product="1234567"
></moast-carousel>

If you're adding the widget to a Liquid template like product.liquid, you can insert it dynamically so it automatically shows the right videos for each product. For example, if a video is tagged with Product A, it will only appear on Product A’s product page.

HTML

<moast-floating
  product="{{ product.id }}"
></moast-carousel>

CSS Variables

The player exposes a few CSS variables that can be tweaked. The following are the default values:

CSS

--moast-slide-rounding: 20px;

Add them to the player in a style tag to modify them:

HTML

<script src="/apps/moast/embed/floating.js" async type="module"></script>
<moast-floating
  style="
    --moast-slide-rounding: 0px;
  "
></moast-floating>

Example of a customized player

The following would display a floating widget that would appear after 10 seconds; display likes and share on the player; open the products as links; sort the slides by the order set in the feed view; open the player in a floating view in the bottom left in a small size.

HTML

<script src="/apps/moast/embed/floating.js" async type="module"></script>
<moast-floating
  delay="10"
  show-likes
  show-share
  buy-action="link"
  sort="manual"
  float-location="bottom-left"
  float-size="small"
></moast-floating>

📌 If you need help installing the Pop-Up (Floating Player) using our embed code, our team’s here to help! Reach out via chat or email.

What Are Moast Widgets?

How to Customize The Carousel Widget

How to Customize The Stories Widget

Carousel Widget Updates