Black Friday Mega sale!!!! Get 40% Off on all J2Store PRO plans Buy Now No Coupon code required

J2Store

How to handle product layout in J2Store easily

Layout design plays a vital role in exhibiting the product in an online store. Customers look for the products in an online store they have in mind with eagle's eye and only if they are satisfied, they tend to add the product to the cart and then proceed to checkout. All of this execution mainly depends on how the product is being displayed in the store.

It requires valuable time and effort to display effectively the product in the store. This article discusses about the simple procedures with which one can fine tune the product display without much effort.

Content Plugin for J2Store

To start with, go to Extensions – Plugin Manager. In this section there are three tabs, of which two tabs, namely, Category View and Item View which has the options that need to be set according to the layout preferences of the user. Let us explore one by one.

Category View

The options available in this tab are explained here under:

Product Options Display Type

In this option, there are two items listed in the drop down menu to choose from.

  • Display the options and cart – This option upon selection, displays all the available options and the Add to Cart button. This is suitable for products with minimum options, which will not mess up the display layout.

  • Do not display. Show choose option button and take the customer to detail view – This option shows only a button with label Choose Options. Also, when the button is clicked, the product detail view is displayed with all the available options. This option is suitable for a product with too many options.

Product block position

In this option, there are three items listed in the drop down list. They are as follows:

  • Top – The cart will be displayed along with price in the top and the content of the article, i.e., both the short and long descriptions, will be displayed at the bottom.

  • Bottom – The content will be placed in the top over the price and cart button.

  • AfterDisplayContent – This is an event which will be triggered to display the cart after all of the content is displayed.

Display Image

This option facilitates to display the product image in the category view if it is set to Yes.

Image Type

This option enables the user to select the type of the image such as Thumbnail, Main image or Additional image.

Link image to product

If this option is set to Yes, then the image will be linked to the product details and once the image is clicked, the product details will be displayed.

Enable zoom effect

This option will facilitate the zooming effect on the product when the mouse is hovered over it.

Image width & Additional Image width

This is fairly self-explanatory. Setting the width of images.

Item View

The options in the Item View tab are explained in the following text:

Product block postion

In this option, there are three items listed in the drop-down list. They are as follows:

  • Top – The cart will be displayed along with price in the top and the content of the article, i.e., both the short and long descriptions, will be displayed at the bottom.

  • Bottom – The content will be placed in the top over the price and cart button.

  • AfterDisplayContent – This is an event which will be triggered to display the cart after all of the content is displayed.

Display Image

This option facilitates to display the product image in the item view if it is set to Yes.

Image block position

This option has three values to choose one. They are:

  • On top of product block – The image of the product will be displayed in the top position of the product block and the cart will be displayed under the product.

  • Attach to Before Content Plugin event – If this option is selected, first the image will be displayed and then the content of the product will be displayed. Cart will be placed according to a selection of product block position, either at the top or at the bottom.

  • Attach to After Content Plugin event – This option will let the image to be placed after the content and the cart. Again, the cart position will depend upon the selection of product block position.

Image type

This option is used to select the type of the image for the product, i.e., Main image or Both Main and additional images

Enable zoom effect

This option will facilitate the zooming effect on the product when the mouse is hovered over it.

Main Image width

This option sets the width for the main image of the product.

Additional image width

This option sets the width for the additional images that support the product.

These are the options in the content plugin that enable the user to handle the product layout easily without much effort and additional plugins or add-ons for the purpose. The user can change the product layout according to his / her desires without any additional plugins or add-ons.

Subscribe to get updates from us