Tutorial: Add a contact us form for sold out products
If you'd like to add a contact form or message when a product or product variant is sold out, you can use this customization.
This is an advanced customization and requires you to edit your assets/shop.js file and also the snippets/product.liquid file. Always make a duplicate of your theme and work from a test theme when making code changes.
The result can be something like this when an item is out of stock:
How to:
Always make a duplicate of your theme before adding any code. This will save you if anything goes wrong or if you decide not to use the added code in the future. We can not support or be responsible of any code changes that you make to your theme. For that reason, save yourself and make a duplicate first.
Make a duplicate before any code changes:
There are 2 main steps in this tutorial. Be sure to complete both and save the files in each step.
- 1
-
Create a new snippet file
From the Snippets folder, choose add a new snippet file:
Call the snippet:
sold-out-form
Example:
Use the Create snippet button to complete.
Copy all the code from this file and paste into your new sold-out-form file:
Example:
Use the Save button after pasting the code.
- 2
-
Add code to snippets/product.liquid
After creating sold-out-form.liquid, we will call that snippet in product.liquid.
The code to call the file is:
{% include 'sold-out-form' %}
Where to add that line of code:
From the Snippets folder, open product.liquid file:
Option 1 - For Pipeline 4 and higher
Newer versions of Pipeline have the ability to display the product description above or below the add to cart form. If you're using a newer version of Pipeline you'll be adding the include line of code into two places. Pipeline 4.0 to 4.2 will have one place to add the code.
Use the Find feature (Command-F on Mac or Control-F in Windows) and search for:
product-form
Pipeline 4.3 and higher will find two results:
You'll be adding the include code after the include product-form line and before the endif line. Example for both places:
Pipeline 4.0-4.2 has only one place to add the code:
OR
Option 2 - For Earlier versions of Pipeline
Earlier versions of Pipeline use this method (Pipeline 4 and higher use the above version and then skip the next step):
Use the Find feature (Command-F on Mac or Control-F in Windows) and search for:
settings.product_social_enable
Add a couple blank lines about that line and then paste the following code above it:
(the code to add is at the start of Step 2 in green)
Save the file:
- 3
-
Add Javascript code
Open yourJavascript file, this will vary depending on which version of Pipeline you're running:
Which version of Pipeline am I using?
Pipeline 4 and higher - open from the Assets folder theme.js
OR
Earlier versions of Pipeline, open from the assets folder shop.js.liquid:
NEXT STEPS - ALL VERSIONS
Find the following line:
Select a valid variant if available
We will be adding code in two places:
We are going to add two lines of code in separate places.
Part 1
The first line of code will go above the else statement:
$(".sold-out-form").hide();
Add that code above the else line:
Part 2
Add this second line of code in the following section before the closing curly bracket line:
$(".sold-out-form").show();
Example:
That complete section should look like this after add both lines:
Save the file:
You can now test product pages that have a sold out variant or completely sold out:
Example of message you'll receive which includes the product page where the form was submitted from:
Notes
- The contact form sends a message to the Customer email address in your General Settings:
https://shopify.com/admin/settings/general
- The intro text can be customized here:
- If you'd like to add a phone number option to the form, that code is:
{% assign name_attr = 'contact.form.phone' | t | handle %}
<label for="ContactFormPhone" class="label--hidden">{{ 'contact.form.phone' | t }}</label>
<input type="tel" id="ContactFormPhone" name="contact[{{ name_attr }}]" placeholder="{{ 'contact.form.phone' | t }}" pattern="[0-9\-]*" value="{% if form[name_attr] %}{{ form[name_attr] }}{% elsif customer %}{{ customer.phone }}{% endif %}">
Insert between the other form elements.
Undo: If you've made any mistakes or your theme is not working, go back to your duplicate/backup theme.
Need help with code changes?
We're not able to make any code customizations but we can recommend shophelper.io and heycarson -- they both specialize in small code changes and have really competitive flat-rate pricing.