Shopping Widgets
Shopping widgets are front-end web components that you can embed into your retailer site to add e-commerce functionalities powered by Instacart. For example, you can use widgets to enable search results, access cart items, and obtain product collections, without having to interact with any API directly.
Widgets enable you to build a more seamless integration between your retailer site and storefront site. For example, if a customer adds items to their cart on your retailer site and then navigates to your storefront site, your storefront accurately shows the number of items in their cart.
What can you build with Shopping Widgets?
- User authentication. Enable customers to sign in or register for an account with the Auth widget, and display profile options with the Profile widget.
- Shopping cart integration. Display the number of items in the cart and navigate customers to your storefront for checkout.
- Product search functionality. Embed a search bar that allows customers to search for products and navigates them to search results on your storefront.
- Curated product collections. Display products from a specific collection and allow customers to add items directly to their cart.
- Custom widgets. Build your own widgets tailored to your specific business requirements using custom events and functionality.
Widget Types
| Widget Type | Purpose | Key Use Cases |
|---|---|---|
| Auth and Profile | User authentication and profile management. | Sign in, register, view profile, logout. |
| Cart | Shopping cart display. | Show cart item count, navigate to checkout. |
| Search Bar | Product search and discovery. | Site-wide search, navigate to search results. |
| Collection | Display curated product collections. | Featured products, promotions, add items to cart. |
| Custom Widgets | Build tailored functionality. | Custom events, brand-specific features. |
Developer resources
When you are ready to begin building, the documentation resources below can help you get started.
| Category | Resource | Description |
|---|---|---|
| Getting Started | Get started with prebuilt widgets | Start using prebuilt widgets on your site. |
| Getting Started | Get started with custom widgets | Build custom widgets for your needs. |
| Concepts | Prebuilt Widgets | Learn about prebuilt widget options. |
| Concepts | Custom Widgets | Understand custom widget development. |
| Concepts | Custom Events | Work with widget events and interactions. |
| Widget Libraries | Auth and Profile | User authentication and profile widgets. |
| Widget Libraries | Cart Widget | Shopping cart display and management. |
| Widget Libraries | Collection Widget | Display curated product collections. |
| Widget Libraries | Search Bar Widget | Product search functionality. |
| Updates | Changelog | Track widget updates and new features. |
| Technical Support | Request technical support | Submit technical support requests. |
| Technical Support | Enterprise service desk | Contact Instacart Technical Support. |
Next steps
- Get started with prebuilt widgets. Follow the tutorial to integrate and embed prebuilt widgets into your retailer site.
- Explore custom widgets. Learn how to build custom widgets tailored to your specific business requirements.
- Review widget libraries. Explore detailed documentation for each available widget type and their implementation.