Manual Theme Installation Guide (pre 2.0 themes) – W3trends, Inc.

<a href="/apps/request-quote?page=request" class="btn">Request A Quote</a>

TLDR: Paste the above anchor tag in your cart.liquid file, just above your Checkout/Update Cart buttons.

Overview

This theme guide is required before selling products through the Quick Quote application. Once it is complete, a Request A Quote button will appear within your cart page, which will allow for your customers to use our system to generate quotes, which you can manage from our admin and approve for checkout.

If you have an AJAX cart, or any other type of popup, drawer, or pullout cart, and the app did not appear within this cart after completing the installation tutorial, there may be further steps necessary in order to get the app to work with this type of cart. If you would like for some assistance showing the app within one of these types of carts, or if you need help with the following tutorial, please feel free to reach out to us Here.

Create A Backup Of Your Theme

Before starting it is highly recommended that you create a backup of your theme. This could protect you from any mistakes you could possibly make. Please follow this Shopify guide for how to duplicate your existing theme.

Installation

Step 1: Locate/Open your theme code files

In your Shopify Admin, select Online Store from the vertical navigation menu on the left.
For your main theme (the theme at the top of the list), click the "Actions" button in the top right, and then click Edit Code.
On the left under Templates, navigate to cart.liquid.

Sometimes within your cart.liquid, it may tell you that the contents of your cart are within another file.

If this is the case, simply follow the path that it tells you to follow. In the example above, it is telling me to look in the "cart-template.liquid" file under the "Sections" folder.

In this case, the cart template can be found here:

Step 2: Paste The Button

We will now insert a button to allow for customers to access the Request A Quote page. Some flexibility is allowed on placement, but for instructional purposes we will place it next to the checkout and update cart button.

In your liquid file locate where the checkout buttons are by holding the "Ctrl" key and then pressing "F". This will open a small box at the top right. In this box, please search for "submit".

This will return a couple of results, but we are looking for the one with the word checkout on it.

Your checkout/update buttons should look something like what we have below (Please note that your theme may be different than this one, but typically is relatively similar):

<div class="cart__submit-controls">
  <input type="submit" name="update" class="btn btn--secondary small--hide cart__submit-control" value="{{ 'cart.general.update' | t }}">
  <input type="submit" name="checkout" class="btn btn--small-wide cart__submit cart__submit-control" value="{{ 'cart.general.checkout' | t }}">
</div>

Above the first 'input' insert this HTML anchor tag:
```
<a href="/apps/request-quote?page=request" class="btn">Request A Quote</a>
```
It should likely end up looking somewhat like the following:
```
<div class="cart__submit-controls">
 <a href="/apps/request-quote?page=request" class="btn">Request A Quote</a>
 <input type="submit" name="update" class="btn btn--secondary small--hide cart__submit-control" value="{{ 'cart.general.update' | t }}">
 <input type="submit" name="checkout" class="btn btn--small-wide cart__submit cart__submit-control" value="{{ 'cart.general.checkout' | t }}">
</div>
```
In most cases /apps/request-quote will be the URL to your request a quote page. If this page does not load please follow these instructions on how to find out your actual page: How To Find Request Quote Page. It is ABSOLUTELY necessary for you to visit this page in order for the app to register the URL behind the scenes. Failing to do this will cause the email links to not work.

If your button is not styled correctly, you will need to copy the style of the checkout or update button. To do this copy all the words in the "class" field from of of the other buttons and place them in the class of the request a quote button. (Examples include: class="btn btn-default", class="btn btn-primary", class="button")

Step 3: Save!

Once you are done adding the link to the Request A Quote page to your cart template, be sure to save the file!

You're now ready to begin accepting quotes for your products! Go add a few products to your cart and take a look and make sure you're happy with the placement of the Request A Quote Button.

Optional Steps

Hide The Checkout Button

You may only want to allow customers to request quotes, and to not allow them to use the Shopify checkout at all. To do this you will need to hide the button to the checkout. Locate the HTML input tag for checkout and surround it with the two liquid tags below:
```
{% comment %} {% endcomment %}
```

It should end up looking something like this:

<div class="cart__submit-controls">
 <a href="/apps/request-quote?page=request" class="btn">Request A Quote</a>
 <input type="submit" name="update" class="btn btn--secondary small--hide cart__submit-control" value="{{ 'cart.general.update' | t }}">
 {% comment %}
   <input type="submit" name="checkout" class="btn btn--small-wide cart__submit cart__submit-control" value="{{ 'cart.general.checkout' | t }}">
 {% endcomment %}
</div>

Hide Request Quote / Checkout Button Depending On Cart Content

Sometimes you may offer products that are strictly Quotable, while at the same time offering products which must be Checked Out rather than quoted. We have a custom tutorial for this scenario, which will look at the products in the cart, and will only show the Request A Quote button if the items in the cart are set to quotable. And if none of these items are set to Quotable, it will only show the Checkout button.

If you'd like to add this functionality to your shop, please follow this tutorial: click here