Setup guide

What WhyNot does

WhyNot turns your product videos into shoppable widgets for your online store. Upload a video, tag the products it shows and display it as a Carousel, Stories or a Product Floating Card. Shoppers watch in a full-screen player, choose a variant and add to cart without leaving the video.

Choose a plan

When you first open WhyNot, you’ll see the Plans page. Click Choose Silver or Choose Gold, then approve the plan on Shopify’s page. Both plans start with a 7-day free trial, and billing goes through your Shopify invoice. After you approve, WhyNot shows “Confirming your plan…” for a moment, then the full menu appears.

Quick start

1. Upload videos: Content → Upload videos.
2. Tag products: on a video, ⋯ → Edit → Tag products.
3. Create a widget: Carousels, Stories or Product Floating Cards → Create.
4. Add it to your theme: in the widget’s Settings tab, set Status to Active and save, copy the Widget ID and click Add to theme.
5. Paste and save: paste the ID into the block’s Widget ID field and click Save in the theme editor.

The Home page

• Storefront status: Active means your widgets can show on the store. Click Turn off to hide every WhyNot widget at once, and Turn on to show them again. Your widgets and settings are kept.
• Current plan: your plan, with a banner while your trial is about to end.
• Getting started: a two-step checklist (add your first videos, create a widget) that ticks itself off as you go.
• Need help: a link to Support.

Uploading videos

Go to Content → Upload videos and drag files in or click Add files.

• Formats: MP4, MOV or WebM.
• Up to 200 MB and 3 minutes per video.
• Up to 5 videos at a time.
• Up to 500 uploads per calendar month per store, counting every upload that starts, including ones that later fail. The count resets on the 1st of each month. If you need more, contact support.

Each file shows its progress. You can close the window at any time: uploads finish and videos keep processing.

Processing

After upload, Shopify prepares each video. This usually takes a minute or two. Until it’s ready, the video is in the Processing tab:

• Processing: Shopify is still working on it. It moves to Media by itself when it’s ready.
• Failed: the card says why, for example the video is longer than 3 minutes or Shopify couldn’t process the file. Delete it and upload a fixed file.
• Timed out: Shopify is taking longer than usual. WhyNot keeps checking for a day. Click Check again to check now. If it isn’t ready after a day, delete it and upload it again.

The Media tab

Ready videos appear here, newest first, 10 per page.

• Search by video name.
• Filter by All, Tagged (has products or collections) or Untagged.
• Each card shows the poster, duration, name, how many products are tagged, the upload date and the widgets the video is in.

The ⋯ menu on a video

• Edit: opens Edit Media (below).
• Copy media ID: copies the video’s ID, which helps when you contact support.
• Add to widget: adds the video to the end of a Carousel or Stories widget. Videos already in the widget are skipped.
• Delete: see below.

Working with several videos

Tick the checkbox on each video, or click Select all on this page, then choose Add to widget or Delete.

Deleting videos

The video is removed from your library and from every widget it’s in. The confirmation lists those widgets. Tick Also delete from Shopify Files to remove the file from your store too. Leave it off if you use the video anywhere else in your store.

If you delete a video in Shopify Files directly, WhyNot marks it Failed with “This video was deleted from Shopify Files. Delete it here too.”

Edit Media

Open a video with ⋯ → Edit. The video plays on the left, with its media ID underneath.

• Tag products: the products shoppers see with this video, as product cards in the widget and in the pop-up. Click Browse products to pick them. Up to 50 products per video, and a product can be tagged in up to 50 videos.
• Tag collections Gold: shoppers get a Shop collection card with a “Starts at” price that opens the collection. Up to 50 per video.
• Settings:
  • Name: up to 255 characters. Shown in some templates and as the video title in the player.
  • Tagline: up to 150 characters. Shown by the “Video name and tagline” templates.
  • Description: up to 1,000 characters. A private note for you about the video. Shoppers never see it.

Click Save. Your storefront updates within about a minute.

There are three widget types: Carousels, Stories and Product Floating Cards (Gold). Each has its own page in the menu, and they all work the same way.

Creating a widget

Click Create carousel, Create stories or Create product floating card, then:

• Name: up to 100 characters. Only you see it.
• Import design from: copy every design setting from another widget of the same type, or choose Don’t import (use defaults). Videos aren’t copied.

The widget list

• Tabs: All, Active and Draft, with counts.
• The meter shows how many widgets are active. A store can have up to 100 active widgets across all types.
• Each card shows a preview, the status and the number of videos.
• The ⋯ menu on each card:
  • Edit
  • Copy widget ID
  • Duplicate: a copy named “(copy)” with the same videos, hidden videos and design. It starts as Draft.
  • Delete: can’t be undone. A theme block that uses this ID will show nothing.

