If you'd like to customize Givy components in more detail than our Storefront Assets pages allow, then you'll need to add custom CSS in the Givy app.
To find this section, open the Storefront Assets page, then click on the Custom CSS tab.
There are four areas where custom CSS can be added:
Gifting Modal - the popup that appears when customers choose to send something as a gift
Custom Amount Modal - the popup that appears when a customers selects a custom gift card amount
Redemption Page - the page where recipients go to claim their gift card or gift
Balance Page - the page where customers can check the balance of their existing gift card
While outside the scope of this article, you can inspect the page or component you wish to edit, and look for components which contain classes starting with g- to find class names that can be modified.
It's important to only style classes starting with g- to ensure that the styling won't change in the future
In this example, we can see that the middle section of the gifting modal has a class name of g-modal__body-section. To change the styling of this area, we'll add a new style to the Gifting Modal section:
.g-modal__body-section {
background-color: grey;
}Class names should always begin with a period (.)
As you can see, this resulted in the modal having a grey background.
If you're unfamiliar with how to style certain components, the web has hundreds of good tutorials on creating CSS styles.