Articles on: Custom CSS & code changes

How to add custom CSS?

This doc is a guide on how to add the custom CSS to a Monk widget on your store. Please refer to the below mentioned steps-


Here's a quick video tutorial on adding custom CSS- https://www.loom.com/share/21881cf4e0c449809f51d6596d58492d


  • Step 1: Go to Online Store --> Themes --> Click on Customize next to the theme that you want to make the changes to



  • Step 2: Click on theme settings that's on the left hand side of your screen



  • Step 3: Scroll down to find 'Custom CSS' and then copy paste the code in the box provided



Almost all latest themes should have this option. If not, you will have to make the change by editing the theme code itself


Conventions:

  • All the Monk CSS classes will have a prefix of mr


<!-- sample monk element -->
<div class="mr-button"></button>


  • Always use class or id selector to apply custom CSS. Don’t use :first-child, :last-child, element selectors (span div) or any other selectors.


  • Each funnel & it's design template is made up of well defined class names for each element (with mr- prefix) and also some auto generated names. Please use the class names with mr prefix for applying CSS.


  • Every widget has a div with a unique id. If a style has to be applied only specific to a particular widget then this id can be used.


What happens if you don’t follow the correct convention to write CSS? We keep improving the app by adding more features and fixing bugs. This means that the order of the elements might change, so it is possible that the first child is a different element from the one on which the style should be applied. However, the class names would never change. Thus to ensure that the correct CSS styles are applied even after structural changes please ensure that you use the correct convention and class names.


If you have any other questions or queries please reach out to us via chat support or write to us at support@monkcommerce.com


Updated on: 29/07/2024