Whilst we don't have any built-in way to display the Grapevine Survey as a pop-up/overlay on the order status page, we can offer a workaround that achieves a similar result.
By adding a small piece of javascript to your store's additional scripts area as well as a small amount of CSS in the Custom CSS area within the survey's settings, you can make your survey pop by positioning it over the top of the other information on your order status page:
Overview
This workaround will require a bit of effort, but it is a great way to highlight your survey to encourage customers to submit a response.
The pop-up can easily be closed by clicking on the outside of the survey or by submitting the survey. If closed but not submitted, the survey will then appear back in its default position within the order status page.
Steps
The following steps will detail how to simulate the Grapevine survey appearing on the Order Status Page as a pop-up/overlay survey.
1. Go to Shopify Admin > Settings > Checkout:
2. Scroll down to the Order status page section and find the Additional Scripts text input area:
3. Add the following code to that area:
<div id="modal-background"></div>
<style>
#modal-background {
display:none;
background-color: rgb(0,0,0,0.8);
width: 100%;
height: 100%;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 100;
}
#grapevine-form {
display:none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 460px;
}
@media only screen and (max-width: 768px) {
#grapevine-form {
width:95%;
}
}
</style>
<script>
(function() {
var GVSurvey = null;
var modalBackground = null;
function setupModal() {
GVSurvey = document.getElementById("grapevine-form");
if(GVSurvey)
{
modalBackground = document.getElementById("modal-background");
modalBackground.style.display = 'block';
GVSurvey.style.zIndex = '101';
GVSurvey.style.display = 'block';
modalBackground.addEventListener("click", hideModal);
}
};
function hideModal() {
modalBackground.style.display = 'none';
GVSurvey.style.position = 'unset';
GVSurvey.style.width = '100%';
GVSurvey.style.transform = 'none';
}
setTimeout(setupModal, 1500);
})();
</script>4. Save your settings:
5. Go to the Grapevine App and edit the survey that you wish to publish on the Order Status Page of your online store:
7. Scroll down within the survey editor and locate the section called Styling:
8. Add the following code to the Conditional CSS area:
#modal-background { display:none !important; }Please Note:
You may need to look at the z-index setting of the #modal-background and #grapevine-form elements if you find that other apps are also being highlighted in the modal.
You can set these values to be way higher than 10 and 11, e.g 99999998 and 99999999
Ultimately, the z-index of the #grapevine-form element needs to be 1 higher than that of the #modal-background element.
9. Styling can be added to the Custom CSS area. The example below will provide a bit more margin beneath the main survey title:
#grapevine-form h2.os-step__title {
margin-bottom: 1em;
}11. Save your changes by using the Save Survey button:
12. Test the code out by visiting an order status page of an order that hasn't already submitted the survey. Alternatively, place a test order to see it in action.
Styling the pop-up/overlay
Depending on the type of survey question being shown, you may wish to tweak some of the styling. For example, the NPS survey question when used in this simulated pop-up/overlay exercise may benefit aesthetically from the code below:
.gv-nps-option {
padding: 8px;
border-radius: 20%;
width: 36px;
}
This will reduced the default padding so that on desktop, the scale will all be displayed on one line and more rectangular in appearance:
Styling for mobile
A media query has been included within the main CSS code listed earlier in this article that will benefit the appearance of the survey on smaller devices. However, due to the many different device screen sizes, the example below may look different depending on the device being used:
Need any help?
If you would like help setting up this simulated pop-up/overlay to surveys in your store or have any other Grapevine Survey related questions, then please do just get in touch.