Skip to main content

Design Your Widget & Player

Give every Whatmore widget the look of your brand, without touching your theme code. Pick a ready-made look, preview it on mobile and desktop, add your own styling with the help of AI, and save to go live.

Where to find it

  1. In the Whatmore dashboard, open Homepage, Product Pages or Collection & Pages from the sidebar.
    ​

2. In the widgets table, find the widget you want to style. And click on the respective row
​

3. Open Design your widget to style the widget on your page, or Design your player to style the fullscreen player shoppers see after tapping a video

Design Your Widget

Step 1: Pick a look

The Look section shows a gallery of ready-made designs for this widget type. Click any look to see it in the preview on the right. Nothing changes on your store until you click Save.

Carousels offer the widest choice, for example Standard, Card, Mosaic, Hover Play, Info Strip, Text Overlay, Focused, Coverflow, Minimal, Feed, Circle and View More. Stories come in Circle and Square.

Shopify marchants: your theme template

Each carousel block in your Shopify theme editor has a Tile Type setting. By default the widget follows that setting for every store
​
​

Pick a look in the gallery to override the theme template for this carousel. The Live badge then shows the look you picked. Your theme is not changed; the dashboard pick simply takes precedence for that one carousel.
​

To go back to the theme editor’s choice, use the row above the gallery that reads Use your Shopify theme template instead and click Switch to theme Tile Type. This clears the look you picked, and the carousel follows the Tile Type again.

Click Save to make either change live.

Step 2: Make it yours with AI

Once a look is selected, open Make it yours under the gallery to add your own styling on top of it. You don’t need to know CSS. Your AI assistant writes it for you.

  1. Describe the look you want. Write it in plain words, for example “green background and white text”.

  2. Copy the prompt. Click Copy prompt. We build a complete prompt from your words plus this widget’s CSS selectors and current look.

  3. Open ChatGPT, Claude or Gemini and paste the prompt. In the same chat you can attach your Figma file, brand guide or a screenshot, and the AI will match it.

  4. Paste the CSS it returns into the box in the editor. The preview updates straight away.

  5. Click Save.


​

Note: Your styling is tied to the look you picked. If you switch to another look later, the CSS written for the previous look is kept and comes back when you switch back.
​

To start over, clear the CSS box and save. The look returns to its ready-made design.

Step 3: Carousel configuration

Note: this section is named after the widget you are editing, so it reads Carousel configuration for a carousel, Stories configuration for stories, and so on, and the settings inside differ for each widget type.

For a field-by-field guide to every setting, see Customizations & styling options: https://help.whatmore.ai/en/collections/8107735-customizations-styling-options


​

The preview

The preview on the right shows your widget with your real videos and products. Switch between mobile and desktop at the top of the preview.

Nothing you do in the preview reaches your store. It only reflects your unsaved changes.


Mobile:


Desktop:

Save and discard

Click Save to publish, or Discard to throw the changes away and return to what is live. After saving, refresh your store page to see the result.

Design Your Player

The third tab, Design your player, styles the fullscreen player shoppers see after tapping a video. It is shared by every widget on your store, so a change here applies everywhere.

Product tile. Choose how products appear over the video: Broad, Broad with no button, Broad with cart, Narrow, Premium, Navigation, Multi-product or Button only. Pick one to see it in the preview and click Save to make it live.
​

Make it yours. The same three AI steps as the widget, with three tabs for what you are styling:

  • Player, for the fullscreen view itself: controls, progress bar and the icon rail.

  • Product tile, for the product card over the video: title, price and the add-to-cart button.

  • Brand, for values every widget shares. CSS written here is injected into every widget before its own styling, so it is the right place for shared colours, fonts and spacing variables you want to define once.

Each tab has its own prompt and its own CSS box, and a dot on the tab shows where styling is already saved.
​
​

Related Articles
Did this answer your question?