Shop the look

真实模板变体

Schema

{
  "name": "Shop the look",
  "settings": [
    {
      "type": "paragraph",
      "content": "Learn more about how to set up the [shop the look section](https://documentation.fuelthemes.net/kb/how-to-set-up-shop-the-look-section-in-reformation/)"
    },
    {
      "type": "image_picker",
      "id": "image",
      "label": "Image",
      "info": "1680 x 700 px .jpg recommended."
    },
    {
      "type": "image_picker",
      "id": "image_mobile",
      "label": "Mobile image",
      "info": "750 x 800 px .jpg recommended. Default image is used if none is selected. To position the hotspots precisely, switch to mobile mode."
    },
    {
      "type": "select",
      "id": "section_width",
      "options": [
        {
          "value": "grid",
          "label": "Grid"
        },
        {
          "value": "full-width-row",
          "label": "Full width"
        },
        {
          "value": "full-width-row-full",
          "label": "Full width, no spacing"
        }
      ],
      "default": "grid",
      "label": "Section width"
    },
    {
      "type": "header",
      "content": "Spacing"
    },
    {
      "type": "checkbox",
      "id": "disable_top_spacing",
      "default": false,
      "label": "Remove top spacing"
    },
    {
      "type": "checkbox",
      "id": "disable_bottom_spacing",
      "default": false,
      "label": "Remove bottom spacing"
    }
  ],
  "blocks": [
    {
      "type": "product",
      "name": "Product",
      "settings": [
        {
          "type": "product",
          "id": "product_handle",
          "label": "Product"
        },
        {
          "type": "header",
          "content": "Position"
        },
        {
          "type": "range",
          "id": "x_position",
          "min": 0,
          "max": 100,
          "step": 1,
          "unit": "%",
          "label": "Horizontal",
          "default": 20,
          "info": "Horizontal position of the hot spot"
        },
        {
          "type": "range",
          "id": "y_position",
          "min": 0,
          "max": 100,
          "step": 1,
          "unit": "%",
          "label": "Vertical",
          "default": 20,
          "info": "Vertical position of the hot spot"
        },
        {
          "type": "header",
          "content": "Mobile position"
        },
        {
          "type": "range",
          "id": "x_position_mobile",
          "min": 0,
          "max": 100,
          "step": 1,
          "unit": "%",
          "label": "Horizontal",
          "default": 20,
          "info": "Horizontal position of the hot spot on mobile screens"
        },
        {
          "type": "range",
          "id": "y_position_mobile",
          "min": 0,
          "max": 100,
          "step": 1,
          "unit": "%",
          "label": "Vertical",
          "default": 20,
          "info": "Vertical position of the hot spot on mobile screens"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Shop the look",
      "blocks": [
        {
          "type": "product"
        }
      ]
    }
  ]
}