Style Giftship Elements by Using CSS Overrides

If you require further customizations to how Giftship’s tools display on your storefront beyond what is available in the app dashboard, you can implement custom CSS overrides into your theme files.

Warning: Knowledge of CSS is required to carry out the steps of this article. If you are not a developer, please do not attempt to alter your theme files without consulting with an expert.

>Finding the appropriate selector.

Open your website and proceed to the page on which the Giftship element that you want to alter is rendering. For instance, if you have gift messages set to display on product pages and you wish to alter how they look, proceed to a product page.

Next, open your console by right-clicking and pressing Inspect. From here, search for the selector that you wish to edit.

>Open your theme files, and implement the style override.

Now that you know the selector that you wish to implement an override for, open your theme files in another tab by going to Online Store -> Theme -> Edit Code. From here, open your main CSS file, this can be found under Assets and will be listed as theme.css.liquid or theme.scss.liquid.

Scroll to the bottom of the file, add the selector, and then add your override with an !important declaration.

Click Save.

Your edit should now be in place. It is recommended that all changes are first made on a duplicate theme.

Can't find the answer in our documentation?
Contact Support