Implementing a Dynamic Request Quote Feature in Shopware 6
Client Overview
Client: Peter Wilhelm, Owner of Tameq GmbH
Platform: Shopware Community Edition
Industry: Electronic Measurement Equipment (Oscilloscopes, B2B)
Region: Switzerland
Introduction
In today’s competitive eCommerce landscape, offering flexible purchasing options can make a significant difference — especially for B2B and wholesale businesses that require custom pricing.
Our Shopware development team has designed and implemented a custom “Request a Quote” feature in Shopware 6, enabling customers to request personalized price quotes instead of purchasing products directly.
In this blog post, we’ll walk you through how this feature was built — from concept to deployment — and explain how experienced Shopware developers can extend your store’s functionality with tailored solutions.
Technology Stack
- Shopware 6 Community Edition – Highly extensible, DACH-compatible, and free of transaction fees
- MySQL – Structured product and customer data management for over 4,000 SKUs
- JavaScript – Custom frontend interactions and plugin behaviour
- Custom Shopware Plugins – Built specifically for quoting, pricing updates, and checkout logic
Objective: Adding a Dynamic "Request a Quote" Button
The main objective of this project was to implement a “Request a Quote” button on selected products, allowing customers to request pricing directly from the storefront.
Key Requirements
- Display the “Request a Quote” button only for products tagged with a specific label (e.g., “Quote”).
- Dynamically hide the product price when the “Quote” tag is applied.
- Redirect users to a dedicated Quote Request Page with a submission form.
- Preserve user selections until the form is successfully submitted.
While Shopware’s free Shopping Experiences plugin provides form functionality, it lacks dynamic logic for conditional display and data handling — limitations that our Shopware development team overcame through custom-coded enhancements.
Step 1: Planning & Configuration
1. Requirement Understanding
The store already included a universal “Add to Cart” button.
The goal was to replace it with a “Request a Quote” button that would appear only when a product is assigned a specific tag.
2. Using Tag Management
We utilized the Tag Management feature in Shopware Admin to create a “Quote” tag. Admins can assign this tag to any product, giving them complete control over which products display the quote option.
3. Creating a Request Form Layout
To capture quote submissions:
- Go to Shopping Experiences → Create Layout.
- Choose Shop Page → Full Width Layout.
- Add a Form Block → Request Form Block.
- Save and assign the layout to your “Quote” Request page.
To capture quote submissions:
Log in to the backend and hover over “Content” and click on Shopping Experience.
2. Then Click the Create New Layout.
3. Select Shop Page.
4. Click on “Full Width” Layout.
5. Enter the name for the Layout (e.g., Request a Quote) and click on “Create Layout”.
6. After clicking on “Create Layout,” you’ll be directed to the Layout Creation page. Then, click “Add blocks via drag & drop” to open the vertical sidebar.
7. Then, under “Block Category” dropdown, choose “Form” and drag the displayed form into your layout.
8. Once the form is added via drag and drop, the layout in the editor will appear as shown in the screenshot below.
9. To assign the layout to your “Quote Request” page, hover over Catalogues and click Categories.
10. Click the three-dot icon beside the menu where you want to display the form, then select “New Category after” from the popup menu.
11. Enter a menu name (for example, “Quote”), then click “Layout Tab” and click “Change Layout” to select the desired layout.
12. Select the desired layout and click “Save.”
Watch the video below for a complete demonstration of the steps.
Step 2: User Interface & Button Design
1.Button Styling
We designed a button labeled “Angebot anfordern” (German for “Request a quote”) and applied Bootstrap styling to ensure a consistent look and feel across the existing Shopware storefront.
<button class="btn btn-outline-primary send-request-toggle" data-product-name="product-name" data-listener-attached="true">
Request a quote
</button>The following is a screenshot of the storefront displaying the “button style” after applying the above code.
2. Functional Behavior
When clicked, the button:
- Captures key product details (name, image, and quantity).
- Stores this information in the browser’s local storage.
- Redirects the user to a Quote Review Page, where they can review, adjust, or confirm their selections.
Step 3: Technical Implementation in Shopware 6
Conditional Logic in Twig Templates
We extended the Shopware core templates to display the button only for products that contain the relevant tag.
<Plugin>/src/Resources/views/storefront/component/buy-widget/buy-widget-form.html.twig{% set showQuoteButton = false %}
{% for tag in page.product.tags %}
{% if tag.name == 'Quote' %}
{% set showQuoteButton = true %}
{% endif %}
{% endfor %}
{% if showQuoteButton %}
<button class="btn btn-primary request-quote-btn">
{{ "Angebot anfordern" | trans }}
</button>
{% else %}
{{ parent() }}
{% endif %}Tip: In Shopware’s Twig system, using {{ parent() }} preserves the functionality inherited from the base template, which is considered a best practice in Shopware plugin development.
Backend
Storefront
Step 4: Frontend Logic: Local Storage Integration
To preserve product selections across page navigations, we implemented a client-side storage mechanism using localStorage.
<button class="btn btn-primary request-quote-btn"
data-product-name="{{ product.translated.name }}"
data-product-image="{{ product.cover.media.url }}">
Request a quote
</button>document.querySelectorAll('.request-quote-btn').forEach(button => {
button.addEventListener('click', event => {
const name = event.currentTarget.dataset.productName;
const image = event.currentTarget.dataset.productImage;
const existingQuotes = JSON.parse(localStorage.getItem('quoteItems')) || [];
existingQuotes.push({ name, image, quantity: 1 });
localStorage.setItem('quoteItems', JSON.stringify(existingQuotes));
console.log(`${name} added to quote list`);
});
});Why This Approach Works
- Zero Backend Load: No immediate server communication needed.
- Persistent Storage: Retains product data after reloads or navigation.
- Fast & Scalable: Works across product grids dynamically.
- Perfect for B2B Use Cases: Enables quote aggregation before submission.
Step 5: Quote Page & Quantity Synchronization
On the Quote Page, customers can:
- View all products added for quotation.
- Adjust quantities in real time.
- Remove items easily.
- Submit their details through a form.
Watch the video below for a complete demonstration of the steps.
Syncing Quantity with Local Storage
quantityInput.addEventListener('input', () => {
const updatedQty = parseInt(quantityInput.value) || 1;
const quotes = JSON.parse(localStorage.getItem('quoteItems')) || [];
const item = quotes.find(item => item.id === productId);
if (item) item.quantity = updatedQty;
localStorage.setItem('quoteItems', JSON.stringify(quotes));
});This keeps user-entered quantities synchronized with stored product data, ensuring consistency during final submission.
Challenges & Solutions
1. Button Displaying on All Products
Problem: The button appeared for every product initially.
Solution: Added tag-based conditional rendering in Twig templates.
2. Changes Not Reflecting on Frontend
Problem: Template changes were not visible due to caching.
Solution: Cleared cache and rebuilt assets with:
bin/console cache:clear
bin/console theme:compile
bin/build-storefront.shResults
After full integration, the Request Quote feature worked flawlessly:
- Quote button appears only for tagged products.
- Product data is stored persistently.
- Users can review and edit their selections.
- Admins receive detailed quote requests in Shopware’s backend.
This custom feature significantly enhanced the store’s B2B quoting process, boosting usability and admin efficiency.
Conclusion
The Request Quote feature showcases the flexibility and power of Shopware 6 development.
By combining Twig templates, tag-based logic, and frontend persistence, our Shopware developers built a seamless quoting experience — ideal for B2B stores and businesses offering custom pricing.
If you’re looking to implement advanced features like this, professional Shopware development services can help you customize your store for better conversions, scalability, and user experience.
Ready to Transform Your Shopware Store?
Partner with Experienced Shopware Developers
Our team of certified Shopware developers specialises in:
- Custom plugin and feature development
- Advanced B2B and quote systems
- API integration and automation
- Theme customisation and storefront optimisation
Whether you’re upgrading your Shopware 6 store or need a custom module built from scratch, we’re here to help you succeed.
Why Soft Solutions4U?
At Soft Solutions4U, we help Swiss and German SMEs modernize and scale their eCommerce with tailored development services. Whether it’s a brand-new store or advanced backend automation, we deliver with precision.
As a Shopware B2B development company, we offer:
- Shopware plugin development (quotes, imports, logic automation)
- Shopware Community Edition setup & hosting optimization
- Custom pricing and tax workflows for B2B clients
- End-to-end support for DACH market eCommerce
- Multilingual teams for better Swiss-German collaboration
If you’re looking for a Shopware development agency in Frankfurt or anywhere in the DACH region, we’re your dependable offshore team with local understanding.
Ready for your online success?
You're one step away from taking your business to the next level. Schedule an initial consultation now so we can discuss your goals.
I was extremely pleased with how Soft Solutions4U delivered a perfect automation solution for my daily manual tasks—such as updating product prices and consolidating customer quote requests-transforming our operations into a much more efficient and streamlined process.
OWNER TAMEQ SCHWEIZ GMBH 