Adding Inline Widgets to Product Pages

Inline widgets display social proof directly on your product pages, right where customers make buying decisions. Unlike popup notifications, inline widgets are embedded within the page layout and stay visible as shoppers browse.

This guide shows you how to add and configure inline widgets using Shopify's theme editor.

Available Inline Widgets

Ultimate Social Proof offers three inline widgets for product pages:

• Recent Sales — Shows how many items sold in the last 24 hours (e.g., "12 items sold in the last 24 hours")
• Live Viewers — Displays real-time visitor count (e.g., "5 people are viewing this now")
• Low Stock — Creates urgency by showing remaining inventory (e.g., "Only 3 units of Product Name left in stock")

Adding an Inline Widget

1. From your Shopify admin, go to Online Store > Themes.
2. Click Customize on your active theme.
3. Use the page selector dropdown at the top center and choose Products > Default product (or a specific product template).
4. In the left sidebar, locate your main product section (usually called "Product information" or similar).
5. Click Add block within the product section.
6. Scroll down to the Apps section and select one of the USP inline widgets:
   • USP Inline Recent Sales
   • USP Inline Live Views
   • USP Inline Low Stock
7. The widget will appear in your product section.

Positioning the Widget

After adding the widget, you can drag it to your preferred position within the product section:

• Above the Add to Cart button — Great for urgency messaging like Low Stock
• Below the Add to Cart button — Works well for social proof like Recent Sales
• Near the price — Effective for Live Viewers to show demand
• Within the product description area — Subtle placement that blends with content

To reposition, click and drag the widget block in the left sidebar to move it up or down within the section.

Configuring Widget Settings

Click on the widget block in the sidebar to access its settings. Each widget has customization options:

Recent Sales Widget

• Singular noun — Word used when count is 1 (default: "item")
• Plural noun — Word used when count is more than 1 (default: "items")
• Icon color — Color of the shopping cart icon (default: green)
• Icon corner radius — Roundness of the icon background (0-40px)

Live Viewers Widget

• Singular noun — Word used when count is 1 (default: "person")
• Plural noun — Word used when count is more than 1 (default: "people")
• Icon color — Color of the eye icon (default: indigo)
• Icon corner radius — Roundness of the icon background (0-40px)

Low Stock Widget

• Data source — Choose between:
  • Shopify Inventory — Uses your actual inventory levels (recommended)
  • Manual — Set a fixed number for display
• Units remaining — Only appears when using Manual mode (1-50)
• Singular noun — Word used when count is 1 (default: "unit")
• Plural noun — Word used when count is more than 1 (default: "units")
• Fallback product label — Text shown if product title is unavailable (default: "this item")
• Icon color — Color of the filter icon (default: orange)
• Icon corner radius — Roundness of the icon background (0-40px)

Saving and Previewing

1. After configuring your widget, click Save in the top right corner of the theme editor.
2. Use the preview panel on the right to see how the widget looks on your product page.
3. To test on different products, use the page selector and choose a specific product to preview.
4. Visit your live store to confirm the widget displays correctly.

How the Widgets Behave

• Auto-hide when zero — Widgets automatically hide when there is no data to display (e.g., no recent sales, no viewers, or out of stock).
• Real-time updates — The Live Viewers widget refreshes automatically to show current visitor counts.
• Inventory sync — The Low Stock widget (in Shopify Inventory mode) reflects your actual stock levels and updates when inventory changes.

Tips for Best Results

• Start with one widget and add more as needed — too many can overwhelm visitors.
• Use Low Stock for products with limited inventory to create genuine urgency.
• Recent Sales works best on popular products with consistent order volume.
• Match icon colors to your theme for a cohesive look.
• Test on mobile devices to ensure widgets display well on smaller screens.