Product collection

Note: The following components that were in Jumpseller themes prior to version 4.11.0 as individual ones, were merged into this new one: Featured Products, Latest Products, Featured Category, Handpicked Products and Recently Viewed Products.

This component allows you to display products from several sources from your admin panel. The options to customize it are the following:

Collection

Here you need to choose the source from which products will be considered:

Featured

When choosing this, products that are marked as Featured within the store will be displayed. Next, we explain how you can feature and reorder them:

Feature your products

1. Go to Products > All products and chose a product from your store by clicking on its name and/or image.
2. Once inside the product configuration page, at the right side panel you will find the option called Featured product.
3. Click on the available checkbox and save the change.

List of featured products

1. Go to Products > All products and before list of products you will find three options. Click on the one that’s far at the right side.
2. A dropdown menu will display and select the one called Featured.
3. The page will load and filter only the products that are marked.
4. In here you can reorder them by clicking and holding the mouse in order to drag them up or down.
5. To remove a product from this list, you just need to access its settings and disable the checkbox that was explained above.

Latest

When choosing this, the most recent products that have been created and/or added will be displayed. The order in which they appear is automatic, and will be based on the order you created them within your store’s admin panel.

Category

Allows to display products from a store’s category. When choosing this, a secondary field called Category will be displayed so you can select it.

The order in which products appear will be based on what’s defined at the Properties > Default Order section within each category configuration.

Handpicked

This option allows you to display any product from your store, regardless of attributes such as its status (e.g. Featured) or the relation to any category.

It works by using secondary option called Products that will become visible, in which you can choose the ones you want to display, with a maximum limit of 24.

Recently Viewed

This option displays the most recent products that a client/user has already viewed or visited in your store. The order in which products appear will be based on that interaction.

---

Limit

This option allows you to define the amount of products to display in the component.

Note: This won’t be visible for the Handpicked option, since the limit will be based on the amount of products you decide to add.

---

Width

Allows to define the maximum width that the component will stretch to the browser window.

You can read more about how this option will affect the component on this page.

---

Display

Allows to define if the component content will be displayed within a section of type Carousel or Grid.

You can read more about the differences between these two types on this page.

---

Carousel settings

This group of options will become visible when you choose Carousel, and they will allow you to customize its behavior.

You can find the full list of options in this page.

---

Heading options

By enabling this, a Heading section will be displayed before the component’s content. You can find the list of options in this page.

Note: the Link within this section will be automatically displayed if you choose a collection of type Category, which you can override by choosing a different one.

---

Featured image

This group allows you to display an image listed and positioned as the “first item” along with the products.

If within the Collection option you choose Category, the image defined for that category will be displayed by default. If it doesn’t have one, you will have to upload one in the available fields that will become visible when enabling Show image.

Note: this option won’t be available to be used if you choose Recently viewed.

Image

If you opt to upload a custom image, a secondary option called Image (mobile) will become available to upload another image for mobile devices. If you don’t upload one, the previous one will be used on all devices.

Image content

This allows you to display content or information on top of the image. When enabling it, the following options will become available to be used:

Overlay

Allows to define the opacity (or transparency) of this element. You can read more about it on this page.

Title

Allows to define a title for the section.

Note: If you choose Category at the Collection option, the name of that category will be displayed by default, which will be overwritten by what you add in this field.

Button text

Allows to define the text that will be displayed inside the button.

Alignment

The two options available here will allow you to define the alignment of the content for both desktop and mobile devices.

Vertical position

Allows you to define the vertical position in which the content will be displayed inside the image.

Content colors

Allows to choose the Color pack that will be applied to the content, which will affect the Title, Button and the background color of the Overlay element.

---

Appearance

This group contains the following options to customize the component:

• Top margin: allows to control the upper margin of the section.
• Bottom margin: allows to control the lower margin of the section.
• Content colors: allows to choose the Color Pack for the component.

---

Animations

The Customize options allows to adjust the animations for this specific component. You can read which ones are available in this page.