Skip to main content

How to Design List Widget?

Learn how to design the list widget

Andrey Gadashevich avatar
Written by Andrey Gadashevich
Updated over a month ago

The List widget displays your quantity break offers in a simple list format. Follow these steps to design it:

Step 1: Open Design Settings

  1. In your Shopify Admin, go to Apps → Quantity X.

  2. Click Design under the app menu.

  3. At the top, choose the List settings tab.

Here, you’ll see the Widget design editor on the left and the Widget preview on the right.

Step 2: Customize Widget Design

Expand each section to style your widget:

  • General – overall design and font.

  • Offer Header – main headline text.

  • Offer Header Tooltip – info icon and text.

  • Offer Text – offer descriptions.

  • Prices – old vs. discounted prices.

  • Highlight Badge – labels like Most Popular.

  • Achievement Message – success text when discount is applied.

  • Upsell Message – reminder text to add more items.

  • Progress Bar – shows progress toward next discount.

Step 3: Preview in Real-Time

  • On the right side, check the Widget preview to see changes live.

  • Adjust until it matches your store’s style.

Step 4: Save Your Changes

  • Click Save to apply the new design.

  • Your widget will now display on your storefront.

Need Help?

If you have any questions, please contact our support team.

📩 Contact Support: Reach out to us via live chat or send an email to [email protected].

Did this answer your question?