Section

Floating Bottom Bar

4 个模板实例，4 个 section 配置，1 类 block。

真实模板变体

page.ces-se2floating_bottom_bar_FEhegj · 2 blocks启用 page.ces-swift-2floating_bottom_bar_nUizhU · 2 blocks启用 page.ces-swift-premium-v2floating_bottom_bar_F7HdET · 2 blocks启用 page.mini-hairdryerfloating_bottom_bar_M8PeGD · 2 blocks启用

Schema

{
  "name": "Floating Bottom Bar",
  "settings": [
    {
      "type": "select",
      "id": "btn_alignment",
      "label": "Button alignment",
      "default": "right",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ]
    },
    {
      "type": "color",
      "id": "bg_color",
      "label": "Background color",
      "default": "#000000"
    },
    {
      "type": "checkbox",
      "id": "show_on_mobile",
      "label": "Show on mobile",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_on_desktop",
      "label": "Show on desktop",
      "default": true
    }
  ],
  "blocks": [
    {
      "type": "button",
      "name": "Button",
      "settings": [
        {
          "type": "text",
          "id": "btn_text",
          "label": "Button text",
          "default": "Shop Now"
        },
        {
          "type": "url",
          "id": "btn_url",
          "label": "Link"
        },
        {
          "type": "color",
          "id": "bg_color",
          "label": "Background color",
          "default": "#000000"
        },
        {
          "type": "color",
          "id": "text_color",
          "label": "Text color",
          "default": "#ffffff"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Floating Bottom Bar",
      "blocks": [
        {
          "type": "button"
        }
      ]
    }
  ]
}