This article details how to add a link to your cart page that will allow a customer to send their order via email instead paying via your standard shop checkout process.

I do not have an Aarcade theme

If you do not have an Aarcade theme, do not create an x ic after cart items page as detailed in the next section of this article.

Instead you will need to work out a suitable place within your Cart theme page – located in your..

Customize design > Advanced () – Cart

Big Cartel admin area – to manually paste code to, instead of pasting it into a x ic after cart items page. Contact your theme provider if you need further assistance.

Create an Insert Content page

With an Aarcade standard theme you use the Insert Content method to insert content into your cart page. For the email order link, we recommend using the x ic after cart items page.

So, in this case, the first step is to create a new custom page, as detailed in the support article How do I add a page to my Big Cartel shop?, and name it x ic after cart items

Option A: The mailto Method

This method uses a mailto link to open order details in the customer’s default email application. If your customer does not have a default email application set up, the email link may generate an error code or simply not work. For this reason, you may wish to add an extra line to your custom message (explained below) along the lines of:

“If the above link does not work, please make sure that you have set up a default email application in your browser and/or operating system settings.”

Instructions

Copy all of the code in the code box below and paste it into your new x ic after cart items page content area.

{% assign orders_go_to_email = 'orders@gmail.com' %}

{% capture order_email_body %}{% for item in cart.items %}{{ item.quantity }} x {{ item.name }} - {{ store.currency.sign }}{{ item.price | money }}%0A{% endfor %}{% if cart.discount.enabled %}{% unless cart.discount.pending or cart.discount.amount num_lt 0 %}%0ADiscount: -{{ store.currency.sign }}{{ cart.discount.amount | money }}{% endunless %}{% endif %}{% if cart.shipping.enabled %}%0AShipping to: {{ cart.country.name }}%0AShipping: {% if cart.shipping.pending %}--{% elsif cart.discount.free_shipping %}FREE{% else %}{{ store.currency.sign }}{{ cart.shipping.amount | money }}{% endif %}{% endif %}%0A%0AORDER TOTAL: {{ store.currency.sign }}{{ cart.total | money }}{% endcapture %}{% capture link_open %}<a href="mailto:{{ orders_go_to_email | remove: ' ' }}?subject={{ store.name | replace: '&euro;', '€'  | replace: '&yen;', '¥'  | replace: '&pound;', '£'  | replace: ' ', '%20' | replace: '"', '%22' | replace: '&', '%26' }}%20-%20Order&body={{ order_email_body | replace: '&euro;', '€'  | replace: '&yen;', '¥'  | replace: '&pound;', '£'  | replace: ' ', '%20' | replace: '"', '%22' | replace: '&', '%26' }}">{% endcapture %}{% capture link_close %}</a>{% endcapture %}

To submit your order via email, please {{ link_open }}click here{{ link_close }}. We will invoice you once your order is ready to ship.

Edit this code as discussed in the following Explanations and save your page when finished.

Explanation – Code Part A

{% assign orders_go_to_email = 'orders@gmail.com' %}

Here we assign our preferred email address for receiving orders to a variable named orders_go_to_email. The variable is then used later in the code to construct the email link.

You must set this to the email address that you want all of your email orders to be sent to. For example:

{% assign orders_go_to_email = 'conor@myshop.com' %}

Explanation – Code Part B

{% capture order_email_body %}{% for item in cart.items %}{{ item.quantity }} x {{ item.name }} - {{ store.currency.sign }}{{ item.price | money }}%0A{% endfor %}{% if cart.discount.enabled %}{% unless cart.discount.pending or cart.discount.amount num_lt 0 %}%0ADiscount: -{{ store.currency.sign }}{{ cart.discount.amount | money }}{% endunless %}{% endif %}{% if cart.shipping.enabled %}%0AShipping to: {{ cart.country.name }}%0AShipping: {% if cart.shipping.pending %}--{% elsif cart.discount.free_shipping %}FREE{% else %}{{ store.currency.sign }}{{ cart.shipping.amount | money }}{% endif %}{% endif %}%0A%0AORDER TOTAL: {{ store.currency.sign }}{{ cart.total | money }}{% endcapture %}{% capture link_open %}<a href="mailto:{{ orders_go_to_email | remove: ' ' }}?subject={{ store.name | replace: '&euro;', '€'  | replace: '&yen;', '¥'  | replace: '&pound;', '£'  | replace: ' ', '%20' | replace: '"', '%22' | replace: '&', '%26' }}%20-%20Order&body={{ order_email_body | replace: '&euro;', '€'  | replace: '&yen;', '¥'  | replace: '&pound;', '£'  | replace: ' ', '%20' | replace: '"', '%22' | replace: '&', '%26' }}">{% endcapture %}{% capture link_close %}</a>{% endcapture %}

