Comprehensive Setup Guide: B2B Request Quote & Hide Price App

This document provides a detailed, step-by-step guide on configuring the "B2B Request Quote & Hide Price" application, covering initial enablement, product selection, button customization, widget placement, price hiding, and email settings.

1. Initial Setup: Enabling the App Embed

The first step is to enable the app functionality within your store’s theme editor so that the quote features appear on your storefront.

  1. Navigate to Online Store: From your Shopify Admin dashboard, go to Online Store and click on Themes.

  2. Customize Theme: Next to your current theme, click the Customize button. This opens the Theme Editor.

  3. Access App Embeds: In the left sidebar of the Theme Editor, look for the App embeds or App settings section.

  4. Enable App: Locate the toggle switch for B2B Request Quote. Click the toggle to Enable the app embed.

  5. Save Changes: Click the Save button in the top right corner of the editor to apply the changes to your live theme.

2. Product Selection for Quoting

You need to define which products in your catalog will be available for customers to request a quote on.

  1. Access App Settings: Navigate to the App's main settings page (usually located under the Apps section of your Shopify Admin).

  2. Go to Quotes Products: In the navigation menu of the app settings, select Quotes Products.

  3. Select Quoting Strategy: Choose one of the following options based on your business requirements:

    • All Products: Allows quoting on every product in your store.

    • Conditions Base Products: Allows you to set up rules (e.g., specific tags, vendors, or collection membership) to dynamically include products for quoting.

    • Selected Products: Allows you to manually browse and select specific products that will have the quote functionality enabled.

3. Quote Button Settings (Request a Quote Button)

This section controls the appearance, placement, and core behavior of the "Request a Quote" button displayed on your product pages.

  1. Go to Settings: In the app settings menu, select Request a quote button.

  2. Button Display Setting: Configure how the functionality is presented to the user:

    • Show Button: Displays a clickable button (e.g., "Add to Quote").

    • Show Form: Immediately displays the quote request form.

  3. Product Page Display: Use the toggle to control whether the quote button/form is shown on the product page.

  4. Styling Customization:

    • Button Color: Select a primary color for the quote button using the color picker.

    • Font Size: Set the font size for the button text (e.g., 14px, 16px).

  5. Action and Permission Management: Configure key user permissions:

    • Allow Edit Quote Item Price: Enable or disable whether users are allowed to manually adjust the price of an item within their quote request.

    • Allow Add Cart Product to Quote: Enable or disable the option for users to move items from their standard shopping cart into the quote request.

    • Restrict Guest User for Submit Quote: Enable this to force non-logged-in users to sign in or register before they can successfully submit a quote request.

  6. Redirect After Submission: Define the destination page a user is taken to immediately after they successfully submit a quote (e.g., a "Thank You" page).

4. Quote Widget Configuration

The Quote Widget (often a small icon or floating cart) provides persistent access to the quote items.

  1. Go to Quote Widget: In the app settings menu, select Quote Widget.

  2. Select Position: Choose where the widget will appear on the storefront:

    • Bottom right, Half bottom right, Half top right

    • Bottom left, Half bottom left, Half top left

  3. Styling Customization:

    • Widget Text Color: Set the color of any text displayed on the widget (e.g., the item count).

    • Widget Background Color: Set the background color of the widget itself.

  4. Widget Action: Define the user experience when the widget is clicked:

    • Redirect to Quote Page: Clicking the widget takes the user to a dedicated quote list page.

    • Open Quote Popup: Clicking the widget displays the quote list in an overlay or modal popup without navigating away from the current page.

5. Price Visibility Control (Hide Price)

This feature allows you to hide the default retail price for selected products or customers, ensuring they must request a quote instead.

  1. Go to Hide Price: In the app settings menu, select Hide Price.

  2. Select Condition for Hide Price: Configure the rules for when prices should be hidden:

    • Product-based: Hide prices for specific products, collections, or those with certain tags.

6. Email Confirmation and SMTP Configuration

This section manages the communication flow, including confirmation emails to both the admin and the customer, and configuring your external email sending service.

  1. Go to Email settings: In the app settings menu, select Email settings.

  2. Manage Email Fields (Admin & Customer):

    • Review and customize the fields/templates for the emails sent to the Admin when a new quote is submitted.

    • Review and customize the fields/templates for the confirmation emails sent to the Customer upon submission.

  3. Test Email Functionality:

    • Click on Test Email to open the testing popup form.

    • Click the Send button on the popup. A test email will be sent to the primary email address configured for your Shopify store, allowing you to verify that the email templates are working correctly.

  4. Custom SMTP Configuration: If you wish to send emails via your own server (for better delivery rates and branding), configure Custom SMTP:

    • In the Email settings page, navigate to the SMTP tab or section.

    • Click the Enable SMTP checkbox/toggle.

    • Enter the following required details:

      • SMTP Host: The address of your mail server (e.g., smtp.sendgrid.net).

      • SMTP Port: The port number used by the server (usually 587).

      • SMTP User Name: Your SMTP login username.

      • SMTP Password: Your SMTP login password.

      • Encryption: Select the required encryption protocol (e.g., TLS, SSL).

      • From Address: The email address that emails will appear to be sent from (e.g., support@squadkin.com).

      • From Name: The name that appears as the sender (e.g., B2B Request Quote & Hide Price).

    • Save the SMTP configuration details.