Introduction

If you are running a Shopify store using the Dawn theme and want to capture leads when a product is out of stock, adding an RFQ (Request for Quote) Form is an effective solution. This allows potential customers to submit their inquiries instead of leaving the site. In this guide, we’ll walk you through the steps to create an RFQ form, edit the Liquid code, and ensure a seamless experience for your users.

Why Add an RFQ Form for Out-of-Stock Products?

• Lead Generation: Capture potential buyers' contact details for future sales.

• Customer Engagement: Allows customers to express interest in unavailable products.

• Better Inventory Management: Helps you understand demand for out-of-stock items.

• SEO Boost: Keeps users engaged on your site, reducing bounce rates.

Steps to Add an RFQ Form in Shopify (Dawn Theme)

1. Create a Custom RFQ Form

Shopify allows you to create forms using Liquid code. Follow these steps to create a form that will be displayed when a product is out of stock.

Step 1: Add a New Section for the RFQ Form

1. In Shopify Admin, navigate to Online Store > Themes.

2. Click Customize, then Edit Code.

3. Under Sections, click Add a new section and name it rfq-form.

4. Paste the following code inside the new file:

5. 
   

{% form 'contact', id: 'rfq-form' %}
  <label for="name">Your Name:</label>
  <input type="text" name="contact[name]" required>

  <label for="email">Your Email:</label>
  <input type="email" name="contact[email]" required>

  <label for="message">Your Inquiry:</label>
  <textarea name="contact[body]" required></textarea>

  <input type="hidden" name="contact[product]" value="{{ product.title }}">

  <button type="submit">Submit Inquiry</button>
{% endform %}

5. Save the file.

2. Modify the Product Page to Show the RFQ Form When Out of Stock

To display the form only when a product is out of stock, modify the main-product.liquid file:

1. Navigate to Online Store > Themes > Edit Code.

2. Under Sections, find main-product.liquid.

3. Locate the inventory check code (search for product.available).

4. Add the following code where you want the RFQ form to appear:

{% if product.available == false %}
  <div class="rfq-container">
    <p>This product is currently out of stock. Request a quote below:</p>
    {% render 'rfq-form' %}
  </div>
{% endif %}

5. Save and preview the product page.

3. Customize the RFQ Form Appearance (Optional)

To style the form, add the following CSS in base.css (or any custom CSS file used in your theme):

.rfq-container {
  background-color: #f8f8f8;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-top: 20px;
}
.rfq-container input, .rfq-container textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.rfq-container button {
  background-color: #ff9800;
  color: white;
  padding: 10px 15px;
  border: none;
  cursor: pointer;
}
.rfq-container button:hover {
  background-color: #e68900;
}

4. Testing the RFQ Form

• Go to a product that is out of stock.

• Check if the RFQ form appears.

• Submit a test inquiry and verify if it is received under Shopify > Customers > Inquiries.

Additional Features

• Email Notifications: Configure Shopify to notify you when a form is submitted.

• Third-Party Apps: Use apps like Form Builder or Request a Quote for advanced features.

• Integration with CRM: Capture RFQ leads into a CRM like HubSpot or Zoho CRM.

Conclusion

Adding an RFQ form to your Shopify Dawn theme for out-of-stock products ensures you don’t lose potential sales. By implementing this simple Liquid code modification, you enhance customer engagement and increase conversion opportunities. If you need assistance with Shopify development, Intertoons' Shopify Development Services can help you customize and optimize your Shopify store.