Here we construct the email link using Big Cartel API to loop through the cart items and then add the discount (if applicable) and shipping details and the order total.

You do not need to edit this code.

Explanation – Code Part C

To submit your order via email, please {{ link_open }}click here{{ link_close }}. We will invoice you once your order is ready to ship.

Here we define the message to be displayed to the customer. For examples and recommended usage, refer to Custom Message Examples at the end of this article.

Option B: The Contact Form Method

This method uses your Big Cartel contact form to send the customer’s order details, which is more universally compatible than the mailto method.

Instructions – Part A

Copy all of the code in the code box below and paste it into your new x ic after cart items page content area (detailed in the first section of this support article).

{% capture order_field %}{% for item in cart.items %}{{ item.quantity }} x {{ item.name }} - {{ store.currency.sign }}{{ item.price | money }}%0D{% endfor %}{% if cart.discount.enabled %}{% unless cart.discount.pending or cart.discount.amount num_lt 0 %}%0DDiscount: -{{ store.currency.sign }}{{ cart.discount.amount | money }}{% endunless %}{% endif %}{% if cart.shipping.enabled %}%0DShipping to: {{ cart.country.name }}%0DShipping: {% if cart.shipping.pending %}--{% elsif cart.discount.free_shipping %}FREE{% else %}{{ store.currency.sign }}{{ cart.shipping.amount | money }}{% endif %}{% endif %}%0D%0DORDER TOTAL: {{ store.currency.sign }}{{ cart.total | money }}{% endcapture %}{% capture link_open %}<a href="/contact?subject={{ store.name | replace: '&euro;', '€'  | replace: '&yen;', '¥'  | replace: '&pound;', '£'  | replace: ' ', '%20' | replace: '"', '%22' | replace: '&', '%26' }}%20-%20Order&message={{ order_field | replace: '&euro;', '€'  | replace: '&yen;', '¥'  | replace: '&pound;', '£'  | replace: ' ', '%20' | replace: '"', '%22' | replace: '&', '%26' }}">{% endcapture %}{% capture link_close %}</a>{% endcapture %}

To submit your order via email, please {{ link_open }}click here{{ link_close }}. We will invoice you once your order is ready to ship.

Edit this code as discussed in the following Explanations and save your page when finished.

Explanation – Code Part A

{% capture order_field %}{% for item in cart.items %}{{ item.quantity }} x {{ item.name }} - {{ store.currency.sign }}{{ item.price | money }}%0D{% endfor %}{% if cart.discount.enabled %}{% unless cart.discount.pending or cart.discount.amount num_lt 0 %}%0DDiscount: -{{ store.currency.sign }}{{ cart.discount.amount | money }}{% endunless %}{% endif %}{% if cart.shipping.enabled %}%0DShipping to: {{ cart.country.name }}%0DShipping: {% if cart.shipping.pending %}--{% elsif cart.discount.free_shipping %}FREE{% else %}{{ store.currency.sign }}{{ cart.shipping.amount | money }}{% endif %}{% endif %}%0D%0DORDER TOTAL: {{ store.currency.sign }}{{ cart.total | money }}{% endcapture %}{% capture link_open %}<a href="/contact?subject={{ store.name | replace: '&euro;', '€'  | replace: '&yen;', '¥'  | replace: '&pound;', '£'  | replace: ' ', '%20' | replace: '"', '%22' | replace: '&', '%26' }}%20-%20Order&message={{ order_field | replace: '&euro;', '€'  | replace: '&yen;', '¥'  | replace: '&pound;', '£'  | replace: ' ', '%20' | replace: '"', '%22' | replace: '&', '%26' }}">{% endcapture %}{% capture link_close %}</a>{% endcapture %}

Here we construct the form link using Big Cartel API to loop through the cart items and then add the discount (if applicable) and shipping details and the order total.

You do not need to edit this code.

Explanation – Code Part B

To submit your order via email, please {{ link_open }}click here{{ link_close }}. We will invoice you once your order is ready to ship.

Here we define the message to be displayed to the customer. For examples and recommended usage, refer to Custom Message Examples at the end of this article.

Option C: The Wufoo Form Method

This method uses a form created with Wufoo, which requires a little more work but also allows you to add extra custom fields for gathering more customer information if necessary. We use Wufoo because the Big Cartel contact form can not be customised (see Can I create a custom contact form for my Big Cartel shop?).

Instructions – Part A

Create an account at Wufoo and then create a new form. Note that this can be done with a free Wufoo account. Your new form will need the following fields as a minimum:

