How To Add Product Grid Style – 003
Where To Set Image
Where To Set Title, Description And Price
How To Add More Grid
Where To Set Button Link
How To Uploading & Retrieve Image URLs?
Live Demo

To integrate this Product Grid Style – 003 into your biography page, please follow these installation instructions.

Step One: Insert a Custom HTML Block.

Step two: Just Paste below JS code into your Custom HTML block

<!-- JS DATA CODE -->

 <!-- Include the external JavaScript file for StylishGrid002 -->
<script src="https://biz15.com/trialone/custom/js/stylishgrid002.js"></script>

<!-- Initialize StylishGrid002 -->
<script>
 // Create a new instance of StylishGrid002 with style, theme settings, and product data
new StylishGrid002(
{
    style: 1
},
{
     // Define theme settings for the grid
    themeSetting: {
        currency: "₹",
        productBorderRadius: "10px",
        categoryFontSize: "10px",
        categoryColor: "red",
        titleFontSize: "18px",
        titleColor: "black",
        priceFontSize: "20px",
        priceColor: "green",
        btnBgColor: 'black',
        btnTextColor: "white",
        btnBgColor_Hover: '#ff9800',
        btnTextColor_Hover: "#fff",
        btnIcon: "fa-solid fa-plus",
    }
},
 // Provide an array of product data objects
[
     // Define data for the first product
    {
        imageUrl: "https://biz15.co/uploads/block_images/247a851f686a88da30e19ed75afc7ebd.png",
        category: "Men's Shoes",
        title: "Crater Impact",
        price: "999",
        btnLink: "https://biz15.co/grid-shoes",
    },
     // Add more product entries as needed...
]);
</script>

The result following the completion of the steps.

Live Demo

Where To Set Image

Below code for Where To Set Image:

{ 
imageUrl: "yourimage.png",
}

Where To Set Title, Description And Price

Below code for Where To Set Title, Description And Price :

{
category: "Men's Shoes",
title: "Crater Impact",
price: "999", 
}

How To Add More Grid

Add additional grid as needed by placing a comma (,) at the end

Below code for How To Add More Grid :

[
 {
     //Your content for grid 1 
  },
  
  {
    // Your content for grid 2 
  }
  // Add additional grid as needed by placing a comma (,) at the end 
]

Where To Set Button Link

Below code for Where To Set Button Link :

{
btnLink: "https://example.com/,
}

To upload an image and retrieve its source (URL), please follow these steps :

Select or Prepare Your Image: Begin by choosing the image you wish to upload, ensuring it’s in an appropriate format (e.g., JPG, PNG).

Step One : on Your Dashboard Select “File Link” panel and click “File link” button on your Top Right corner

Step Two: Select your desired image and and its name then proceed by clicking the “Create File Url” button.

Step Three: Now, you can see bellow figure that highlighted the image url and just “Copy Your Image Address.”

“Follow the previously mentioned steps to upload and obtain the image URL for all of your images.”

Try Your Self

Other Style Sections :