Price-on-Request Form in the Shopify Narrative Theme
Our customer sells beautiful vintage violins and bows which are of interest for ambitious violin players and for collectors. For them the price of a violin is not the most important information and we are somehow reluctant to call out a price into the world for the more valuable violins. So we wanted to modify the shop such that a price-on-request is possible.
How to place a request for price form on the product page is nicely described on the Shopify community pages but we did not like the way it looked. Within the community pages is also the suggestion to link to the contact page in these cases. This seemed more appealing to us and we followed this route.
To create a specific contact page for our request for price is standard in Shopify. In the Shopify Admin underneath the Online Store click on Pages->Add page and select a page.contact as a template. You can also add a title, like ‘Request for price’ and add some additional information in the content section.
When you open the page in the online store it certainly looks nice, but there is no connection to the product for which the price is requested. So the potential violin buyer had to fill in information we already know, what we did not like.
So a request for price form was required that included the product information automatically and it should fit to the overall style of the Shopify shop, where the Narrative theme is used. But we expect that our approach transfers to other themes as well.
Price-on-request buttons on the product page
To put the buttons for price on request and make an appointment on the product page is fairly simple. If you look into the file product-template.liquid in the Sections folder of the code for the Narrative Theme (Online Store->Actions->Edit Code) you will notice the line
{% include ‘product-form’ %}which ties in the snippet product-form.liquid from the Snippet folder. To modify the product page it is only necessary to replace this line with
{% include ‘product-ask-price’ %}
Then create a new snippet product-ask-price.liquid with the following content in the snippet folder.
Here for the styling the same button styling classes are used as in the snippet product-form.liquid so any customization of the Narrative theme should transfer to the new buttons. What is added to the buttons are the classes product__request_price (and product__request_appointment). These classes will be used to attach the behavior of these buttons which can be done in the file custom.js in the Assets folder.
With the library jQuery being readily available in the Narrative theme we can use this functionality to first check if a page is loaded and then to see if a class product__request_price is found on the page. If this is the case a function is attached that will be evaluated if the connected element, here a button, is clicked.
The code of the click-function commands that the value of the [data-product-json] object is assigned to a variable productJSON. The value of [data-product-json] comes from the product page. If you look into the file product-template.liquid in the section folder you see the lines
When requesting the product page the line {{ product | json }} is expanded by the Liquid engine inserting a fairly complete json representation of the product available on the product page. Starting with line 3 in custom.js this json data is retrieved, parsed and stored in the session storage of the browser making it available for later usage. In the last step of the function defined in custom.js a new page is opened in the browser.
Contact page with product information
To show the product information on a specific request-for-price page we created a new template with the name page.pricerequest.liquid in the Templates folder of the theme and copied the content of the file page.contact.liquid into it. Then we replaced the lines
{% if page.content != blank %}
<div class=”rte rte — contact”>
{{ page.content }}
</div>
{% endif %}with
which is the base for us to add product information when the page is opened. This is done with a few line of javascript at the end of the page.
In the first line the stored product information is retrieved from the sessionStorage. Then the element with the id price-ask__item is selected and starting from there values from the product information is attached to the sub nodes where ever something like ${…} (template strings) is seen.
The classes for the styling the product information is inspired by the card classes of the theme and are added to the theme.sccs.liquid file in the Assets folder. These additions can be found here.
Now create a new page as described before, choose a suitable title and -most important- select the newly visible template page.pricerequest. The page then should somehow look as below:
Extending the Shopify Contact Form
Having a price-on-request page for the potential customer is nice but also as the shop owner you need to know for which product the request is made. This can be achieved with the possibility to extend forms in Liquid. At the very end of the Liquid documentation about the theme tag form there is the paragraph Modifying form attributes which provides the necessary information. In the end you can just add your own attributes which is very convenient. Here we add two attributes, reason for contact and link to the product in focus:
The values for these attributes are then set with a little javascript, the template strings in ${…} are filled in again from the retrieved json data.
A submitted request (Absenden) results now in a email message where these attributes show up:
At the moment it is not possible yet to modify the subject line of the email message which would simplify to automate the handling of emails. It took us a while to accept this.
Summary
Looking back it was not difficult to create a product specific contact form.
We hope that the information is helpful for someone. You can find the file page.pricerequest.liquid here.