Product · Image + Text

真实模板变体

Schema

{
  "name": "Product · Image + Text",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "text",
      "id": "section_id",
      "label": "Section ID",
      "default": "product-image-text"
    },
    {
      "type": "select",
      "id": "layout",
      "label": "Layout",
      "default": "text-left",
      "options": [
        {
          "value": "text-left",
          "label": "Text left, image right"
        },
        {
          "value": "text-right",
          "label": "Image left, text right"
        },
        {
          "value": "centered",
          "label": "Centered (heading above, image below)"
        }
      ]
    },
    {
      "type": "color_background",
      "id": "background",
      "label": "Background",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "muted_text_color",
      "label": "Muted text color",
      "default": "#3a3a3a"
    },
    {
      "type": "color",
      "id": "accent_color",
      "label": "Accent color",
      "default": "#8C6DFB"
    },
    {
      "type": "header",
      "content": "Copy"
    },
    {
      "type": "text",
      "id": "accent",
      "label": "Accent text"
    },
    {
      "type": "richtext",
      "id": "heading",
      "label": "Heading"
    },
    {
      "type": "checkbox",
      "id": "heading_asterisk",
      "label": "Add * after heading",
      "default": false
    },
    {
      "type": "richtext",
      "id": "text",
      "label": "Description"
    },
    {
      "type": "header",
      "content": "Media"
    },
    {
      "type": "select",
      "id": "image_mode",
      "label": "Image mode",
      "default": "inline",
      "options": [
        {
          "value": "inline",
          "label": "Inline (image beside copy)"
        },
        {
          "value": "background",
          "label": "Background (image fills, copy overlay)"
        }
      ]
    },
    {
      "type": "select",
      "id": "height_mode",
      "label": "Section height (background mode)",
      "default": "fixed",
      "info": "Fixed = use Min height settings below. Auto = section height follows the image (no left/right empty bars when using Contain).",
      "options": [
        {
          "value": "fixed",
          "label": "Fixed (use Min height)"
        },
        {
          "value": "auto",
          "label": "Auto (image drives height)"
        }
      ]
    },
    {
      "type": "select",
      "id": "image_fit",
      "label": "Image fit (background mode)",
      "default": "cover",
      "info": "Cover crops to fill; Contain shows the full image (may leave padding).",
      "options": [
        {
          "value": "cover",
          "label": "Cover (fill, may crop)"
        },
        {
          "value": "contain",
          "label": "Contain (show full image)"
        }
      ]
    },
    {
      "type": "color_background",
      "id": "media_background",
      "label": "Media background",
      "info": "Padding color around the image when Contain is used."
    },
    {
      "type": "image_picker",
      "id": "image_pc",
      "label": "Image (Desktop)"
    },
    {
      "type": "image_picker",
      "id": "image_mb",
      "label": "Image (Mobile)"
    },
    {
      "type": "range",
      "id": "min_height_pc",
      "label": "Min height — Desktop (px)",
      "default": 620,
      "min": 320,
      "max": 1000,
      "step": 20,
      "info": "Used only in Background mode."
    },
    {
      "type": "range",
      "id": "min_height_mb",
      "label": "Min height — Mobile (px)",
      "default": 520,
      "min": 240,
      "max": 900,
      "step": 20,
      "info": "Used only in Background mode."
    },
    {
      "type": "select",
      "id": "overlay_scrim",
      "label": "Overlay scrim",
      "default": "none",
      "info": "Optional readability overlay for Background mode.",
      "options": [
        {
          "value": "none",
          "label": "None"
        },
        {
          "value": "light",
          "label": "Light wash"
        },
        {
          "value": "dark",
          "label": "Dark wash"
        },
        {
          "value": "bottom",
          "label": "Bottom gradient"
        }
      ]
    },
    {
      "type": "header",
      "content": "Optional: Time / Metric chip"
    },
    {
      "type": "checkbox",
      "id": "show_time_chip",
      "label": "Show time chip",
      "default": false
    },
    {
      "type": "image_picker",
      "id": "chip_icon",
      "label": "Chip icon"
    },
    {
      "type": "text",
      "id": "chip_value",
      "label": "Chip value",
      "info": "e.g. ≈ 3 Mins"
    },
    {
      "type": "text",
      "id": "chip_label",
      "label": "Chip label",
      "info": "e.g. Mid-Length Hair"
    },
    {
      "type": "header",
      "content": "Optional: Footnote"
    },
    {
      "type": "checkbox",
      "id": "show_footnote",
      "label": "Show footnote",
      "default": false
    },
    {
      "type": "textarea",
      "id": "footnote",
      "label": "Footnote text"
    }
  ],
  "blocks": [],
  "presets": [
    {
      "name": "Product · Image + Text"
    }
  ]
}