fb pixel
Skip to main content

New to DJ-Extensions?

DJ-Beorganic. Installation from scratch

What is the djbeorganic-elements-*.zip package?

It is a set of files that allows you to install a website based on the DJ-BeOrganic template from scratch or install it on an existing website

What's in the package?

package included
images.zip:   contains all the illustrations used to build our demo site
DJ-Beorganic - Settings.json: A special .json file containing all settings for Yootheme Pro along with main styles.
dj-slideshowtimeline-1.2.zip: It is a plugin developed by us that widens Yootheme with the possibility of creating a timeline - e.g. company history. The plugin comes with the template only. 
yootheme_djext.zip: This is a child template for Yootheme containing specific CSS styles, overrides, YOOtheme elements.
package included
DJ-Beorganic - Leyouts,json: A special .json file for Yootheme Builder contains the most essential views (layouts) used on our demo site
plg_yoothemedjsectiontab_1.1.zip: This is a Yootheme plugin designed by us. It allows you to display a section as a tab or accordion. It only comes with the template.

What item do you need to download separately?

DJ-Catalog2: Powerful e-commerce & directory solution for Joomla that can easily handle thousands of products. The download is available to active subscribers. Along with the template, you gain access to this add-on included.
DJ-Catalog2 Integrator: eCommerce & catalogue solution for YOOtheme PRO. The download is available to active subscribers. Along with the template, you gain access to this add-on included.
DJ-Registration: A plugin designed by us that changes the standard behaviour of the registration form, simplifying the process of registering a new user. You can activate the option of registration and subsequent login only with an e-mail and password. The download is available to active subscribers. Along with the template, you gain access to this add-on included. 
DJ-Flipbook: If you need to present your PDFs fancy and comfy way, this is a solution for you. The well-known flipbook solution is now brought back with new web technologies.
Yootheme Pro: This is a third-party extension. Download them from https://yootheme.com/page-builder


Yootheme Page Builder is required for proper system operation, which must be purchased and downloaded from https://yootheme.com/page-builder Yootheme Page Builder is a commercial component from a third party and cannot be bundled with our extensions due to proprietary rights.

Do we recommend any other components to use?

Yes. Of course, we have our favourite must-have kit from a third party. Consider installing these additional components:
Zoolander's Essential for Yootheme Pro:  https://www.zoolanders.com/essentials-for-yootheme-pro

How to install everything from scratch?

Step #1 Joomla installation

Install Joomla! 4 downloaded from https://downloads.joomla.org/. If you already have your installation working, you can skip this step.

Step #2 Initial configuration

