--- title: "Price List component" --- # Price List component ## Install the component Before installation please check that the below system requirements are met. You can ask your webhoster if the server you are working on supports them. You can also find the information in the Joomla! backend under System > System information. ## General requirements - Joomla! 4.x or 5.x or 6.x *You can still download Price List component for Joomla 3.x (this version will not have the latest features)* Support for Joomla! 3.10 ended August 2023. ## Preparations - Create a full backup of the website. You can use [Akeeba Backup](http://www.akeeba.com) to create a quick one - Upgrade to the latest version of Joomla! ## Installation (upload & install) The installation of our extensions is done with the Joomla! installer. Anyone that is already using Joomla! shouldn't have any problem, for those that are somewhat new in Joomla! we'll explain the steps required to make the installation of the extensions in your website. 1) After downloading the installation file from our website, go to your Joomla! administration and go to **System > Install > Extensions** ![install 01](https://joomill-templates.com/images/documentation/general/install-01.jpg) 2) Then select the file in the tab **Upload Package File**, after a few moments you'll get a message saying the extension is installed. ![install 02](https://joomill-templates.com/images/documentation/general/install-02.jpg) Now you're ready to start using our extension! ## Installation (Install from web) 1) Go to your Joomla! administration and go to **System > Install > Extensions**and select the**Install from Web**tab Search for **Joomill** to find my extensions  ![install from web](https://joomill-templates.com/images/documentation/general/install-from-web.png)   [Lees meer...](https://joomill-templates.com/price-list-component/install-the-component.md) ## Upgrade from J3 to J4 Unfortunately there is no way to automatically upgrade from Joomla 3 to Joomla 4. This is because a lot of changes are made. For example the static extra and price fields are now Joomla custom fields, we implement the Joomla native categories structure, Joomla's multilingual system, frontend editing and a lot more. When you upgrade: 1. You first need to Uninstall Price List version 3.x component and plugins. 2. Then upgrade your website to Joomla 4. 3. When the upgrade is ready you can Install Price List component version 4.x 4. Add your categories and items and choose your settings. [Lees meer...](https://joomill-templates.com/price-list-component/upgrade-from-j3-to-j4.md) ## Download Key **A Download Key** is only needed in the PRO version. Unlock this and other features by upgrading to **Joomill Price List PRO** [Go PRO](https://joomill-templates.com/subscribe/order/product/price-list-pro) When you install the PRO VERSION you will see a download key is missing message in the Joomla dashboard. ![download key 01](https://joomill-templates.com/images/documentation/general/download-key-01.jpg) You need to use this Download Key to enable automatic updating of our extensions. Our system checks if you use a valid Download Key and if you have an active subscription. You can find your personal Download Key on our website:  [https://www.joomill-extensions.com/account/downloadkey](https://joomill-templates.com/account/downloadkey) ![download key 03](https://joomill-templates.com/images/documentation/general/download-key-03.jpg) Copy the Download Key and paste it in the Edit Update Site screen. ![download key 02](https://joomill-templates.com/images/documentation/general/download-key-02.jpg) After you are done, press the Save and Close button. [Lees meer...](https://joomill-templates.com/price-list-component/download-key.md) ## Heading options | | | | --- | --- | | Show Table Heading | Select Yes or No to Show or Hide the Heading-bar on top of the Price List. | | Show Heading on mobile | Select *Yes*or *No*to Show or Hide the Heading titles on the left of the Price List on mobile devices. | | Background Color | Use this color picker to select the background color of the Heading-bar. This color picker has 2 bars on the right side. The first one is to select the color, the second to select the opacity. | | Font Color | Use this color picker to select the color of the fonts. | | Font Size | Set the font-size you would like to use in the Heading-bar. You can set this in pixels, rem or em values. | | Font Weight | Set the font-weight you would like to use in the Heading-bar. | ![pricelist display options](https://joomill-templates.com/images/documentation/pricelist/pricelist-display-options.png) In the Frontend it looks like: ![pricelist display options frontend](https://joomill-templates.com/images/documentation/pricelist/pricelist-display-options-frontend.png)   [Lees meer...](https://joomill-templates.com/price-list-component/heading-options.md) ## Featured Items **Featured Items** is only available in the PRO version. Unlock this and other features by upgrading to **Joomill Price List PRO** [Go PRO](https://joomill-templates.com/subscribe/order/product/price-list-pro) This is used for all items with the Featured status. This way you can create a different styling for these items to make it stand out. | | | | --- | --- | | Background Color | Use this color picker to select the background color of the Featured Items. This color picker has 2 bars on the right side. The first one is to select the color, the second to select the opacity. | | Font Color | Use this color picker to select the color of the fonts. | | Font Size | Set the font-size you would like to use in the Featured Items. You can set this in pixels, rem or em values. | | Font Weight | Set the font-weight you would like to use in the Featured Items. | ![pricelist display options](https://joomill-templates.com/images/documentation/pricelist/pricelist-featured-options.png) In the Frontend it looks like: ![pricelist display options frontend](https://joomill-templates.com/images/documentation/pricelist/pricelist-featured-options-frontend.png)   [Lees meer...](https://joomill-templates.com/price-list-component/featured-items.md) ## Name Column options | | | | --- | --- | | Heading | Here you can set the name which will be shown in the Heading Bar. You can use something like "Name", but when you have a mulitlingual website you might use a constant like "COM_PRICELIST_PRODUCT_NAME" and create a language override for each language. | | Width | Set the width of the column. You can use pixels (px.) or a percentage (%) here | | Font Size | Set the font-size you would like to use for the items. You can set this in pixels, rem or em values. | | Font Weight | Set the font-weight you would like to use for the items. | | Text Align | Set the alignment of the text in this column. | ![pricelist display options](https://joomill-templates.com/images/documentation/pricelist/pricelist-display-options.png)   [Lees meer...](https://joomill-templates.com/price-list-component/name-column-options.md) ## Description Column options | | | | --- | --- | | Heading | Here you can set the name which will be shown in the Heading Bar. You can use something like "Description", but when you have a mulitlingual website you might use a constant like "COM_PRICELIST_PRODUCT_DESCRIPTION" and create a language override for each language. | | Show description on mobile | Because the description sometimes takes too much space on a mobile device you can disable it on small screens. By default the description is shown on mobile. | | Font Size | Set the font-size you would like to use for the items. You can set this in pixels, rem or em values. | | Font Weight | Set the font-weight you would like to use for the items. | | Text Align | Set the alignment of the text in this column. | ![pricelist display options](https://joomill-templates.com/images/documentation/pricelist/pricelist-column-description.png)   [Lees meer...](https://joomill-templates.com/price-list-component/description-column-options.md) ## Price Column options | | | | --- | --- | | Heading | Here you can set the name which will be shown in the Heading Bar. You can use something like "Price", but when you have a mulitlingual website you might use a constant like "COM_PRICELIST_PRODUCT_PRICE" and create a language override for each language. | | Price Prefix | Shows a text before the price, like a currency symbol (€) | | Price Suffix | Shows a text after the price, like "each" or a currency symbol ($) | | Font Size | Set the font-size you would like to use for the items. You can set this in pixels, rem or em values. | | Font Weight | Set the font-weight you would like to use for the items. | | Text Align | Set the alignment of the text in this column. | The price prefix and suffix fields are shown at every item without any exception, when you want to use various texts leave these fields empty and add it to the item manually in the price field. ![pricelist display options](https://joomill-templates.com/images/documentation/pricelist/pricelist-column-price.png)   [Lees meer...](https://joomill-templates.com/price-list-component/price-column-options.md) ## Custom CSS Here you can add your own styling rules. ![pricelist custom css](https://joomill-templates.com/images/documentation/pricelist/pricelist-custom-css.png) ## Some common cases: The paragraph has some white space (margin) below .pricelist p {     margin-bottom: 0px; }   Set the category image left next to the category description .pricelist .category-image {     float: left;     max-width: 200px;     margin-bottom: 20px;     margin-right: 20px; }       [Lees meer...](https://joomill-templates.com/price-list-component/custom-css.md) ## Create your first category After you installed the Price List component you will find the price list categories in **Components » Price List » Categories** There is already 1 category installed called "**Uncategorised**". You can edit this. ![pricelist category 01](https://joomill-templates.com/images/documentation/pricelist/pricelist-category-01.png) Change the Title and Alias. ![pricelist category 02](https://joomill-templates.com/images/documentation/pricelist/pricelist-category-02.png) You can also add a category-description which will be showed below the category-title. In the tab "options" you can add an category-image. ![pricelist category 03](https://joomill-templates.com/images/documentation/pricelist/pricelist-category-03.png) In the frontend of your website it will be look like this: ![pricelist category 04](https://joomill-templates.com/images/documentation/pricelist/pricelist-category-04.png) all styles like fonts and sizes are based on your installed template In the Price List options you can add Custom CSS to style it exactly the way you like. ![pricelist category 05](https://joomill-templates.com/images/documentation/pricelist/pricelist-category-05.png)   [Lees meer...](https://joomill-templates.com/price-list-component/create-your-first-category.md) ## Create your first item You can add/edit your items in Components » Price List » Items Click on the NEW button to add an item Add the name of your item, the price and the description. The alias will be automatically added when you save this page. ![pricelist item 01](https://joomill-templates.com/images/documentation/pricelist/pricelist-item-01.png) On the right side of this page you can select: - Status - Category - Featured Yes/No (PRO only) - Access Level (PRO only) - Version Note (PRO only) In the publishing tab you can add: - Start publishing (PRO only) - Finish publishing (PRO only) ![pricelist item 02](https://joomill-templates.com/images/documentation/pricelist/pricelist-item-02.png) In the frontend of the website your item will look like: ![pricelist item 03](https://joomill-templates.com/images/documentation/pricelist/pricelist-item-03.png)   [Lees meer...](https://joomill-templates.com/price-list-component/create-your-first-item.md) ## Temporary items **Temporary Items** is only available in the PRO version. Unlock this and other features by upgrading to **Joomill Price List PRO** [Go PRO](https://joomill-templates.com/subscribe/order/product/price-list-pro) In the publishing tab you can add: Start publishing and Finish publishing Here you can set the date and time when the item will start and stops publishing. ![pricelist temporary items](https://joomill-templates.com/images/documentation/pricelist/pricelist-temporary-items.png) [Lees meer...](https://joomill-templates.com/price-list-component/temporary-items.md) ## Custom Fields **Custom Fields** are only available in the PRO version. Unlock this and other features by upgrading to **Joomill Price List PRO** [Go PRO](https://joomill-templates.com/subscribe/order/product/price-list-pro) When you have installed the PRO version and you want to use Custom fields, you need to set it up. Go to **Extensions --> Price List --> Field Groups.** ## Custom Field Group First create a **Field group ​** ![pricelist customfields 01](https://joomill-templates.com/images/documentation/pricelist/pricelist-customfields-01.png) The name you give to the Field group will be shown in the item as a tab and the description will be shown as information. ## Custom Field Now we can create our field Go to **Fields** and create new one Give the field a title and select the Custom Fields type You can enter a description, select required and enter a default value if you like. On the second tab (options) you can setup besides the regular options: Field Position: Select the position of the custom field. You can select: - Before Name Column - After Name Column - Before Price Column - After Price Column ![pricelist customfields 02](https://joomill-templates.com/images/documentation/pricelist/pricelist-customfields-02.png)   Column Width: Each column need to have a width specified, this can be a value in pixels (px) or percentage (%). Column Align: Choose the alignment of the text in this column. You can choose Left, Center, Right. ![pricelist customfields 03](https://joomill-templates.com/images/documentation/pricelist/pricelist-customfields-03.png) After this steps you can save the custom field. ​ When you go to your Price List item you see the custom fields in the custom Field tab. ![pricelist customfields 04](https://joomill-templates.com/images/documentation/pricelist/pricelist-customfields-04.png) In the frontend your price list can look like this: ![pricelist customfields 05](https://joomill-templates.com/images/documentation/pricelist/pricelist-customfields-05.png)     [Lees meer...](https://joomill-templates.com/price-list-component/custom-fields.md) ## Permissions The Price List component is using the Joomla ACL structure. This means you can set permissions to every access level to view, create, edit or delete an item. These permissions can be set up in the Joomla Price List Component options and in the category and in the custom fields. ![pricelist permissions](https://joomill-templates.com/images/documentation/pricelist/pricelist-permissions.png) [Lees meer...](https://joomill-templates.com/price-list-component/permissions.md) ## Multilingual Associations Price List component works with the Multilingual Associations component in the same way as you translate Joomla articles. ![pricelist multilingual](https://joomill-templates.com/images/documentation/pricelist/pricelist-multilingual.png) [Lees meer...](https://joomill-templates.com/price-list-component/multilingual-associations.md) ## Frontend add or edit **Frontend editing** is only available in the PRO version. Unlock this and other features by upgrading to **Joomill Price List PRO** [Go PRO](https://joomill-templates.com/subscribe/order/product/price-list-pro) The buttons and screens might look different because of your template. In this example we use Yootheme PRO but it will work on other templates the same way When you have the right to add a new item to the category, you will find the "Add Item" button below the category description. When you have the right to edit an item, you will find an "Edit" button at the end of each item row. ![pricelist frontend edit 01](https://joomill-templates.com/images/documentation/pricelist/pricelist-frontend-edit-01.png) After you click on one of the buttons you see the add or edit form. ![pricelist frontend edit 02](https://joomill-templates.com/images/documentation/pricelist/pricelist-frontend-edit-02.png)     [Lees meer...](https://joomill-templates.com/price-list-component/frontend-add-or-edit.md) ## Changelog [changelog-pricelist] [Lees meer...](https://joomill-templates.com/price-list-component/changelog.md)