Share buttons add a row of buttons to your quiz so customers can send it to a friend on Facebook, X, WhatsApp or Pinterest, by email, or by copying the link. You can show them on the Welcome page, the Results page, or both.
They're off until you turn them on, and each page has its own settings, so you can show different buttons or a different heading on each one.
Turn on share buttons on the Welcome page
Open your quiz in the Quiz Builder and select Welcome Page in the left sidebar.
In the settings on the right, open Share Buttons.
Tick Show share buttons on the Welcome page.
Choose the buttons you want and, if you like, add a heading, a message and a link (each one is explained below).
Publish your quiz. Like every change in the Quiz Builder, the buttons only show to customers once the quiz is published. See How do I publish and test quizzes.
The buttons sit under the Start button and line up the same way it does. To center them, open Button Design on the Welcome page and pick the middle alignment option. This moves the Start button and the share buttons together. To center only the share buttons, use the CSS example further down.
Turn on share buttons on the Results page
In the Quiz Builder, select Results Page in the left sidebar.
In the settings on the right, open Share Buttons.
Tick Show share buttons on the Results page.
Choose the buttons and, if you like, add a heading, a message and a link.
Publish your quiz.
By default the buttons appear at the bottom of the Results page, centered, under your recommendations.
To put them somewhere else, use Page Layout, the first section in the Results page settings. It lists every part of the Results page in the order customers see it, and you can drag Share buttons to any place in that list, for example above your recommendations. Learn more about the Results page in Set-up your Results Page.
The settings
The Welcome page and the Results page have the same settings, and you fill them in separately for each page.
Buttons
Tick the buttons you want to show. They always appear in this order:
Facebook opens Facebook's share window with the link to your quiz. Facebook only accepts the link, so your message isn't added there.
X opens a new post with your message and the link.
WhatsApp opens WhatsApp with your message and the link, in the app on a phone or in WhatsApp Web on a computer.
Pinterest opens Pinterest's Pin creator with the link and your message as the description.
Email opens the customer's email app with a new email. The subject is your quiz's title and the email holds your message and the link.
Copy link copies the link, and the customer sees Link copied under the buttons.
Share menu opens the phone's own share menu, which lists the apps installed on it, such as Instagram, Messenger and Messages. It only shows on devices whose browser has a share menu, which is most phones and some computers.
Heading
An optional line above the buttons, for example Share this quiz with a friend. Leave it empty to show the buttons on their own.
Message
An optional text placed before the link on X, WhatsApp, Pinterest, Email and the Share menu, for example I just found my perfect crochet pattern, take the quiz:. Leave it empty to share the link on its own.
Link to share
Leave this empty to share your quiz's own page, the standalone link from the Publish page (see Display your quiz with the STANDALONE link). That link works wherever the quiz is shown, including popup quizzes, where the page under the popup wouldn't open the quiz by itself.
When someone posts that link on Facebook, WhatsApp or X, the preview card shows the Meta title, Meta description and Meta image you set under Settings → SEO & sharing. See the SEO Settings section of Settings.
To share a different page instead, for example the page of your store where the quiz is embedded, type its full address, starting with https://.
What about Instagram?
Instagram doesn't let websites share a link to it, so there's no Instagram button. Customers on a phone can tap the Share menu button and pick Instagram there to send the quiz in a message or add it to a Story.
Change the button labels
Customers see the name of each button when they hover over it, and screen readers read it aloud. The labels Copy link, Link copied, Email and Share are part of your quiz's text, are already translated into every quiz language, and can be reworded under Quiz text. See Change the language or the wording of your quiz. The heading and the message are your own text, so write them in your quiz's language.
Customize the buttons with CSS
You can change the size, color, shape and alignment of the buttons with custom CSS. Open Theme settings in the left sidebar of the Quiz Builder and click Edit Custom CSS, then paste any of the examples below and click Save Changes. Learn more in How to add custom CSS to your quiz.
Custom CSS shows in the live quiz and the quiz preview. Publish the quiz to make it live.
CSS classes
.share-buttons (the whole block: heading, buttons and the Link copied message)
.welcome-share (the same block, on the Welcome page only)
.results-share (the same block, on the Results page only)
.share-buttons-heading (the heading above the buttons)
.share-buttons-list (the row of buttons)
.share-button (every button)
.share-button-facebook, .share-button-x, .share-button-whatsapp, .share-button-pinterest, .share-button-email, .share-button-copy and .share-button-share (one button each)
.share-buttons-copied (the Link copied message)
Center the buttons on the Welcome page only
This centers the share buttons without moving the Start button.
.welcome-share {
align-items: center;
text-align: center;
}
Make the buttons bigger
The buttons are 44px wide with 20px icons and 12px between them by default.
.share-button {
width: 52px;
height: 52px;
}
.share-button svg {
width: 24px;
height: 24px;
}
.share-buttons-list {
gap: 16px;
}
Change the color
The icons and the circles use your quiz's text color. One color changes both.
.share-button {
color: #d9848f;
}
Give each button its brand color
Fill a button with a background color and make its icon white.
.share-button-facebook {
background: #1877f2;
border-color: #1877f2;
color: #fff;
}
.share-button-x {
background: #000;
border-color: #000;
color: #fff;
}
.share-button-whatsapp {
background: #25d366;
border-color: #25d366;
color: #fff;
}
.share-button-email {
background: #6b7280;
border-color: #6b7280;
color: #fff;
}
.share-button-copy {
background: #d9848f;
border-color: #d9848f;
color: #fff;
}
Use square buttons
.share-button {
border-radius: 8px;
}
Show the icons without a circle
.share-button {
border: none;
width: 32px;
}
Style the heading
.share-buttons-heading {
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
}
Use your own icon
Hide the built-in icon and show your own image in its place. Upload the image to your Shopify files and use its link:
.share-button-facebook svg {
display: none;
}
.share-button-facebook {
background: url("https://cdn.shopify.com/s/files/your-icon.png") center / 24px no-repeat;
}
Change the space above the buttons
The space between the share buttons and what's above them is set by the quiz, so a CSS rule needs !important to change it:
.welcome-share {
margin-top: 8px !important;
}
For more tutorials and support, visit our website or contact our support team.