Step 1 Locate the Joobi module that you want to customize the look

  • From the admin panel, navigate to Joomla module manager >> [Joobi Module] e.g Product List
  • From the module edit page, specify your unique module class
  • Click save once you are done

mod-class-joomla


Step 2 Inspect store elements

  • From your storefront locate the module that you want to customize and easily spot the class you want to modify using firebug (firefox)
  • In this example I am going to add a black border in the product image

siteimage-class-front


Step 3 Add your custom styles

  • Now go to your File manager using Filezilla or any Joomla file manager
  • Navigate to the the custom.css of your default Joomla template (If you do not have custom.css you can add one)
  • Enter the joomla module class we specified in step 1 and Step 2

/templates/your_default_template/css/custom.css

customcss-file

This is how the storefront product module looks like after the change:

store-customize-black