Skip to main content
Q
Quick Widgets
Storefront

Quick Widgets

Quick Widgets is a short list of widgets you turn on yourself: a service charge, a custom field at checkout, and a cart progress bar.

This app is in the studio and is not on the Shopify App Store. Email hello@xco.agency or book a call if you want it on a store.

The prices below come from the app's plan config. They are not an App Store listing, and they are not a charge you can start from a listing.

Plans​

  • Free — one widget on at a time.
  • Pro — $4.99 a month, with every widget on at once.

Nothing else is held back on Free. You can still turn a widget off, and you can still edit it. A second widget stays off until you move to Pro.

Turn a widget on​

The first time you open the app, it asks you to enable the app embed.

  1. In Shopify admin, go to Online Store → Themes → Customize.
  2. Open App embeds.
  3. Turn Quick Widgets on.
  4. Click Save.

Then turn on the widget you want:

  1. On the app home list, open the widget. The button says Install, or Manage if it is already on.
  2. Choose Enable Widget. On Free, if another widget is already on, the app says the plan allows one active widget and offers View plans. It does not mark the extra widget as on.
  3. Choose Configure.
  4. Pick Storefront theme or Checkout.
  5. For the storefront, choose the theme, then Install on theme, then Open theme editor. Add the block, set it, and save.
  6. For checkout, choose the checkout, then Install on checkout, then Open checkout editor.

Checkout blocks are only available on Shopify Plus. On any other plan, use the page blocks. Page blocks need a theme that can take app blocks. If Shopify says the theme does not support sections and blocks, use a newer theme. Do not paste code into the theme.

If Quick Widgets is not enabled under app embeds, each block says so in the theme editor. Turn the embed on and save.

If the widget is on in the app but the block is missing from the theme, the widget page says Setup required.

See which widgets are on​

Open Overview in the app. The page is titled Widgets overview.

It shows:

  • how many widgets are active, out of the widgets in the app
  • how many of those are on the storefront
  • how many of those are in checkout
  • each widget, marked Active or Inactive

Overview does not edit the widget. To change one, go back to the home list and choose Manage.

Service charge​

In the app this widget is Charge for Service extension. In the theme editor the block is Charge for service Widget. In the checkout editor the block is charge-for-service.

  1. Enable the widget, then install it on the theme or on checkout, as above.
  2. Choose the product that represents the fee. In checkout, choose a variant of that product.
  3. Set the fee as a percentage of the cart (0 to 100) or, on the storefront, as a fixed amount.
  4. Write the label shoppers see, and a short line under it if you want one.
  5. Optional: add an explanation as a tooltip or a popup, or turn that icon off.
  6. On the storefront you can show a checkbox or a toggle. Save.

When a shopper turns the offer on, the app adds that product to the cart. It picks the variant whose price is closest to the fee you set. It does not invent a separate charge. The shopper pays that product's price in the same cart.

In checkout, the percentage is used to pick among variants when the product has more than one. The price the shopper sees is the variant's price.

When the product is out of stock​

If the product you picked is out of stock, the theme editor shows a warning on the block: shoppers will not be able to use the offer until the product is available again.

Restock the product, or pick a different one, then look at the block again. The warning is for you in the editor. It names the product.

Custom checkout field​

In the app this widget is Custom field extension. In the theme editor the block is Custom Field. In the checkout editor the block is checkout-custom-field.

The checkout field is an order note. It is not for personal details.

  1. Enable the widget and install it on checkout, or on the theme if you want the field on a page.
  2. Write a label for the note, such as a delivery instruction or a gift message.
  3. At checkout the field can be text, a checkbox, or a dropdown. Separate dropdown options with commas.
  4. Save.

What the shopper enters is saved on the order as a note.

If the label or the placeholder looks like a name, email, phone, or address, the field is hidden. In the checkout editor you see a warning that names the word. On the live checkout the field does not show. Change the label to something that is not a personal detail.

On a product page, the same widget can be a short text, a longer note, a dropdown, a checkbox, a date, or a file. That answer is saved with the item in the cart. It is not written onto the customer. The same check applies to the label, the placeholder, and the field name: a personal-detail word hides the field, and the theme editor tells you why. You can also hide the value on the cart page. That does not make the field a place to collect a name, email, phone, or address.

Cart progress bar​

In the app this widget is Progress bar extension. In the theme editor the block is Progress Bar. In the checkout editor the block is Progress-bar.

  1. Enable the widget and add the block where shoppers see the cart, or in checkout if the shop is on Shopify Plus.
  2. Set up to three target amounts. Leave the later amounts empty if you only need one.
  3. Write the message. Put {amount} where the remaining amount should appear. The suggested message talks about free shipping. Change it if that is not your offer.
  4. Write the message for when every target is reached.
  5. Save.

On the page you can write a message for each target. In checkout you can write messages for the first two targets, and one message for when the last target is reached.

The bar only shows that message. It does not create a discount, a shipping rate, or a reward. You can change the bar's color, height, corners, and text alignment in the theme editor.

If a widget does not show​

  • The Quick Widgets app embed is off. Turn it on under App embeds and save. The block says so while you are in the theme editor.
  • The widget is still Inactive in the app. Choose Enable Widget.
  • The widget is on, but the block was never added. The page says Setup required. Open the theme editor or the checkout editor and add it.
  • You are on Free and another widget is already on. The theme editor says this widget is not included in the current plan, and shoppers do not see it. Turn the other widget off, or move to Pro.
  • The theme cannot take app blocks. Use a theme that can.
  • A checkout block does not appear because the shop is not on Shopify Plus. Use the page block instead.
  • The service product is out of stock. The theme editor warning is described above.

Questions about a widget: hello@xco.agency. What changed is on the changelog.