The One Click landing page is rendered within your Shopify theme, so it will automatically inherit your theme's header, footer, fonts, and base styles. The Custom CSS field allows you to go further and override or enhance the default appearance of the survey elements on this page.
CSS styles entered here will apply to the following states of the One Click survey journey:
Thank you message after a survey response is submitted
This is the confirmation message shown after a customer successfully submits their survey response and there are no further questions to answer.
Message shown when a survey has already been submitted
This is the message displayed when a customer tries to submit another response to the same survey.
Further survey questions
When there are further questions to be completed, the question and answer options can be styled by adding Custom CSS here. The Next and Submit buttons can also be styled.
Available CSS Selectors
Page layout
Selector | Description |
| The outermost container for the entire One Click survey content. Controls max-width, margin, and padding of the survey area. |
Example: Adjust the survey width and spacing
css
#gv-oneclick-wrapper {
max-width: 500px;
padding: 40px 20px;
}
Loading state
These selectors control the spinner shown while the initial One Click response is being submitted.
Selector | Description |
| The container for the loading state. Controls text alignment and padding. |
| The spinning loading indicator. Controls size, border, and animation. |
Example: Change the spinner colour to match your brand
css
.gv-oneclick-spinner {
border-color: #e0e0e0;
border-top-color: #ff6600;
}
Progress indicator
When a survey has multiple follow-up questions, a step counter is shown (e.g. "2/6").
Selector | Description |
| The progress text container (e.g. "2/6"). Controls alignment, margin, and font size. |
| The current step number. |
| The total number of steps. |
Example: Style the progress counter
css
.gv-oneclick-progress {
font-size: 0.85em;
color: #999;
text-align: right;
margin-bottom: 20px;
}
Survey steps (questions)
Each follow-up question is rendered as an individual step.
Selector | Description |
| The container that wraps all follow-up question steps. |
| An individual question step. Each step is a flex container. |
| The question text/label shown above each question's answer options. |
Example: Style question labels
css
.gv-oc-question-label {
font-size: 1.1em;
font-weight: 600;
margin-bottom: 15px;
color: #333;
}
Next / Submit buttons
Each question step has a button to advance to the next step or submit the final answer.
Selector | Description |
| The Next or Submit button on each step. Controls padding, margin, cursor, and styling. |
| The disabled state of the button (shown before a required answer is selected). |
Example: Brand the Next/Submit buttons
css
.gv-oneclick-step-button {
background-color: #ff6600;
color: #ffffff;
border: none;
border-radius: 4px;
padding: 14px 28px;
font-size: 1em;
text-transform: uppercase;
}
.gv-oneclick-step-button:disabled {
background-color: #ccc;
color: #666;
opacity: 0.6;
}
Open text questions
Selector | Description |
| The wrapper for an open text question. You can also target a specific question using its ID, e.g. |
| The textarea input element. You can also target a specific textarea using its ID, e.g. |
Example: Style the text area
css
[id^="gv-oc-textarea-"] {
border: 2px solid #ddd;
border-radius: 6px;
padding: 12px;
font-family: inherit;
font-size: 1em;
min-height: 120px;
}
[id^="gv-oc-textarea-"]:focus {
border-color: #ff6600;
outline: none;
}
CSAT (Customer Satisfaction) questions
Selector | Description |
| The wrapper for a CSAT question. You can also target a specific CSAT question using its ID in the class name, e.g. |
| The container for CSAT radio button options. |
| Each individual CSAT option label (e.g. "Very Satisfied", "Neutral"). |
| The radio button inputs within CSAT options. |
Example: Style CSAT options
css
.gv-oc-csat-options label {
padding: 10px 12px;
border: 1px solid #eee;
border-radius: 4px;
margin-bottom: 6px;
transition: background 0.2s;
}
.gv-oc-csat-options label:hover {
background-color: #f5f5f5;
}
NPS (Net Promoter Score) questions
Selector | Description |
| The wrapper for an NPS question. You can also target a specific NPS question using its ID in the class name, e.g. |
| The flex container that holds the 0–10 score options. |
| An individual NPS score box (0 through 10). |
Example: Style the NPS scale
css
.gv-oc-nps-options {
gap: 4px;
}
.gv-oc-nps-option {
border: 2px solid #ddd;
border-radius: 6px;
font-weight: 600;
transition: all 0.2s;
}
.gv-oc-nps-option:hover {
border-color: #ff6600;
background-color: #fff5ee;
}
Please note:
When a customer selects an NPS score, the selected option's background and text colour are updated dynamically via JavaScript. Your Custom CSS hover styles will still apply to the non-selected options.
Multiple choice questions
Selector | Description |
| The wrapper for a multiple choice question. |
| Each individual checkbox option label. |
| The checkbox inputs within multiple choice options. |
Example: Style multiple choice options
css
[class^="gv-oc-mc-"] label {
padding: 10px 12px;
border: 1px solid #eee;
border-radius: 4px;
margin-bottom: 6px;
display: block;
cursor: pointer;
}
Fixed response questions
Selector | Description |
| The wrapper for a fixed response question. |
| Each individual fixed response option container. |
| The radio button inputs within fixed response options. |
| Each individual fixed response option label. |
Example: Style fixed response options
css
[class^="gv-oc-top-level-"] {
padding: 10px 12px;
border: 1px solid #eee;
border-radius: 4px;
margin-bottom: 6px;
}
[class^="gv-oc-top-level-"]:hover {
background-color: #f5f5f5;
}
Thank you / confirmation message
Selector | Description |
| The container for the thank you/confirmation message. Controls text alignment and layout. |
| The thank you title heading (e.g. "Thank you!"). |
| The thank you body text (e.g. "Your response has been recorded. We appreciate your feedback."). |
Example: Style the thank you message
css
#gv-oneclick-thankyou h1 {
font-size: 2em;
color: #333;
margin-bottom: 10px;
}
#gv-oneclick-thankyou p {
font-size: 1.1em;
color: #666;
line-height: 1.6;
}
Putting it all together
Here is an example of a complete Custom CSS snippet that applies consistent branding across the entire One Click landing page:
/* Wrapper */
#gv-oneclick-wrapper {
max-width: 500px;
font-family: inherit;
}
/* Question labels */
.gv-oc-question-label {
font-weight: 600;
font-size: 1.1em;
margin-bottom: 12px;
}
/* NPS scale */
.gv-oc-nps-option {
border-radius: 6px;
font-weight: bold;
}
.gv-oc-nps-option:hover {
background-color: #f0f0f0;
}
/* Buttons */
.gv-oneclick-step-button {
background-color: #222;
color: #fff;
border: none;
border-radius: 4px;
padding: 14px 30px;
font-size: 1em;
}
.gv-oneclick-step-button:disabled {
background-color: #ccc;
}
/* Thank you message */
#gv-oneclick-thankyou h1 {
color: #222;
}
Important notes
Custom CSS entered here applies only to the One Click landing page. It will not affect your standard on-site surveys or any other pages on your storefront.
CSS should be valid and fully tested before publishing. We recommend using preview mode, by adding
&preview=1to the end of a one click survey link, to test your styling changes without recording survey responses.Styling changes may affect message visibility and layout across devices, so we recommend testing on both desktop and mobile.
Question-type selectors that include a question ID (e.g.
.gv-oc-nps-123026) allow you to target specific questions individually if needed. The attribute-based selectors (e.g.[class^="gv-oc-nps-"]) will target all questions of that type.The landing page inherits your Shopify theme's header, footer, and base styles. Your Custom CSS will take precedence over the default Grapevine Surveys styles for the survey elements.