---
title: "Bottle"

doc_type: static
doc_category: static
doc_version: v20270301
source_url:
  html: 'https://developer.shopline.com/zh-hans-cn/docs/online-store-3-0-themes/bottle'
  md: 'https://developer.shopline.com/zh-hans-cn/docs/online-store-3-0-themes/bottle.md'
---
# Bottle

Bottle 主题是基于 SHOPLINE 自主研发的高性能模板渲染引擎 [Sline](https://developer.shopline.com/zh-hans-cn/docs/sline/sline-overview.md) 构建而成。具有以下优势：

-   凭借轻量级设计，有效减少加载耗时。
    
-   高性能运转，保障页面流畅呈现。
    
-   易扩展架构，助力主题个性化定制。
    

Bottle 主题为一款基础主题，所有 SHOPLINE Online Store 3.0 主题均基于 Bottle 主题进行二次开发，赋能主题的多样性。

<img src="https://s2cdn.myshopline.com/slfs/op-new/175194939144930/1.jpg" alt="1.jpg" />

## 主题特性{#Z1H4q}

Bottle 主题专为电商场景设计，旨在提升用户购物体验，满足多元化业务需求，并帮助商家提高转化率。其主要特性包括：

### SEO{#BK4ka}

Bottle 主题在页面布局、结构化数据等方面进行了优化，以提升搜索引擎的抓取和索引效果，帮助商家获得更多自然流量。

-   **合理的页面布局**：合理融入页面标题、正文、元标签等，提升搜索引擎相关性判断，增加自然流量，帮助商家吸引更多潜在客户。
    
-   **结构化数据支持**：主题生成符合搜索引擎偏好的结构化数据，像商品图片链接、名称、描述、价格等。以清晰格式供搜索引擎抓取，搜索结果呈现更丰富，吸引用户点击，提升搜索曝光质量与点击率。
    

### 性能{#rCluO}

Bottle 主题运用了多种优化手段，确保页面加载速度更快，提升用户体验，增加用户停留时间，提升转化率。

-   **合理的页面结构**：确保页面核心内容优先展现，减少用户等待时间，提升访问体验。
    
-   **优化图片资源载入**：通过对非视口区域图片进行懒加载、根据设备屏幕特性响应式加载最优图片尺寸等技术，减少页面加载时间。
    
-   **零第三方包引入**：减少页面加载负担，提升页面加载速度。如使用 CSS3 动画代替 JavaScript 动画，提升页面流畅度。
    

### 主题事件{#S60TY}

Bottle 主题设计了一套标准的 [主题事件](https://developer.shopline.com/zh-hans-cn/docs/online-store-3-0-themes/best-practice/theme-events.md)，你可以监听或触发这些标准事件（如商品浏览、商品 SKU 切换、商品加购、购物车打开或关闭等），用于完成自定义操作，这些事件可以帮助你实现更丰富的功能，提升用户体验。

### 目录结构{#D5cUV}

Bottle 主题的 [目录结构](https://developer.shopline.com/zh-hans-cn/docs/online-store-3-0-themes/theme-structure/overview.md) 遵循特定规范，这种规范让 [页面模板](https://developer.shopline.com/zh-hans-cn/docs/online-store-3-0-themes/theme-structure/templates.md)（templates）、[组件](https://developer.shopline.com/zh-hans-cn/docs/online-store-3-0-themes/theme-structure/sections.md)（sections）、[区块](https://developer.shopline.com/zh-hans-cn/docs/online-store-3-0-themes/theme-structure/blocks.md)（blocks） 等不同代码模块协同运作，共同为主题的呈现和功能实现发挥作用，使得主题开发更加高效和规范。

### 多层级区块{#GJN8b}

Bottle 主题支持 [多层级区块嵌套](https://developer.shopline.com/zh-hans-cn/docs/online-store-3-0-themes/theme-structure/blocks.md#wTxIJ) 设计，这种设计让你可以更灵活地控制页面的布局和功能，实现更复杂的页面效果和功能，让商家的自定义搭建变得得心应手。

* * *

## 获取 Bottle 主题源码{#iK5Qs}

你可以通过以下方式获取 Bottle 主题：

-   在 Github 上下载 [Bottle 主题源码](https://github.com/shoplineos/Bottle)。
    
-   在 [主题商城](https://themes.shopline.com/themes/Bottle/styles/Default) 中，搜索并免费使用 Bottle 主题，并在 [SHOPLINE 商家后台](https://admin.myshopline.com/) 的 **在线商店 > 店铺设计** 菜单中，下载主题源码。