Elements
Categories
Categories element allows you to display categories in different ways. This element is visible under DJ-Catalog2 Tab in elements library: Options - display type Default List Several options can be configured to display categories: show category image ...
Simple products slider
Simple products slider is an element that allows displaying products list in the yootheme's core slider element. Content This element contains following fields: image - field reserved for the product's image, video - field reserved for the product's ...
Simple products grid
Simple products grid element is an element for the products list. This element is a simplified element based on the Extended Products Grid.
Products sorting
Products sorting element is a simple ordering element for a products list This element will render ordering options based on the DJ-Catalog2 component's configuration.
Products Limiting
Products Limiting element allows creating custom limiting options. This element will limit the products in the products list view. Default options that are available are 10,25,50,100: Custom limits Navigate to the element in the YooTheme's builder: ...
Pagination
The pagination element is based on YooTheme's pagination. It is useful for products list. Settings Pagination Pagination - choose a style for pagination (previous/next or numeric), General position - choose between static, relative, or absolute, left ...
One cart button
This element renders one cart button. Please make sure that one common button for the products list is enabled in the configuration of the DJ-Catalog2
Compare products
Compare products element allows rendering compare button for products. Please make sure that compare option is enabled in the configuration of the DJ-Catalog2 component. Options Compare configuration margin top - choose an option for the top margin ...
Additional Elements for YooTheme
DJ-Catalog2-YooTheme integration plugin comes with additional elements that can be useful for building an e-commerce website. Compare products - this element renders compare button for product list, Extended products grid - this element is a grid ...
Categories dynamic content
Categories dynamic content is recommended for yootheme multiple items elements. Advanced options This dynamic content has an additional advanced option that can be set: limit by categories - select which categories should be displayed. Dynamic ...
Products - dynamic content
Products - dynamic content is recommended for yootheme multiple items elements. Advanced options This dynamic content has additional advanced options that can be set: start - set the starting point for the products list, quantity - set the number of ...
Dynamic content features
DJC2-YooTheme-Integration plugin comes with 12 different dynamic contents for yootheme builder! Dynamic content is visible under the "DJ-Catalog2" label in the "dynamic content" select field. Read more about dynamic contents that are provided by the ...
Extended Products Grid - Product content - description options
Navigate to the "Settings" tab. To change options for the 'description' attribute, click the "Description" button. You will see the following options: enable drop cap - display the first letter of the paragraph as a large initial, text style - select ...
Extended Products Grid - Product content - introdescription options
Navigate to the "Settings" tab. To change options for the 'introdescription' attribute, click the "Introdescription" button. You will see the following options: enable drop cap - display the first letter of the paragraph as a large initial, text ...
Extended Products Grid - Product content - wishlist options
Navigate to the "Settings" tab. To change options for the 'wishlist' attribute, click the "Wishlist" button. You will see the following options: margin top - set the margin top. To configure options related to positioning, check the 'click to ...
Extended Products Grid - Product content - price options
Navigate to the "Settings" tab. To change options for the 'price' attribute, click the "Price" button. You will see the following options: style - set the style for 'price' attribute, decoration - set the decoration for the 'price' attribute, font ...
Extended Products Grid - Product content - created on options
Navigate to the "Settings" tab. To change options for the 'created on' attribute, click the "created on" button. You will see the following options: style - set the style for 'created on' attribute, decoration - set the decoration for the 'created ...
Extended Products Grid - Product content - created by options
Navigate to the "Settings" tab. To change options for the 'created by' attribute, click the "created by" button. You will see the following options: style - set the style for 'created by' attribute, decoration - set the decoration for the 'created ...
Extended Products Grid - Product content - availability information
Navigate to the "Settings" tab. To change options for the 'availability information' attribute, click the "Availability information" button. You will see the following options: style - set the style for 'availability information' attribute, ...
Extended Products Grid - Product content - hits options
Navigate to the "Settings" tab. To change options for the 'hits' attribute, click the "Hits" button. You will see the following options: style - set the style for 'hits' attribute, decoration - set the decoration for the 'hits' attribute, font ...
Extended Products Grid - Product content - sku options
Navigate to the "Settings" tab. To change options for the 'sku' attribute, click the "Sku" button. You will see the following options: style - set the style for 'sku' attribute, decoration - set the decoration for the 'sku' attribute, font family - ...
Extended Products Grid - Product content - title options
Navigate to the "Settings" tab. To change options for the 'title' attribute, click the "Title" button. You will see the following options: style - set the style for 'title' attribute, link attribute - link the title to the product view if the link is ...
Extended Products Grid - Producer - button options
Navigate to the "Settings" tab. To change position and button options for the 'producer button' attribute, click the "Producer Button". You will see the following options: producer icon - select an icon for the 'producer button', icon alignment - ...
Extended Products Grid - Producer - image options
Navigate to the "Settings" tab. To change position and image options for the 'producer image' attribute, click the "Producer Image" button. You will see the following options: width - set the width for the 'producer image' attribute. Provide value in ...
Extended Products Grid - Category - button options
Navigate to the "Settings" tab. To change position and button options for the 'category button' attribute, click the "Category Button". You will see the following options: category icon - select an icon for the 'category button', icon alignment - ...
Extended Products Grid - Category - image options
Navigate to the "Settings" tab. To change position and image options for the 'category image' attribute, click the "Category Image" button. You will see the following options: width - set the width for the 'category image' attribute. Provide value in ...
Extended Products Grid - Product media - video options
Navigate to the "Settings" tab. To change position options for the 'product video' attribute, click the "Product Video" button. If the "Click to determine the position and size" option is checked, You will see the following options: position - select ...
Extended Products Grid - Product media - image options
Navigate to the "Settings" tab. To change position and image options for the 'product image' attribute, click the "Product Image" button. You will see the following options: width - set the width for the 'product image' attribute. Provide value in px ...
Extended Products Grid - Autolabels - position and dimensions options
Navigate to the "Settings" tab. To change position and dimensions options for the 'autolabels' attribute, click the "Autolabels" button. You will see the following options: margin top - change the margin for 'autolabels' attribute To change the ...
Extended Products Grid - Labels - position and dimensions options
Navigate to the "Settings" tab. To change position and dimensions options for the 'labels' attribute, click the "Labels" button. You will see the following options: margin top - change the margin for 'labels' attribute To change the position and size ...
Extended Products Grid - Other options
Navigate to the "Settings" tab. To change other grid options, click the "Other" button. You will see the following options: Position - select static, relative, or absolute position for extended products grid element, left - horizontal position of the ...
Extended Products Grid - Columns options
Navigate to the "Settings" tab. To configure the columns options, click the "Columns" button. You will see the following options: Those options allow changing a number of grid columns depending on which device the user is using.
Extended Products Grid - Grid options
Navigate to the "Settings" tab. To configure grid options, click the "Grid" button. You will see the following options: Enable masonry effect - creates a layout free of gaps if items have different heights, Parallax - moves single grid columns at ...
Extended Products Grid - Panel options
Navigate to the "Settings" tab. To configure panel options, click the "Panel" button. You can see the following options: Style - choose card style for the panel, Padding - choose padding for the content, Max width - choose the maximum width of the ...
Extended Products Grid
Extended Products Grid element is strongly recommended for building products list view. Adding Extended Products Grid element To use Extended Products Grid, navigate to your section in YooTheme Builder: Add a new element to the section. Extended ...