How To Add Product Circle Grid – 001
Where to Set images, Title, and description
Where To Set Price And Button Link
Where To Set Theme Settings
How to Uploading & Retrieve Image URLs?
Live Demo

To integrate this Product Circle Grid – 001 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

<!-- Include the CircleStyleGrid JavaScript library -->
<script src="https://biz15.com/trialone/custom/js/circlestylegrid.js"></script>

<!-- Initialize CircleStyleGrid with custom settings and theme -->
<script>
// Create a new instance of CircleStyleGrid with custom style settings and theme
new CircleStyleGrid(
{ style: 2 }, /* Specify custom style settings in this case, using style 
1 to 3*/

// Specify custom theme settings for CircleStyleGrid
{
themeSetting: {
productBGColor: 'hsl(282, 100%, 40%)',
productsBoxBorderRadius: "20px",
priceColor: "hsl(282, 100%, 40%)",
titleTextColor: "black",
titleFontSize: "15px",
descriptionTextColor: "black",
descriptionFontSize: "12px",
buttonBGColor: "hsl(282, 100%, 40%)",
buttonHoverBGColor: "hsl(282, 100%, 20%)",
buttonBorderRadius: "20px",
}
}, // End of custom theme settings

// Array of product data objects to be displayed in the CircleStyleGrid
[
// Product 1
{
image: "https://biz15.co/uploads/block_images/29311539b2f7fcf9a1f825c472a6d100.png",
title: "Your Sponsored Name",
description: "By (brand name) | Full Rim Round Branded Latest and Stylish...",
currency: "₹",
currentPrice: 500,
originalPrice: 1000,
btnText: "Buy Now",
btnLink: "#",
},
] // End of product data array
);
</script>

The result following the completion of the steps.

Live Demo

Where to Set images, Title and description

Below code for where to set image, title and description

{
image: "yourimage.jpg",
title: "Product Name",
description: "Product Description",
}

Where To Set Price And Button

Below code for Where To Set Price And Button

{
currency: "₹",
currentPrice: 500,
originalPrice: 1000,
btnText: "Buy Now",
btnLink: "#",
}

Where To Set Theme Settings

Below code for Where To Set Theme Settings

themeSetting: {
productBGColor: 'hsl(282, 100%, 40%)',
productsBoxBorderRadius: "20px",
priceColor: "hsl(282, 100%, 40%)",
titleTextColor: "black",
titleFontSize: "15px",
descriptionTextColor: "black",
descriptionFontSize: "12px",
buttonBGColor: "hsl(282, 100%, 40%)",
buttonHoverBGColor: "hsl(282, 100%, 20%)",
buttonBorderRadius: "20px",
}

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 :