How to use the widget editor

Open the Widgets tab in the Moast dashboard to create, edit, preview, and publish widgets.

Create a new widget

In the Moast dashboard, go to Widgets and click New widget to start the creation flow.

1. Choose a widget type: Carousel, Stories, Featured video, Pop up, Grid, Single video, or Video banner.

2. Choose a placement:

   • Product page — show different videos on each product page.

   • Collection page — show only videos tagged with products in that collection.

   • Anywhere — show the same videos wherever this widget is placed.

3. If you chose Product page, pick a product source:

   • Smart auto-match — videos automatically appear on product pages when you tag them.

   • Custom product feeds — hand-pick which videos appear on each product page.

   • Universal feed — show the same collection of videos on every product page.

4. If you chose Collection page, pick a collection source:

   • Smart auto-match — videos tagged with products in the collection appear automatically.

   • Custom collection feeds — hand-pick which videos appear on each collection page.

   • Universal feed — show the same videos on every collection page.

5. Enter a name for the widget.

6. Click Create. The widget editor opens so you can adjust settings right away.

Navigate the editor with tabs

The widget editor organizes settings into tabs at the top of the screen. Each tab groups related controls. The tabs you see depend on your widget type.

The Media tab is always first and controls which videos and images appear. The middle tabs contain styling and layout options for your specific widget type. The Player tab controls how videos behave when opened in fullscreen. The Advanced tab has custom CSS options. The Global settings tab is always last and lets you change settings that apply to all widgets at once.

Media tab

The Media tab controls which videos and images appear in your widget and how they are ordered.

Choose which media to show

Find the Media selection dropdown in the Media tab. Manual is listed first and is the default option.

• Manual — hand-pick the exact videos and images you want. You can also clear the widget: in the media picker, click Unselect all so no items are selected, then click Save.

• All media — include media that matches conditions you set, such as labels, products, or upload dates. Each widget shows up to 50 media items.

If you chose All media, click Add condition and pick the rule you want (for example, Label or Product), then save the widget.

Add media from an empty preview

If the widget has no media yet, the preview shows Select media with the message Pick media from your library to display in this widget.

1. Click Add media in the preview.

2. Pick videos or images from your library.

3. Add the media you want in the widget.

If your media library is empty, the preview shows Your media library is empty with an Add media action.

Edit a media item from the preview

Hover over a video or image in the preview and click Edit to open its details without leaving the editor. Change what you need, save, and the preview updates. For the full list of what you can change there, see Edit media in the widget editor.

Preview a product page

Product page widgets that use Smart auto-match or Custom product feeds include a product preview sidebar so you can check one product at a time.

1. In the editor, find Preview widget for product:

2. Click Select product and choose the product you want to preview.

• For Smart auto-match, videos tagged with that product appear automatically.

• For Custom product feeds, you manually select which media should be shown for that product.

Universal feed and Anywhere widgets do not show a product picker. They use the same media everywhere, so you manage media in the Media tab instead.

Preview a collection page

Collection page widgets that use Smart auto-match or Custom collection feeds include a collection preview sidebar so you can check one collection at a time.

1. In the editor, find Preview widget for collection:

2. Click Select collection and choose the collection you want to preview.

• For Smart auto-match, videos tagged with products in that collection appear automatically.

• For Custom collection feeds, you select which media should be shown for that collection. Your changes stay as drafts until you click Save.

Universal feed collection widgets show the same media on every collection page, so they do not show a collection picker.

Change the order of media

Below the media selection, use the Media order dropdown to control how items are sorted:

• Manual — drag and drop items into the exact order you want. When you use Manual media selection, you can also remove an item directly from the grid by hovering its thumbnail and clicking the Remove (X) button.

• Newest — shows newest media first.

• Oldest — shows oldest media first.

• Smart — uses performance data to put your best-performing content first.

• Video priority — shows videos before images.

• Random — shuffles the order each time the widget loads.

For a full guide on ordering and removing media, see How to Customize the Order of Media in Your Widget.

Customize your widget's look

After the Media tab, the next tabs contain styling and layout controls for your specific widget type.

For a Stories widget, open the Stories tab to adjust colors, autoplay, and spacing. Then open the Slides tab and set Story size to one of these options:

• Mini