• Single Line Text – for the subject
• Paragraph Text – for the order details
• Email – for the customer’s email address

Following these parameters, we have created a sample form – http://featherweight.wufoo.com/forms/order-form/ – and we have also added an extra Paragraph Text for the customer to provide extra notes with their order.

Also note that we have used our Wufoo field editor to mark the Subject, Order Details and Your Email fields as required. This will help prevent people from submitting incomplete details.

Save your new form, return to your Form Manager and click the View link to view your new form online. Make a note of your form’s URL for the following step, which should be in the format:

http://username.wufoo.com/forms/form-name/

Note the the link ends with a forward slash.

Instructions – Part B

Copy all of the code in the code box below and paste it into your new x ic after cart items page content area (detailed in the first section of this support article).

{% assign wufoo_form_url = 'http://username.wufoo.com/forms/form-name/' %}

{% assign subject_field_number = '1' %}

{% assign order_field_number = '3' %}

{% capture order_field %}{% for item in cart.items %}{{ item.quantity }} x {{ item.name }} - {{ store.currency.sign }}{{ item.price | money }}%0D{% endfor %}{% if cart.discount.enabled %}{% unless cart.discount.pending or cart.discount.amount num_lt 0 %}%0DDiscount: -{{ store.currency.sign }}{{ cart.discount.amount | money }}{% endunless %}{% endif %}{% if cart.shipping.enabled %}%0DShipping to: {{ cart.country.name }}%0DShipping: {% if cart.shipping.pending %}--{% elsif cart.discount.free_shipping %}FREE{% else %}{{ store.currency.sign }}{{ cart.shipping.amount | money }}{% endif %}{% endif %}%0D%0DORDER TOTAL: {{ store.currency.sign }}{{ cart.total | money }}{% endcapture %}{% capture link_open %}<a href="{{ wufoo_form_url }}def/field{{ subject_field_number }}={{ store.name | replace: '&euro;', '€'  | replace: '&yen;', '¥'  | replace: '&pound;', '£'  | replace: ' ', '%20' | replace: '"', '%22' | replace: '&', '%26' }}%20-%20Order&field{{ order_field_number }}={{ order_field | replace: '&euro;', '€'  | replace: '&yen;', '¥'  | replace: '&pound;', '£'  | replace: ' ', '%20' | replace: '"', '%22' | replace: '&', '%26' }}">{% endcapture %}{% capture link_close %}</a>{% endcapture %}

To submit your order via email, please {{ link_open }}click here{{ link_close }}. We will invoice you once your order is ready to ship.

Edit this code as discussed in the following Explanations and save your page when finished.

Explanation – Code Part A

{% assign wufoo_form_url = 'http://username.wufoo.com/forms/form-name/' %}

Here we assign the URL of our Wufoo form that we noted during Instructions – Part A above. This URL is used later in the code to construct the form link. Make sure you include the http:// at the very beginning and the / at the very end of your URL.

Using our example form we would set this value as follows:

{% assign wufoo_form_url = 'http://featherweight.wufoo.com/forms/order-form/' %}

Explanation – Code Part B

{% assign subject_field_number = '1' %}

{% assign order_field_number = '3' %}

Here we define the field numbers that our Wufoo form uses for the Subject field and the Order Details field.

It may take some trial and error to find the correct field numbers for these settings. If you know how to use your browser’s developer tools you can quickly locate your input name attributes to confirm the field number.

In the case of our test form, we added the Subject field first and then the Order Details field. One would expect the field numbers to therefore be 1 and 2, however inspecting the form shows the fields are actually 1 and 3. These are the default settings for the field numbers, but remember that you may need to change these numbers for your form.

Explanation – Code Part C

{% capture order_field %}{% for item in cart.items %}{{ item.quantity }} x {{ item.name }} - {{ store.currency.sign }}{{ item.price | money }}%0D{% endfor %}{% if cart.discount.enabled %}{% unless cart.discount.pending or cart.discount.amount num_lt 0 %}%0DDiscount: -{{ store.currency.sign }}{{ cart.discount.amount | money }}{% endunless %}{% endif %}{% if cart.shipping.enabled %}%0DShipping to: {{ cart.country.name }}%0DShipping: {% if cart.shipping.pending %}--{% elsif cart.discount.free_shipping %}FREE{% else %}{{ store.currency.sign }}{{ cart.shipping.amount | money }}{% endif %}{% endif %}%0D%0DORDER TOTAL: {{ store.currency.sign }}{{ cart.total | money }}{% endcapture %}{% capture link_open %}<a href="{{ wufoo_form_url }}def/field{{ subject_field_number }}={{ store.name | replace: '&euro;', '€'  | replace: '&yen;', '¥'  | replace: '&pound;', '£'  | replace: ' ', '%20' | replace: '"', '%22' | replace: '&', '%26' }}%20-%20Order&field{{ order_field_number }}={{ order_field | replace: '&euro;', '€'  | replace: '&yen;', '¥'  | replace: '&pound;', '£'  | replace: ' ', '%20' | replace: '"', '%22' | replace: '&', '%26' }}">{% endcapture %}{% capture link_close %}</a>{% endcapture %}

