ProductX

  1. Home
  2. Docs
  3. ProductX
  4. Default Pre-made Designs
  5. Default Design 1

Default Design 1

The ProductX Product Blocks Plugin comes with a lot of FREE readymade layouts and blocks. We will be talking about the fee basic design blocks which will help you to get started quickly.

How to Use the ProductX Default Block Design-1

Here we will talk about the First default design among a healthy list of default design blocks in the ProductX blocks arsenal.

Basic Design Settings

Basic Design Settings
Basic Design Settings

In the basic design settings, you can:

  • Choose a different layout based on your preference (Available with a Pro version).
  • You can choose and import different design blocks.
  • You can set Advanced CSS values as per your requirements.

Settings Overview

Settings Overview

With different product block layouts, you will find different design settings. To take advantage of all the features, you will need a Pro Version of ProductX.

General Design Settings

General Design Settings
General Design Settings

From the general design settings, you can:

  • Change how the Product View will look like.
  • Play with the column and row distance sliders.
  • Change the Content Layout from a Dropdown List.
  • Activate/Turn off individual features of the product block.
  • Enable the pro features/add-ons.

Product Query Settings

Product Query Settings
Product Query Settings

The Product Query Settings is one of the key features of the ProductX Blocks Plugin. With the Quick Query Feature, you can easily showcase the products you choose. Also, you can order them however you wish in relation to:

  • Product Category
  • Include/Exclude Post
  • Order Date
  • Product Offset

You can also choose the number of products you want to show from the Product Query Settings .

Wishlist Settings

Wishlist Styling
Wishlist Styling

With the Wishlist Style Settings you can show how the wishlist pop up will work. You can change the color and hover property to match your store style.

Cart Settings

Cart Settings
Cart Settings

The Cart Settings is one of the key features of the ProductX blocks plugin. Other than changing the cart text you can:

  • Play with the Border Settings.
  • Play with the Color and Padding Settings
  • Change the Hover settings (When someone hovers over the Cart Text).

Quick View Settings

Quick View Settings
Quick View Settings

The Quick View Settings is also one of the key features of the ProductX plugin. With the Quick View Settings, you can easily share the way your product looks. Here, you can change the Color and Background Settings. Also, you can choose how the Hover color looks as well as change the padding settings.

Pricing Settings

Pricing Settings
Pricing Settings

In the Pricing Settings Pane, you can play with the Color and Typography Settings. You can also change the padding as well.

Review Settings

Review Settings
Review Settings

You can showcase the Review Section of your products by changing the Fill/Empty Color as well as the Margin of the Review of the box.

Description Settings

Description Settings
Description Settings

You can choose the what the description of your products should look like by changing the Description Limit, Typography, Color and Padding Settings.

Sales Settings

Sales Settings
Sales Settings

With the Sales Settings, you can display product discounts very easily. You can change the Sales Design Text as well as the Sales Styling from the Dropdown. You can also change the Border Settings and Padding Settings to your liking.

Image Settings

Image Settings
Image Settings

You can change how the product image looks in the Image Settings Section. Here you can:

  • Choose How the Image Looks with the Item Settings and Hover Animation.
  • Change the Width and Height of the Image.
  • Set Grayscale Settings.
  • Change the Border Sizing and Box Shadow.

Heading Settings

Heading Settings
Heading Settings

You can choose how the heading looks with the Heading Settings. In the heading settings, you can:

  • Change the Heading and URL.
  • Choose the Heading Style from a Dropdown list.
  • Change the heading alignment and spacing.
  • Change the Typography and Coloring.
  • Choose to Show/Hide the Subheading.
  • Change other settings.

Title Settings

Title Settings

With the Title Settings, you can change the Tags and Color Settings. Also, you can play around with the Typography and Padding Settings.

Category Settings

Category Settings

The Category Settings helps you to showcase the diversity of your storefront to the customer. Here, you can change where to show the shop categories. You can also play with the regular Border and Padding Settings and the Typography settings.

Filter Settings

Filter Settings
Filter Settings

The Filter Settings is also one of the key features of the ProductX Plugin. With the filter settings, you can filter your products via a dropdown list to showcase them specifically. You can also use the Category Dropdown to further specify your product filtering process.

And the Active Filter Dropdown let’s you showcase the most popular or trending products in your online shop.

You can also change the Box and Padding Settings to make your design more appealing to the customers. Furthermore, you can change the Background color, typography and other design settings as well.

Pagination Settings

Pagination Settings

The ProductX blocks plugin showcases the AJAX Pagination feature, which gives the customer a seamless experience moving from one page to the other.

You can easily change the Pagination text, design and alignment in the pagination settings.

You can also change the Box and Padding Settings to make your design more appealing to the customers. Furthermore, you can change the Background color, typography, and other design settings as well.

Advanced Settings

Advanced Settings

The advanced settings tab offers an overall insight into the design of the block. You can take the whole product block and add global settings to it.

So, with the advanced settings tab, you have the option to:

  • Z-index: You can play around with the z-index settings. If you are not familiar with the z-index settings, then you can take a look at them here.  
  • Margin and padding
  • Normal and Hover settings
  • Display responsiveness settings
  • Custom CSS and Additional CSS class adding options

You will be able to do a lot more with the Pro version of our revolutionary ProductX plugin.

Check out the Basic Block Customization Settings to learn about the basics.

Was this article helpful to you? Yes 1 No