How to edit Fomo CSS on Magento
If you need to add custom styles to the Fomo notifications on your Magento store, there are two options.
Option 1 - Add CSS inside the Fomo Dashboard
While logged into Fomo, select your Fomo Site ("Art Shop" in the example below) from the top left dropdown, then visit the "Theme" tab:
![](http://d33v4339jhl8k0.cloudfront.net/docs/assets/6630e7894c3ddc1d4e7a2400/images/66509e0e5173914f806c0e1d/css.png)
Click the CSS tab. Here, you can add custom CSS:
![](http://d33v4339jhl8k0.cloudfront.net/docs/assets/6630e7894c3ddc1d4e7a2400/images/66509e0ed593d719515c9a3d/custom-css-overrides-fomo.png)
Option 2 - Add CSS inside your Magento Store
By default, many Magento stores require an FTP upload process to edit stylesheets and other theme assets.
However, there is an easy workaround that simply requires pasting a bit of code into your Magento store footer.
While logged into your Magento admin portal, navigate to CMS > Static Blocks.
![](http://d33v4339jhl8k0.cloudfront.net/docs/assets/6630e7894c3ddc1d4e7a2400/images/66509e0e1f3fa9421e28719d/a8wm9mzi3yav15wcanjhdow664yidzncq3im2jc0jut24sle82_3F1494602231.png)
Find your footer, or another section that is on every page of your website.
![](http://d33v4339jhl8k0.cloudfront.net/docs/assets/6630e7894c3ddc1d4e7a2400/images/66509e0fdd0f8c60bb3fc384/8x75jrkl5rz38ocunqfv9w4staqlwh412fj55h201hm5efmk32_3F1494602276.png)
Click the file name to open it, then click the small 'HTML' button in the right text editor.
![](http://d33v4339jhl8k0.cloudfront.net/docs/assets/6630e7894c3ddc1d4e7a2400/images/66509e0fd593d719515c9a3e/595o03mzhlfrghgc592otg8h6bj00izy36q1t756pqm7kdl2lf_3F1494602312.png)
Finally, paste this snippet so that the top of your page HTML looks like this:
![](http://d33v4339jhl8k0.cloudfront.net/docs/assets/6630e7894c3ddc1d4e7a2400/images/66509e0fdd0f8c60bb3fc385/6irgju5y3pt1xhbn3v7otaxzrjdui31rllfr6nnuzoqk4d4ffq_3F1494602562.png)
Now you can add any CSS edits you want.
For example, if you have another widget that shows up above Fomo, you could paste this into the HTML editor of your footer static block:
![](http://d33v4339jhl8k0.cloudfront.net/docs/assets/6630e7894c3ddc1d4e7a2400/images/66509e101f3fa9421e28719e/Screen_Shot_2018-01-19_at_3.59.28_PM.png)
See more common CSS overrides here.
If you need more help, let us know and we're happy to take a look.