Custom Stylesheets (CSS/LESS)

While MOBI has a range of Theme & Layout templates to get you started, you may want to blend your ordering page with the rest of your website for consistency & a Custom Stylesheet will get the job done. 

Whether you utilise our design services, or whether you have a website designer or even someone who is knowledgeable with CSS (Cascading Style Sheets) - within MOBI you can add to & edit your Stylesheet. 



Editing the Website can only be done a Head Office level, not a Store level. If you need to change the website, please contact your Company Administrator or contact our Support team.


MOBI utilises the LESS framework for CSS.  You can discover more about LESS and its variables here.

Edit your Stylesheet

  1. In MOBI, from the Head Office Dashboard click on WEBSITE in the grey navigational pane
  2. In Website, locate Custom stylesheet
  3. Next to Custom stylesheet, click EDIT 
  4. This will take you to the Custom Stylesheet editor. From here, you can edit the style of your storefront's CSS
  5. To the right hand-side is a live preview so you can see any changes that are made in real-time
  6. When you have completed your changes, ensure you click SAVE (otherwise you will lose your work)
  7. If you would like to disregard any changes made, click CANCEL to return the Settings page

Pro Tip

If you need to find a specific element of your storefront to edit, you can utilise Dev Tools in Google Chrome. To access Dev Tools, open the Chrome menu at the top-right of your browser window (3 vertical ellipses) then select More Tools > Developer Tools. Then select the cursor icon or (CTRL+SHIFT+C) to inspect any element on the page.

0 out of 0 found this helpful



Article is closed for comments.