There are some necessary settings that you should make right after installation:
1. SEO:
In the global configuration, set:
- Site Meta Description
- Content Rights
-  Search Engine Friendly URLs - set  to "Yes."
-  Use URL Rewriting - set to "Yes" (don't forget to rename htaccess.txt to .htaccess)
Go to Users / Manage and then Options
Set Allow User Registration to "YES"

3. Other settings according to your needs

Step #3 Installation and configuration of extensions

1. DJ-Catalog2 Joomla eCommerce component:
Download the latest version from https://dj-extensions.com/dj-catalog2 and install it.
Configure the component according to your needs. The documentation available here will help - https://support.dj-extensions.com/portal/en/kb/extensions/dj-catalog2
- add your categories
- add producers (if you use the list of producers in the store)
- add groups of additional fields and additional fields (necessary for filtering products and creating variants)
- add your products
- add payment methods - you can download the necessary plugins here https://dj-extensions.com/my-account/downloads/dj-cat2-payment
- add delivery methods - the necessary plugins can be found here - https://dj-extensions.com/my-account/downloads/djcat2-shipping (use the standard plugin for most deliveries)
- configure your email templates for the user
- set user fields in the registration, order page or inquiry page
- configure document headers (invoices, proforma)
- configure tax rates and tax rules
Important! Set the default country. Even if you only sell in one count
Select your country from the list and set it as the default

Add a menu item that will lead to the product list. To do this, select the menu tab on your dashboard. Select a menu - e.g. Main menu. Then create a new menu item by clicking the green button "New" Now you enter the name of the menu and select the type of menu item - DJ-Catalog / List of items (table or blog/grid)

Enable plugin User - DJ-Catalog2. It allows you to include billing data during the registration process

2. DJ-Registration: 

Download the latest version from https://dj-extensions.com/my-account/downloads/djcat2-plugins/djcat2-reg-plugin-4.0 and install and install as a standard extension. It is a simple component and plugin that makes it easy for the user to register in Joomla. It is unnecessary but makes the default registration more straightforward and more intuitive. And this in the online store is important. To do this, go to plugins, search on the list (e.g. using a search engine) and make the plugin enabled
Go to the Components / DJ-Registration tab to configure it to your needs. Then click on options and configure according to your needs.
3. Yootheme PRO:

Download from https://yootheme.com/page-builder and install like a regular extension. Remember that this is an add-on from a third party, and you need to buy a license from them. There is a wealth of documentation available for Yootheme PRO on their website - https://yootheme.com/support/yootheme-pro/joomla/introduction. You can handle this web builder.

4. Dj-Catalog2 Integrator:
DJ-Catalog2 Integrator plugin works with YOOTheme Page Builder & DJ-Catalog2 extension only! Our DJC2-YooTheme-Integration plugin provides deep integration between these two well-known solutions and will allow you to have all of YOOtheme's Page Builder features at your disposal with just a few clicks.
Download the latest version of the integrator from https://dj-extensions.com/my-account/downloads/dj-catalog2-integrator and install it as a regular extension
5. DJ-FlipBook:

We also added a great plugin that presents PDF files in the form of a FlipBook. Thanks to this, you can show the latest product catalogues, documentation, etc., in an interesting form.
You can download the add-on here https://dj-extensions.com/my-account/downloads/dj-flipbook, and the documentation is available here https://support.dj-extensions.com/portal/en/kb/articles/yootheme-pdf-dj-flipbook-element

6. DJ-SlideshowTimeline:

This plugin adds a timeline element to the Yootheme builder. The element was designed for our quickstarts and is delivered with the package. You can use it, e.g. on the on the website and show your company's history. Install dj-slideshowtimeline-1.2.zip like a standard extension, and then activate the plugin. 

This item allows you to display slideshow grouped on the timeline. You can also use dynamic content as a data source.
7. DJ-SectionsTab:

This plugin allows you to add a section as a tab or accordion. Works great for mobile devices. In our quickstart, it has just been used as a dropdown for categories and filters in a mobile view for a product list. The element was designed for our quickstarts and is delivered with the package. Install plg_yoothemedjsectiontab_1.1.zip like any extension and activate the plugin.

After installation, the plugin adds two elements to the Yootheme builder: DJ-SectionAcordeon and DJ-SectionSwitcher.

In our Quickstart, you will find an example of an accordion

The secret is that the Section ID parameter specified in the element settings corresponds to the section or row ID in the YOOtheme builder.

Step #4 Yootheme Builder Configuration

1. Images:
If you like pictures from our quickstart, extract the images.zip archive and copy everything via FTP to the images directory on your Joomla installation
2. Child Theme:
Unpack the 'yootheme_djex.zip' file and transfer the whole folder via FTP to the 'templates' folder in your Joomla! Installation. You can change the _djext in the directory name to your own. You can learn more about child themes from the Yootheme documentation https://yootheme.com/support/yootheme-pro/joomla/developers-child-themes
3. Default template:

Set Yootheme as your default template. 

Go to the System tab and select Site Template Styles from the Templates section

Then set Yootheme as the default template

4. Basic builder configuration
In your Home Dashboard, select Yootheme in the 3rd Party section
5. Base style
Set the "Fuse" theme as the base style. To do this, go to the "Styles" tab and select the "Fuse" theme
6. Recover template settings from a JSON file:
Go to "Settings" / "Advanced", then scroll the Yootheme toolbar to the bottom and select "Import Settings"
Click and select - DJ-BeOrganic - Settings.json from the disk on your computer 
After loading the settings, save them. Builder now needs to refresh its cache, close it and reopen it.
7. Child Theme:
Go to "Settings" / "Advanced" and select the child theme. Save the settings
8. Set up the menu:
Close the web builder. Make sure your default start menu leads to a single article. If not, change it to SIngle Article and attach an article (create it if necessary)
Then go to a builder, go to the "Menus" tab and set your menu to Navbar and save it.
Do the same for the "Mobile Dialog Position" item. Use the mobile preview to make sure everything is ok. If so, save it.
9. Loading layouts:
Go back to the Yootheme main menu and select the "Builder" tab. Then click the "Library" button
On the "Library" select the "My layout" tab and click the "Upload Layout" button
Then select DJ-BeOrganic - Layouts.json from your computer. After doing this, you will see a list of available layouts that we use in our demo
10. Set up pages:
Try to set up your home page now. Select a home from the menu and then go to the library in the builder. Now select the appropriate layout - "DJBeOrganic Homepage" and click.
Now you have a start page, just like in our demo.
11. Set up shop page:
If you have previously introduced products, go to the menu item for the store and configure the menu for the store; go to the menu item "Shop".
Your website is not looking excellent right now. But you can quickly correct it in the following steps.
Go to the "templates" tab in the main builder menu and click the "New Template" button. Name this template e.g. "Product List". Then click the "Save" button
Now you can create a new template by clicking the "Builder" button
As you did on the home page, go to the library and select the layout that suits this page. Try ry DJ-Beorganic - Products (Full view). 
The Layout will load, and you will see a beautifully formatted product listing page. Save it.
Then click on any product item. 
As you can see, the situation is similar. You need to create a template for the product.

Go to the "templates" tab in the main builder menu and click the "New Template" button. Name this template e.g. "Single Product Page". Then click the "Save" button 

Then go to "Single Product Page" by clicking the "Builder" button
And choose the proper layout from the library - "DJBeOrganic Products - Single product."
The product sheet is also ready and looks great

Using ready-made layouts, you will build other subpages. Of course, you can modify the views as you wish. You can create layouts on regular articles or page templates depending on the context you are in at the moment. Yootheme and DJ-Catalog2 Integrator documentation will be helpful in this.

12. Modules:
One of the most essential modules in the store is, of course, the shopping cart module. Go to the site modules in the Joomla backend and find "DJ-Catalog2 Cart Module" in the list. Then publish it to the header of the Yootheme template. Turn off the title display and set Menu Assignment to "On All Pages."


It is a good practice to have a complete quickstart copy somewhere else, allowing you to see the different settings used there.