Skip to main content

Quick-Widgets: Merchant Guide

Welcome to Quick-Widgets! This guide will help you set up and customize your storefront widgets to improve customer experience and drive more sales.

🚀 Getting Started​

Before you can use any widget, you must enable the core app block in your theme.

  1. Go to your Shopify Admin -> Online Store -> Themes.
  2. Click Customize on your active theme.
  3. On the left sidebar, click on the App embeds tab.
  4. Find Quick Widgets and toggle it ON.
  5. Click Save.

[!IMPORTANT] All widgets require the "Quick Widgets" app embed to be active. If you see a red error message on your store, please double-check this step.

📦 Widget Guides​

1. Cash on Delivery (COD) Form​

Perfect for stores that handle manual payments. This widget allows customers to complete their order via a simple form, which then creates a Draft Order in your admin.

  • Installation: Add the COD Form app block to your Product or Cart page.
  • Key Settings:
    • Form Type: Choose between an Inline Form (embedded in page) or a Popup.
    • Field Visibility: Show/Hide fields like Email, Phone, City, and Address to keep the form short.
    • Customization: Change the form title, button text, and background colors to match your brand.

2. Priority Processing (Priority My Order)​

Increase your revenue by offering a "priority" service for a small fee.

  • Installation: Add the Charge for service Widget app block to your Cart page.
  • Key Settings:
    • Service Product: Select a hidden product that represents the fee.
    • Charge percentage: Enter the fee percentage (e.g., 10 for 10% of cart total).
    • Visuals: Customize labels, sub-text, and toggle styles.

3. Rewards Progress Bar​

Encourage customers to spend more by showing how close they are to free shipping or a discount.

  • Installation: Add the Progress Bar app block to your Header or Cart page.
  • Key Settings:
    • Targets: Set up to 3 different spending targets (e.g., $50 for a free gift, $100 for free shipping).
    • Dynamic Messages: Use the {amount} placeholder in your messages to show exactly how much more the customer needs to spend.
    • Style: Highly customizable bar height, radius, colors, and text alignment.

4. Custom Field Collector​

Gather extra information from your customers during the shopping process.

  • Installation: Add the Custom Field app block anywhere on your Product page.
  • Key Settings:
    • Field Types: Choose from Text, Dropdown, Checkbox, Textarea, Date, or even File Uploads.
    • Attributes: Set fields as Required, add placeholders, and provide a Tooltip with extra help text.
    • Hidden Values: Option to hide sensitive information from the public view.

🛠️ Advanced: Checkout Extensions​

If your store is on Shopify Plus, you can also add these widgets directly into the checkout flow!

  1. Go to Settings -> Checkout.
  2. Click Customize on your active checkout profile.
  3. Click Add app block and select a "Quick Widgets" extension (e.g., Progress Bar).
  4. Drag the block to your desired position in the checkout summary or information sections.

❓ Troubleshooting​

  • Widget not appearing? Ensure the "Quick Widgets" App Embed is enabled in your theme settings.
  • Settings not saving? Make sure to click the Save button in the Shopify Theme Editor after making changes to an app block.