If you have enabled your post-purchase pages to be app block compatible, Custom CSS styling is not supported for the survey widget on the thank you and order status pages.
Whilst it used to be possible to customise the Grapevine Surveys widget on legacy post-purchase pages, app blocks on Shopify's post-purchase pages now inherit the styling of your checkout. This means that the survey block's colours, including its buttons, are controlled by your store's checkout branding settings rather than by the app.
Changing the colour of the survey buttons
To change the button colours used by the survey app block, update your checkout's branding within the Shopify Admin:
From your Shopify admin, go to Settings > Checkout.
Next to your active checkout configuration, click Customize.
In the checkout and accounts editor, click the Settings (cog) icon from the top-left of the page.
Scroll down to the Accents and buttons section.
Adjust your Button colour.
Click Save.
Checkout and accounts editor: Accent and buttons settings
Please note:
These settings apply to your whole checkout, not just the survey block. Any changes will also affect Shopify's own checkout buttons and the blocks of any other apps on your post-purchase pages.
The default styling of the survey app block on these post purchase pages contributes towards a high response rate due to how well it sits with the rest of the post-purchase page.
We believe that this is down to the survey app block blending in well with the overall style of the checkout and appearing to be an integral part of the page, therefore encouraging customers to answer the survey.
Need any help?
If you have any questions about the content of this article or any other Grapevine Surveys related question, then please do just get in touch.