The editor

At the top you’ll see the widget’s name, type, status (Active or Draft) and storefront status:

• Live: your store shows the latest saved version.
• Publishing…: your last save is on its way to the store, usually within a minute.
• Storefront out of date: the last save hasn’t reached the store. The banner says why. Click Retry.

Copy widget ID and Add to theme are always at the top. When you change anything, Shopify’s save bar appears. Click Save to keep your changes or Discard to drop them.

The Settings tab

• General:
  • Name
  • Status: Active or Draft. Only Active widgets show on your store. With 100 active widgets, set another to Draft first.
• Add to your store: the three steps for adding the widget to your theme (see Adding a widget to your theme).

The Design tab

Design settings are grouped into panels. Click a panel to open it.

• More settings / Fewer settings: each panel shows its main settings first. The rest are under More settings.
• Mobile / Tablet / Desktop: use the device buttons above the preview. Settings marked with a device name, like “Slides visible · Mobile”, are set separately for each device. Every other setting applies to all devices.
• Live preview: shows your changes as you make them on the selected device. If it ever looks blank, click Reload preview.
• Fonts: the preview shows “Theme font” as your computer’s system font. Your store uses your theme’s font.
• Reset: puts every design setting back to the defaults of your chosen templates. Nothing changes until you click Save.

Settings you’ll see in many panels

• Text style: font (Theme font, Arial, Georgia, Helvetica, Tahoma, Times New Roman or Verdana), size (8–72 px), color, bold, italic and underline.
• Spacing (margin and padding): top, right, bottom and left in pixels.
• Colors: any color, including transparency.
• Border: thickness (0–20 px) and color.
• Rounded corners: in pixels. 0 is square.

A row of video cards that shoppers swipe or scroll. Tapping a video opens the full-screen player.

Media tab

• Add media: pick videos from your library.
• Drag videos to change their order.
• Remove a video with the × on it. This only removes it from this widget, not from your library.
• Up to 100 videos, and up to 128 products across those videos. Meters show how many you’ve used.

Design → Quick setup

• Card template: a starting look for each video card. Choosing one sets the product card and the text on the video for you.

• Popup template: how product details open in the player: Partial expanded card (default), Full expanded card or Expanded side view. See The pop-up player.
• Maximum expanded card height: for the Partial template, 40–100% of the screen (default 85%).
• Rounded corners: on or off for the widget’s cards.
• Preview display: Still image shows each video’s poster (default). Play muted plays videos silently as they scroll into view.

Design → Block

The area around the carousel.

• Alignment: left, center (default) or right.
• Show heading: a heading above the carousel (“Shop the look” by default) with its own text style.
• Margin and Padding: default padding is 30 px top and bottom.
• Background color: transparent by default.

Design → Slides

• Slides visible: how many videos fit across the screen. Mobile 2, Tablet 3, Desktop 5 (1–10).
• Fixed video width: turn on to set an exact Video width instead. Mobile 150, Tablet 200, Desktop 250 px (80–600).
• Space between slides: 10 px (0–60).
• Show arrows and Arrow position from top (42%).
• Load poster images early: turn on when the carousel is near the top of the page so images appear faster. Leave off lower down the page.

Design → Video card

• Aspect ratio (width ÷ height): 0.5629 is a vertical 9:16 video. Use 1 for square or 1.7778 for 16:9.
• Card rounded corners and Video rounded corners: 10 px each.
• Pop on hover: the card grows slightly when the mouse is over it, by the Pop amount (105%).
• Text on video: None, Video name, Video name and tagline, or Product name.
• More settings: text on video style; Video position (which part of the video shows when it’s cropped: top, center or bottom); padding, background color and border.

Design → Product card

The card for the tagged product.

• Show product card and Show inside video. Inside the video, you can also turn on Blur background and Soft shadow.
• When the card is tapped: Open the video pop-up (default), Go to product page or Do nothing.
• Show image and Image size: 50 px (24–120).
• Show title: Title shows the product name, variant name or video name. Title lines: 1–3 lines before the title is cut off.
• Show price, Show compare-at price and Show % off tag (off by default).
• More settings: rounded corners, background, margin, padding and vertical alignment; image rounded corners and Hide image on mobile; title, price and compare-at text styles and title alignment; the % off tag’s text, background, corners and padding; Collection price prefix (“Starts at”, used on collection cards).
• Button (off by default):
  • Label: “Shop now”.
  • Action: Add to cart, Go to product page or Go to collection page.
  • Compact: a smaller button.
  • Height, rounded corners, background, hover color and text style.
  • For Add to cart: Success text (“Added to cart”), Failure text (“Failed”) and Reset after, how long those texts show (2,000 ms).