Here we construct the form link using Big Cartel API to loop through the cart items and then add the discount (if applicable) and shipping details and the order total.

You do not need to edit this code.

Explanation – Code Part D

To submit your order via email, please {{ link_open }}click here{{ link_close }}. We will invoice you once your order is ready to ship.

Here we define the message to be displayed to the customer. For examples and recommended usage, refer to Custom Message Examples below.

Custom Message Examples

To submit your order via email, please {{ link_open }}click here{{ link_close }}. We will invoice you once your order is ready to ship.

Here we define the message to be displayed to the customer. Note that this must be at the end of all of the code and that the {{ link_open }} and {{ link_close }} variables (defined in our link construction coding) are used to surround the link text.

You can edit this message as you like using HTML and new lines. You must always include the {{ link_open }} and {{ link_close }} variables.

For example:

<div style="text-align: center;">
<h3>Payment via Cheque or Money Order</h3>

If you wish to pay for your order via cheque or money order, please {{ link_open }}submit your order via email{{ link_close }} and we will invoice you accordingly.

Note that orders paid via cheque or money order take an additional 5 working days to fulfil.
</div>

You can also use additional Big Cartel API in your message. For example, if you wanted to be sure that your customer first selects their shipping details before emailing their order.

{% if cart.shipping.enabled and cart.shipping.pending %}
Please select your shipping destination and update your cart to enable the option to email your order.
{% else %}
To submit your order via email, please {{ link_open }}click here{{ link_close }}. We will invoice you once your order is ready to ship.
{% endif %}

Controlling who sees the email order message

If you are using a Big Cartel discount codes, you can easily ensure that only customers using a particular code will see your email order message.

After successfully creating your email message and link using the instructions in the previous sections of this support article you can surround all of the code, i.e. surround everything you have entered into your x ic after cart items page content area with the following conditional statement using Big Cartel API:

{% if cart.discount.code == 'MYDISCOUNTCODE' %}

..this is ALL of your x ic cart page content code..

{% endif %}

Where MYDISCOUNTCODE is the correct discount code (that you created in your Big Cartel admin) that your target customer needs to enter.

So, lets say you have an Aarcade wholesale order form and your wholesale discount code is WHOLESALE123, to ensure that only your wholesale customers see your email order link your x ic cart page page code would be:

{% if cart.discount.code == 'WHOLESALE123' %}

..this is ALL of your x ic cart page content code..

{% endif %}

Disabling standard checkout and forcing order by email

If you wish to force orders to be sent by email, you can use a conditional statement relating to the relevant discount code to hide the Checkout button. Read the previous section Controlling who sees the email order message for further details.

To apply this you need to locate the Checkout button code in your Cart page. For an Aarcade theme this would appear as follows..

<tr class="checkout">
	<td class="c1"><a class="continue_shopping" href="/products"><span>«</span>Continue Shopping</a></td>
	<td class="c2"><button class="checkout_btn" type="submit" title="Checkout">{{ checkout_button_text }}</button></td>
</tr>

It is important that you select a section of code – i.e. select the correct start and end point – that can be excluded without breaking the HTML of your Cart page. In the above Aarcade theme example, we have selected the entire table row containing “Continue Shopping” link and “Checkout” button – from opening <tr> tag to closing </tr> tag – as excluding an entire row from a table is the safest way to ensure that the table is not broken.

Once the correct section of code is selected, we can then apply a Big Cartel API conditional statement. Note that we want the opposite of the statement we used in the previous section Controlling who sees the email order message, i.e. we want our code section to be displayed at all times unless the target discount code is used.

In light of the above, we use a a Big Cartel API unless statement:

{% unless cart.discount.code == 'MYDISCOUNTCODE' %}
<tr class="checkout">
	<td class="c1"><a class="continue_shopping" href="/products"><span>«</span>Continue Shopping</a></td>
	<td class="c2"><button class="checkout_btn" type="submit" title="Checkout">{{ checkout_button_text }}</button></td>
</tr>
{% endunless %}

As with the example in the previous section Controlling who sees the email order message, in this example MYDISCOUNTCODE is replaced with the correct discount code (that you created in your Big Cartel admin) that your target customer will enter. Note that discount codes are changed to all capitals by Big Cartel.