It is possible to find the Catalog Module when building a page. Click on the Modules menu to find E-Commerce and then just drag the Catalog Module to your preferred position on the page. This module allows you to display your products based on the tags that you have previously defined.
1.1.1. Product Tags
By default, your Catalog will show all your products; so this is the Catalog behavior if this field is left blank. However, you can choose to show a specific group of products; to do so type in the field the tag(s) of the products you wish to display. This means that if you want specific products in your shop, you have to tag them while setting them up, and use the same tag when setting up your Catalog Module. For a more comprehensive article on how the product tags work, please click here.
A shop has 3 products tagged as following:
Product 1 - [tag1],
Product 2 - [tag1], [tag2],
Product 3 - [tag1], [tag2], [tag3]
Also, be aware that products will NOT display in the catalogue module if:
1) The product is set to "HIDDEN"
2) The product is set to "0" in quantity and the out-of-stock behaviour is selected to be hidden
3) If the tags aren't added for the several products. In cases where you want to display several products, you must make sure all products share the same tag.
1.1.2. Maximum Number of Products
In this field you can define the maximum number of products you wish the catalog to display. Write the number down on the box or use the slider to increase the number of products shown. If you make no alterations, the catalog will show as many numbers as there is on that tag; or in case you haven't selected any tags, it will show all your products.
1.2. Order of Appearance
In this section you can define the order of appearance of your products on the catalog. To move a product, simply click on it and drag it to its new position
1.3. Product Information
1.3.1. Hide Product Name
Enable this option to hide the product name underneath the picture of each product.
1.3.2. Hide Product Price
Enable this option to hide the product price, which is shown underneath the picture and/or the name of each product.
1.3.3. Hide Text on Product Image
When customizing the product, it is possible to add a text on top of the image - find more about text on product image here. Enable this option if you wish to hide the text on top of product image.
With this option you can choose either a solid color or a background image as the background of your catalog.
Here you can define the border color, width and style of the catalog.
In case you have enabled arrow navigation (see 3.5), in this section it is possible to style the arrows. You can define the arrow's background width and height as well as its color in all states - normal and hover. It is also possible to define the actual icon (arrow) size as well as its color in all states. The last styling option is the border radius where it is possible to round up the icon background.
2.4. Circle Pagina
In case you have enabled circle pagina (see 3.6), in this section it is possible to style the width and height of the dots as well as their background and border color in all states - normal, hover and active. It is also possible to define the border width and radius, which dictates how rectangular or round the icons should be.
In this section you'll be able to determine the spacing in terms of margin, which adjusts the space outside of the element, and padding, which adjusts the space inside of an element.
The settings for the Catalog work similarly to the settings of the Gallery Module.
Decide the number of columns the catalog will have. Write them down in the box or use the slider moving it to the left or right to decrease or increase the number of columns, respectively.
3.2. Amount of Products Shown
This will ultimately dictate how many products are shown, given the amount of columns. For example, if you want 12 products to be displayed and you have chosen 4 columns, the catalog will automatic design 3 rows.
3.3. Margin Between Products
Choose how big the margin between products should be. Write it down in the box or use the slider moving it to the left or right to decrease or increase the margin size, respectively.
3.4. Use Square Thumbs
If you have uploaded product images with different sizes and ratios, enabling this option the editor will automatically crop them to fill a square thumbnail in the product catalog.
3.4.1. Don't Crop Thumb Images
If you wish to make all your product images the same size without cropping or changing the ratio of the original images, you must enable this option. By enabling this option, the editor will automatically resize the images while maintaining the original ratio, containing the image within a square thumbnail.
3.5. Arrow Navigation
When this option is enabled, the navigation between products of the catalog will be done through an arrow on each side, moving the pictures on the respective direction.
3.6. Circle Pagina Navigation
When this option is enabled, the navigation will be done with circles (dots) on the bottom of the gallery.
3.7. Pause on Hover
When this option is enabled, the slides will stop automatically changing if someone is hovering their mouse over the products. Once they hover somewhere else in the page, the slides will go back to automatically changing.
3.8. Auto Change of Slides
When this option is enabled, the navigation in the catalog will be done automatically. The group of products shown will automatically change, sliding to the side and showing the next group of products.
With this option you can define the transition animation for your catalog - "slide", in which each slide moves horizontally; "slow fade", in which the slide fades for 800 milliseconds; and "fast fade", in which the slide fades for 200 milliseconds.
3.10. Transition Interval
By default the transition interval is 5000 milliseconds. Choose a smaller value if you want the transition interval to be shorter and a bigger value if you want the transition interval to be bigger.
3.11. Hover effects
When this option is enabled you get hover effects on your product images, which is an overlay that appears when you hover the image. Hover effects are a way of adding interactive design features to your website to make it more alive and interesting for your customers. To learn more about hover effects, please click here.
4. Global Styling
Along with these design options, the editor also offers you additional Global Styling options. To read more about the Catalog Global Styling click here!
We recommend you to check our practical example to fully master the product implementation process on the editor. Click here to see the practical example!