The pop-up panels (Desktop pop-up, Pop-up video card, Pop-up product card and Pop-up expanded card) are explained in The pop-up player.

Round story circles, like social media stories. Tapping one opens the full-screen player.

• Media tab: the same as Carousel.
• Design → Quick setup: Popup template, Maximum expanded card height, Rounded corners and Preview display, as in Carousel. Stories have no card templates.
• Design → Block: the same as Carousel.

Design → Slides

• Fixed circle size (on by default): Circle size Mobile 72, Tablet 96, Desktop 96 px (48–200).
• Turn it off to use Stories visible instead: Mobile 3, Tablet 5, Desktop 5 (1–12).
• Space between stories: 10 px.
• Show arrows: off by default. Arrow position from top: 40%.
• Load poster images early: as in Carousel.

Design → Video card

• Show title: the text under each circle. Title shows the video name (default) or product name, with its own text style (12 px).
• Ring: the border around each circle, 3 px by default, in any color.
• Pop on hover and Pop amount.
• More settings: video position.

The pop-up panels are the same as Carousel (The pop-up player). For Stories, Show progress bar is on by default.

A small video card that floats over a corner of your product pages and shows the videos tagged to that product. Tapping it opens the full-screen player.

How it picks videos

A Floating Card has no Media tab. On each product page it shows the videos tagged to that product in Content → Edit Media → Tag products. Tag a video to a product and the card appears on that product’s page by itself. Products with no tagged videos don’t show the card.

Tagged Products tab

• Tagged products: every product that has videos, with how many each has. Use it to check which product pages show the card. To change it, tag or untag products in Content.
• Hidden videos: videos that never show in this card, even on products they’re tagged to. Use it for videos that suit a carousel but not a product page. Click Hide videos to pick them, up to 100.

Design → Quick setup

Popup template, Maximum expanded card height and Rounded corners (see Carousel).

Design → Position

• Vertical position: top, center or bottom (default).
• Horizontal position: left, center or right (default).
• Space from the side and Space from the top or bottom: 20 px each.
• Card width: a percentage of the screen width. Mobile 30%, Tablet 15%, Desktop 10% (5–100).
• Hide while scrolling down: the card hides once the shopper scrolls down and comes back near the top of the page.
• More settings: Stacking order (z-index), 999. Raise it if a theme element, like a chat button or sticky bar, covers the card.

Design → Video card

• Card title: optional text on the card, up to 40 characters, with its own text style.
• Show play button, with its color and size (30 px).
• Pop on hover and Pop amount.
• More settings: aspect ratio (0.5628 = 9:16), card and video rounded corners, video position and border.

How it behaves for shoppers

• The card plays muted. Tapping it opens the player.
• The × hides the card for the rest of the shopper’s visit, until they close the browser tab.
• The card hides while the player is open.
• Only one Floating Card shows per page, even if you add more than one block.

For the pop-up panels, see The pop-up player.

The full-screen player opens when a shopper taps any WhyNot video. Every widget has the same four pop-up panels in its Design tab, so each widget can have its own player look.

What shoppers can do

• Move between videos: Stories swipe up or down; Carousel and Floating Card swipe left or right. On a computer, use the arrow buttons or arrow keys. A short hint (“Swipe up for next video”) shows the first time.
• Close with × or the Esc key.
• Mute or unmute, and pause by tapping the video. Videos loop unless Auto advance is on.
• Shop: see tagged products, open product details, pick a variant and Add to cart. The theme’s cart, including the cart count or cart drawer, updates straight away without a page reload.
• Share: on phones, the phone’s share sheet; on computers, the link is copied (“Link copied”). There’s also a WhatsApp button.
• Open a shared link: it opens the store page with the shared video already playing.
• On computers, the next and previous videos show faintly at the sides.

Popup template (in Quick setup)

• Partial expanded card: product details slide up over the lower part of the video, up to the Maximum expanded card height.
• Full expanded card: product details cover the whole video.
• Expanded side view: on large screens (1024 px and wider), product details open beside the video. On smaller screens they open like the Partial card.

Design → Desktop pop-up

• Background color: the dimmed area behind the player (default black at 85%).
• Show close button on the video: puts the × on the video instead of the corner of the screen.
• More settings: padding.

Design → Pop-up video card

• Start muted: off by default, so videos play with sound once a shopper opens the player.
• Show progress bar: on by default for Stories, off for Carousel and Floating Card.
• Auto advance to the next video: plays the next video when one ends.
• Hide cart icon: hides the cart link in the player.
• Share button links to: This video (default, the link opens this exact video), The current page (opens the page without a video) or Hide share button.
• Show WhatsApp button: on by default.
• More settings: Share link UTM, tracking tags added to shared links, for example utm_source=whynot&utm_medium=share, so shared visits show in Shopify Analytics; card and video rounded corners, padding, background color and border.