• Small

• Medium (default)

• Large

For a Carousel widget, the Carousel tab includes colors, autoplay, and spacing. The Slides tab includes Slide sizing with options for a fixed slide width or a set number of slides in view. For details, see How to Change Video Autoplay and Layout in the Carousel.

The Player tab controls how videos behave when opened in the fullscreen player. The Advanced tab contains custom CSS options.

Product card settings live in the Shoppable tab for Carousel, Grid, Single video, and Video banner widgets. In Carousel, Grid, and Single video, choose where product cards appear with Product cards: None, Overlay (on the media), or Below (under the media). Carousel and Grid also have Product card text and Product card background color controls. In Video banner, use the Show product cards checkbox.

Edit your widget with AI

Click Edit with AI over the widget preview to change settings or write custom CSS by describing the change in plain English. The AI assistant is available on every plan, including Free.

1. In the widget editor, click Edit with AI over the widget preview. The assistant opens in a panel on the right.

2. Describe the change you want, for example "make the carousel 4 across", and click Send.

3. Check the preview. The panel shows exactly what the assistant changed, with the old and new values, and the change appears in the preview right away.

4. Use Undo or Redo in the panel if you want to step back, then click Save to keep the changes, or discard them.

The assistant can change widget settings and custom CSS. It cannot change which videos appear in the widget or their order; manage those in the Media tab.

On the Advanced tab, Write CSS with AI opens the same assistant with a CSS request already started. This button appears only when custom CSS is available on your plan.

If a setting needs the Pro plan, the assistant leaves that setting as it is and tells you which settings need Pro.

Format and align a Carousel or Stories header

Carousel and Stories widgets have a Header group in the Carousel or Stories tab. Use it to add a title above your widget and control how it looks.

1. Open the Carousel or Stories tab and find the Header group.

2. Enter your header text.

3. Select part of the text and use Bold, Italic, or Insert link to format it.

4. Choose Header alignment: Left, Center, or Right.

Header alignment appears only after you enter header text. It controls the header on its own, not the whole widget. You can use one alignment for all screen widths, or set separate values for the wide and narrow layouts.

Global settings tab

The Global settings tab lets you change settings that apply to all widgets on your store. These are the same settings found at Settings > Widget Settings in the dashboard, but you can now edit them without leaving the widget editor.

The tab includes five groups of settings:

• Appearance — choose between Light or Dark themes for UI elements across all widgets.

• Products — control how product cards behave, including showing review scores.

• Fullscreen player — manage how videos behave when opened in fullscreen.

• Feeds — control settings for the feeds used in your widgets.

• Video — adjust settings for video playback in all your widgets.

Click Save in the panel header to save your global settings changes.

For a full guide on global widget settings, see How to Customize Global Widget Settings.

Close the editor with unsaved changes

If you close the widget editor while you still have unsaved changes, Moast asks what you want to do.

• Save and close — saves your changes, then closes the editor.

• Discard and close — closes without saving.

If a save fails, Moast shows Couldn't save your changes. Please try again. Fix the issue and try again.

Publish your widget

When you are ready to make the widget live, click Add to theme in the preview toolbar.

1. In the Add widget to theme modal, confirm where the widget will appear:

   • If you chose Product page placement, the widget is automatically added to your product page template.

   • If you chose Collection page placement, the widget is automatically added to your collection page template.

   • If you chose Anywhere, select the page template where you want it: Home, Product, Collection, or Page.

2. Moast checks your theme compatibility:

   • If your theme supports app blocks, click Add to theme to place the widget automatically.

   • If your theme does not support app blocks, click Embed code, then copy the Liquid code or HTML code and paste it into your theme.

After publishing, the widget status shows as Active in the Widgets list. You can return to the editor anytime to update settings.

Widget status

Each widget in the Widgets list shows an Active or Inactive status so you can tell whether it is live on your store.

A widget is Active when Moast sees it in an app block on your published theme, or when its embed code was shown on your storefront in the last 48 hours. This second signal means embed-based widgets and page-builder placements can still show as Active even when they are not in a Shopify theme template.

A widget shows Inactive when neither signal is present and your theme supports app blocks. If your theme does not support app blocks, no status badge is shown, because Moast cannot see whether the embed code is installed.