For stores that do not support Shopify app blocks, such as vintage themes or headless stores, you can add the Moast carousel via an embed code.
Copy and paste this code into a Custom HTML section on any page to get started:
<script src="/apps/moast/embed/carousel.js" async type="module"></script>
<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.
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 |
| All | Behaviour of the buy button, either link to the product page or open a quick add. Defaults to "add". |
sort |
| All | Sort order for the media between:
|
mute-player |
| All | Open the player muted. |
autoplay-mode |
| Pro | Autoplay videos in the carousel. Defaults to all on the free plan. |
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. |
player-mode |
| 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 |
| Pro | Which corner of the screen to display the floating player in. Defaults to “bottom-right”. |
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.
<script src="/apps/moast/embed/carousel.js" async type="module"></script>
<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>
⚠️ 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!
📌 If you need help installing the carousel using our embed code, our team’s here to help! Reach out via chat or email.