Design → Pop-up product card

The product card on the video. It has the same settings as the Carousel product card, plus:

• When the card is tapped: Expand card (default), Go to product page or Do nothing.
• Image size: 70 px.
• Primary button (on): “Add to Cart” with the Add to cart action. Expand card if multiple variants (on) opens the details first so shoppers can pick a size or color.
• Secondary button (off): “Learn More”, linking to the product page, with Open in new tab.
• Button actions: Add to cart, Go to product page, Go to collection page or Expand card.

Design → Pop-up expanded card

The full product details.

• Background color: white.
• Show images with Image height (275 px). Shoppers swipe through the product’s images.
• Open product page on title click, with Open in new tab and Show link icon.
• Show description, Show description heading and Description heading (“Product Description”). This is the product’s description from Shopify.
• Hide cart icon.
• Primary button (“Add to Cart”) and Secondary button (“Learn More”), with the same options as above.
• Variants show as pills. An out-of-stock variant shows the Out of stock text on the button.
• More settings: image spacing and rounded corners; margin and section padding; divider height and color; header icon background, color and corners; title style and alignment; price, compare-at price and % off tag styles; section heading text; variant pill text, background, border, corners and padding; description text.

The quick way: the widget’s Settings tab

1. Set Status to Active and click Save. Only Active widgets show on your store.
2. Copy the widget ID.
3. Add to theme. Shopify’s theme editor opens with the WhyNot block already added in a new Apps section: Carousel and Stories on your home page, the Floating Card on your product page template.
4. Paste and save. Paste the ID into the block’s Widget ID field and click Save in the theme editor.

Adding a widget to other pages

In the theme editor, open the page (for example a collection page or a custom page) → Add section or Add block → Apps → WhyNot Carousel, WhyNot Stories or WhyNot Floating Card. Paste the widget ID and save. You can use the same widget on as many pages as you like. Every copy updates when you edit the widget.

Block settings in the theme editor

• Widget ID: which widget this block shows.
• Page URL filter (all blocks): shows the block only on pages whose web address contains one of your words. Separate words with commas, for example summer, sale. Start a word with ! to hide the block on matching pages instead, for example !checkout-help. Leave it empty to show the block on every page that uses this template.
• Heading override (Carousel and Stories): replaces the widget’s heading on this block only. Ignored when the heading is turned off in the app.
• Product (Floating Card): on product pages it uses the page’s product automatically. Pick a product to always show that product’s videos, for example on a landing page.

Messages in the theme editor

Open Settings in the WhyNot menu. These settings apply to every widget in your store. Click Save in the save bar when you’re done.

Layout

• Layout direction: Automatic (follows the store language) (default), so right-to-left languages like Arabic and Hebrew show right to left by themselves. Left to right or Right to left fixes the direction for every language.

Gold features Gold

On Silver these settings are locked, and a banner links to the Plans page.

• Hide out-of-stock products: when a tagged product is sold out, its product card is hidden. The video still plays, without the sold-out product’s card.
• Hide the WhyNot icon: removes the small WhyNot icon from your widgets.

Storefront text

Replace WhyNot’s shopper-facing text for each language your store is published in.

• Language: pick one of your store’s published languages. A language you’ve customized shows “· Custom” next to its name.
• The seven texts: Add to cart, Added to cart, Failed, Learn more, Out of stock, Shop now and Starts at (the price prefix on collection cards).
• Up to 40 characters each.
• These texts replace the matching button text in every widget’s design for that language.
• Leave a field empty to keep the text set in each widget’s design.

Choosing or changing a plan

Open Plans and click Choose Silver or Choose Gold. Shopify shows the plan for you to approve, and WhyNot updates as soon as you’re back. You can switch plans at any time.

• Free trial: both plans start with a 7-day free trial. A banner on every page shows when the trial is about to end.
• Billing: Shopify handles it, and it appears on your Shopify bill. Prices are in USD.
• Stopping billing: uninstall WhyNot, and Shopify cancels the subscription.

Moving from Gold to Silver

Nothing is deleted. Gold features stop showing on your store within about a minute:

• Product Floating Cards stop showing.
• Collection tags stop showing as “Shop collection” cards.
• Hide out-of-stock products and Hide the WhyNot icon stop applying.

Your Floating Cards, collection tags and settings are kept, so switching back to Gold brings everything back.

With no plan

Your widgets, videos and settings are kept, but nothing shows on your store until you choose a plan. In the theme editor, blocks say “choose a plan in the WhyNot app”.