All Collections
Customize the Gifting Modal & Gift Button
Customize the Gifting Modal & Gift Button

Some easy ways to change the look and feel of the popup customers will see when choosing to give a product or gift card

Updated over a week ago

Givy does its best to inherit the styling from your theme when it comes to fonts, colors, text spacing, etc... but sometimes you may want to customize things even further. Here are the most common styling changes merchants may want to make.

Gifting Button

To customize the Send as Gift button on the product page, open the Givy app, then click on the Storefront Assets link in the navigation bar.

Next, click the Product Page tab, and you'll be presented with some styling options for the Gift Button. If you'd like to change one of the values, select the Set custom radio button, then select the color you'd like, or the number of pixels to use for the margin.

Product Price

When a custom gift card amount is selected on the gift card page, Givy will update the price displayed. Generally, this will happen successfully, but if your theme is not showing an updated price, you'll need to find the CSS selector that we can use to target the price.

*Note: we're here to help with this, please chat with us and we'll do this for you!

If you choose to do this yourself, you'll need to right-click on the price from your storefront, and click to Inspect the code. This is a bit different on every browser.

In the code, you'll likely find a number of divs, spans, and other objects surrounding the price. You may need to try a variety of selectors to find the one that works with your theme. Typically, to try a class name, you'll add a "." in front of it, and to try a div ID, you'll add a "#" in front.

In the example above, we would try options like .price-item, .price__regular, and .price__container to see which one works best. To learn more about choosing CSS selectors, check out this article.

Language Settings

Like everything in the Givy app, the gifting button's text can be updated and translated. Simply choose the language you'd like to update, change the text, and click the Save button.

Gifting Modal

The gifting modal inherits the styling from your theme by default. To change any of the default colors Givy uses on the gifting modal, redemption page, and balance lookup page, click the General tab, and select Set custom to change any of these values.

Gifting Modal Text

You can update any of the text the gifting modal uses, in any language your store supports. Simply choose the language to adjust, change one or more values, and save the new language settings.

Did this answer your question?