Get single product data with variant and custom fields in custom html format like below

Technical Q&A
1

this is schema for select the single product

{% schema %}
{
“name”: “UK Single Product”,
“settings”: [
{
“type”: “product”,
“id”: “single_product”,
“label”: “Select Product”
}
],
“presets”: [
{
“category”: “Home Page”,
“name”:“Universal Single Product”
}
]
}
{% endschema %}

i need all the data is including all variants in data attributes can any one guide me how can get only change the variants and images

this main data of the product

<div data-prod-name="T-shirt"

data-collection-name=‘shirts’

data-tags=''v shape"

class=“product-card”

all color variants of the products like red green blue etc

<span
data-name=“red”
data-left-image-1=“https://cdn.shopify.com/s/files/1/0566/3979/files/red-left-1_x1050_crop_center@2x.jpg”
data-left-image-2=“https://cdn.shopify.com/s/files/1/0566/3979/files/red-left-2_x1050_crop_center@2x.jpg”
data-right-image-1=“https://cdn.shopify.com/s/files/1/0566/3979/files/red-right-1_x1050_crop_center@2x.png”
data-right-image-2=“https://cdn.shopify.com/s/files/1/0566/3979/files/red-right-1_x1050_crop_center@2x.png”
style=“background-color:red”
class=“”

<span
data-name=“green”
data-left-image-1=“https://cdn.shopify.com/s/files/1/0566/3979/files/red-left-1_x1050_crop_center@2x.jpg”
data-left-image-2=“https://cdn.shopify.com/s/files/1/0566/3979/files/red-left-2_x1050_crop_center@2x.jpg”
data-right-image-1=“https://cdn.shopify.com/s/files/1/0566/3979/files/red-right-1_x1050_crop_center@2x.png”
data-right-image-2=“https://cdn.shopify.com/s/files/1/0566/3979/files/red-right-1_x1050_crop_center@2x.png”
style=“background-color:green”
class=“”