商品推荐

真实模板变体

Schema

{
  "name": "商品推荐",
  "tag": "section",
  "class": "product-promo-cards-section",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Section heading"
    },
    {
      "type": "color",
      "id": "heading_color",
      "label": "Heading color",
      "default": "#151515"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Background color",
      "default": "#f5f5f5"
    },
    {
      "type": "range",
      "id": "default_visible_count",
      "min": 1,
      "max": 8,
      "step": 1,
      "label": "Cards visible by default",
      "default": 2
    },
    {
      "type": "range",
      "id": "card_gap",
      "min": 0,
      "max": 60,
      "step": 2,
      "unit": "px",
      "label": "Gap between cards",
      "default": 16
    },
    {
      "type": "range",
      "id": "card_radius",
      "min": 0,
      "max": 40,
      "step": 2,
      "unit": "px",
      "label": "Card corner radius",
      "default": 12
    },
    {
      "type": "header",
      "content": "Show More button"
    },
    {
      "type": "text",
      "id": "show_more_text",
      "label": "Show more text",
      "default": "Show More"
    },
    {
      "type": "text",
      "id": "show_less_text",
      "label": "Show less text",
      "default": "Show Less"
    },
    {
      "type": "color",
      "id": "show_more_color",
      "label": "Show more text color",
      "default": "#151515"
    },
    {
      "type": "header",
      "content": "Layout"
    },
    {
      "type": "range",
      "id": "max_width",
      "min": 800,
      "max": 1600,
      "step": 10,
      "unit": "px",
      "label": "Max width",
      "default": 1000
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 200,
      "step": 4,
      "unit": "px",
      "label": "Padding top",
      "default": 40
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 200,
      "step": 4,
      "unit": "px",
      "label": "Padding bottom",
      "default": 40
    }
  ],
  "blocks": [
    {
      "type": "card",
      "name": "Card",
      "settings": [
        {
          "type": "image_picker",
          "id": "image_desktop",
          "label": "Desktop image"
        },
        {
          "type": "image_picker",
          "id": "image_mobile",
          "label": "Mobile image"
        },
        {
          "type": "range",
          "id": "desktop_height_percent",
          "min": 25,
          "max": 90,
          "step": 1,
          "unit": "%",
          "label": "Desktop height (% of width)",
          "default": 42
        },
        {
          "type": "range",
          "id": "mobile_height_percent",
          "min": 60,
          "max": 160,
          "step": 1,
          "unit": "%",
          "label": "Mobile height (% of width)",
          "default": 105
        },
        {
          "type": "header",
          "content": "Badge"
        },
        {
          "type": "text",
          "id": "badge",
          "label": "Badge text"
        },
        {
          "type": "color",
          "id": "badge_color",
          "label": "Badge background",
          "default": "#1877f2"
        },
        {
          "type": "color",
          "id": "badge_text_color",
          "label": "Badge text color",
          "default": "#ffffff"
        },
        {
          "type": "header",
          "content": "Content"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Title",
          "default": "Laifen SE 2"
        },
        {
          "type": "text",
          "id": "subtitle",
          "label": "Subtitle",
          "default": "The Complete Package for Styling"
        },
        {
          "type": "color",
          "id": "text_color",
          "label": "Text color",
          "default": "#151515"
        },
        {
          "type": "header",
          "content": "Button"
        },
        {
          "type": "text",
          "id": "btn_text",
          "label": "Button text",
          "default": "Shop Now"
        },
        {
          "type": "url",
          "id": "link",
          "label": "Card / button link"
        },
        {
          "type": "color",
          "id": "btn_background",
          "label": "Button background",
          "default": "#000000"
        },
        {
          "type": "color",
          "id": "btn_color",
          "label": "Button text color",
          "default": "#ffffff"
        },
        {
          "type": "header",
          "content": "移动端颜色 (Mobile colors)",
          "info": "移动端单独的颜色设置，留空时与上方桌面端保持一致。"
        },
        {
          "type": "color",
          "id": "badge_color_mobile",
          "label": "Badge background (mobile)"
        },
        {
          "type": "color",
          "id": "badge_text_color_mobile",
          "label": "Badge text color (mobile)"
        },
        {
          "type": "color",
          "id": "text_color_mobile",
          "label": "Text color (mobile)"
        },
        {
          "type": "color",
          "id": "btn_background_mobile",
          "label": "Button background (mobile)"
        },
        {
          "type": "color",
          "id": "btn_color_mobile",
          "label": "Button text color (mobile)"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "商品推荐",
      "blocks": [
        {
          "type": "card",
          "settings": {
            "title": "Laifen SE 2",
            "subtitle": "The Complete Package for Styling",
            "text_color": "#151515",
            "btn_background": "#000000",
            "btn_color": "#ffffff"
          }
        },
        {
          "type": "card",
          "settings": {
            "title": "Laifen Wave pro",
            "subtitle": "Professional-level dental cleaning",
            "text_color": "#ffffff",
            "btn_background": "#ffffff",
            "btn_color": "#000000"
          }
        }
      ]
    }
  ]
}