Articles in this section

What is the survey landing page?

Steve Jones
  • Updated

Please Note:

This article is only relevant to Merchants who are on our GrapevineExtra plan.

If you have chosen to enable survey reminders within your shipping confirmation notification emails, the page that customers will link through to from those emails is called the Survey Landing Page.

This is a hosted proxy page that Grapevine creates within your site which has a unique URL that is associated to a specific order on your store.

When a customer lands on that page and fills in the survey, the sales revenue associated with that order will then be assigned to the survey response that they have submitted.

A preview of how the Survey Landing Page will appear to your customers can be seen at the following location on your store:
https://{{ your shopify domain }}/tools/survey/demo

This is a basic example of how theSurvey Landing Page will appear:

mceclip2.png

Changing the text on the Survey Landing Page

The text that appears on the Survey Landing Page is the same text that you have used to configure your survey question. If you would like to edit any of the text on the Survey Landing Page, then this will also affect how your survey question appears on your order status page, which is where we first present the survey question to your customers.

If you would like to amend any of the wording or options in your survey question, please read our guide on setting up your survey question.

Styling the Survey Landing Page

We have provided an area for Merchants or developers familiar with HTML and CSS to customise the look and feel of the Survey Landing Page to ensure that it is on brand. 

CSS

To override any of the default styling we have provided, go to the Survey Reminders view within the Grapevine app and select the Customise survey landing page option.

You will see that we have a CSS area where you can enter your override styling

mceclip0.png

Below are the main elements that you may wish to override with your own styles.

Grapevine wrapper element and break-points:

@media (max-width: 768px) {
 #gv_page-wrapper {
      ...
 }
}
@media (max-width: 992px) {
 #gv_page-wrapper {
     ...
 }
}
@media (min-width: 1200px) {
 #gv_page-wrapper {
     ...
 }
}
@media (max-width: 480px) {
 #gv_page-wrapper {
     ...
 }
}

Survey header:

#gv_page-wrapper h1 {
     ...
}

Survey question:

#gv_intro {
  ...
}

Survey success and error messaging:

#gv_success {
  ...
}

#gv_error {
  ...
}

 Grapevine form containing the dropdown select box:

#gv_form {
  ...
}

Grapevine select dropdown:

#gv_survey_select {
     ...
}

Grapevine form submit survey button:

#gv_submit_survey {
     ...
}

HTML

We also provide two HTML areas where you can sandwich your Grapevine survey question between additional HTML.

We inject the Grapevine survey question into a plain proxy page in your store, therefore, you may wish to add your own HTML to help you frame the survey question with any additional branding that may not exist in your theme's default page template.

What next?

If you need any help with styling your Survey Landing Page with CSS or adding any custom HTML, then please do get in touch.

Related articles