Cornerstone 是由 BigCommerce 设计的免费主题,适用于所有商店。它是完全响应式的,这意味着它会自动适应正在查看的设备(台式机、平板电脑和移动设备),并具有帮助您销售的内置功能,例如主页轮播(幻灯片)、社交媒体图标、特色/畅销/新品面板,并支持分面搜索(产品过滤)。
该主题具有简单而干净的设计,可以使用Page Builder轻松定制以匹配您的业务或品牌。
基石主题功能
Cornerstone 主题带有三种样式变体,每种变体都具有完全响应性,非常适合大型目录。该主题使用顶部导航和圆角按钮。
对于轮播幻灯片图像,我们支持JPEG、GIF和PNG文件类型,但建议对产品图像使用JPEG文件,以确保图像质量和快速加载时间之间的平衡。我们还建议使用大约1400 x 600像素或1400 x 800像素的幻灯片图像。所有幻灯片图像应具有一致的尺寸。
您可以通过调整Page Builder中的产品卡片尺寸来调整商店产品图像的大小。调整图像大小时,最好使它们保持相同的纵横比。有关更多信息,请参阅我们的商店图像故障排除和调整商店图像设置指南。
免费提供 Cornerstone 主题的更新和客户支持。但是,BigCommerce 技术支持无法直接协助编辑 HTML 或 CSS 等代码。有关更多信息,请参阅BigCommerce 设计政策。
本地化商店体验:此功能适用于我们所有支持的语言。有关默认语言存储设置的更多信息,请参阅存储配置文件设置。
发行说明
作为新/试用商店的默认主题,Cornerstone 通常是第一个支持新主题相关功能和改进的主题。
有关最新的 Cornerstone 新闻和发行说明,请参阅BigCommerce 开发人员变更日志。
全球的
背景和线条 | |
横幅背景 | 更改出现在横幅文本后面的背景颜色 |
页面背景 | 更改整个站点的背景颜色。它不会改变页眉或页脚背景的颜色 |
常见的深色背景 | 更改颜色常见叠加层,例如“添加到购物车”弹出窗口中的按钮叠加层 |
模态叠加背景 | 更改深色背景的颜色,例如当购物者将产品添加到购物车或使用快速查看时出现的块 |
警报弹出框背景颜色 | 更改弹出消息和警报的颜色 |
警报弹出文本颜色 | 更改弹出消息和警报中文本的颜色 |
水平线 | 分隔页眉、页脚和产品描述的线条颜色 |
文字和链接 | |
正文字体系列 | 用于正文的字体 |
正文字体大小 | 用于正文的字体大小 |
正文文本颜色 | 改变正文的颜色 |
正文文本悬停颜色 | 将光标悬停在文本上时会影响文本的颜色,例如徽标文本 |
辅助文本颜色 | 更改用作字幕的文本颜色,例如页脚中的链接、主页上的产品价格和类别面包屑 |
辅助文本悬停颜色 | 当光标悬停在其上时,影响文本的颜色,例如页脚中的文本 |
链接颜色 | 在网页上创建的超链接将具有此颜色 |
链接悬停颜色 | 光标悬停在链接上时显示的颜色 |
链接活动颜色 | 用户单击链接时显示的颜色。这可能会快速显示,并且在某些浏览器上可能根本不会出现。 |
标题 | |
标题字体系列 | 用于所有标题的字体 |
标题 1 | 更改大标题的大小,例如类别的标题或主页上的特色产品部分 |
标题 2 | 更改 h2 标题的大小,例如产品页面上的价格 |
标题 3 | 更改 h3 标题的大小,例如网页中的标题文本或产品描述 |
标题 4 | 更改 h4 文本的大小,例如网页中的标题文本或产品描述 |
标题 5 | 更改 h5 文本的大小,例如产品名称、顶部导航、轮播按钮文本和相关产品选项卡 |
标题 6 | 更改 h6 文本的大小,例如选项的标题 |
标题文字颜色 | 更改所有标题的文本颜色 |
加载指标 | |
页面加载栏 | 加载条的颜色 |
微调灯一半 | 微调器空白部分的颜色 |
微调器暗半 | 微调器填充部分的颜色 |
模态加载背景 | 加载叠加层的颜色 |
产品缩略图加载背景 | 缩略图背景的颜色,在加载缩略图时也会出现 |
图像加载 | |
延迟加载模式 | 控制用户在屏幕上滚动图像之前如何加载图像。如果您希望显示预览图像并在用户滚动时将其替换为质量更好的版本,请启用下面的“使用 LQIP 延迟加载”。选择下方的“已禁用”以完全关闭此功能 |
页面 | |
隐藏面包屑 | 删除产品和类别页面上的面包屑 |
隐藏页面标题 | 删除网页上的标题 |
隐藏类别页面标题 | 从类别页面中删除类别名称标题 |
隐藏博客页面标题 | 删除博客页面的标题 |
隐藏联系我们页面标题 | 删除联系我们页面的标题 |
产品 | |
显示风格 | 选择以网格或列表形式显示 |
博客 | |
图像大小 | 将其设置为针对主题进行优化或指定尺寸 |
价钱 | |
价格范围 | 显示具有变体的产品的价格范围(最低和最高) |
购买选项 | 除非购物者登录,否则隐藏价格并添加到购物车按钮 |
表单输入字段 | |
标签文本颜色 | 更改出现在文本框或产品选项选择上方的表单标签的颜色 |
字段文本颜色 | 出现在文本框或下拉菜单中的文本颜色 |
领域背景 | 出现在下拉菜单或文本框中文本后面的颜色 |
字段背景已禁用 | 不可选择时选择的颜色 |
字段边界 | 下拉菜单、文本框和矩形多选按钮周围的边框颜色 |
字段边界激活 | 单击以输入文本或进行选择时,下拉菜单、文本框和矩形多选按钮周围的边框颜色 |
标题 | |
标题背景 | 出现在徽标后面的颜色 |
标识 | |
标志位置 | 沿页眉向左、居中或向右对齐徽标。影响图像和文本徽标。 |
徽标图像大小 | 将徽标的大小调整为Original (as Uploaded)、Optimized for theme或Specify Dimensions。如果选择指定尺寸,将出现两个最大高度和宽度框,允许您输入尺寸。当您输入任一尺寸时,它会自动调整相反的尺寸以保持图像的原始纵横比。优化主题选项的大小为 250 x 100 像素。 |
标志字体大小 | 用于文本徽标的字体大小 |
标志文字颜色 | 用于文本徽标的字体颜色 |
实用导航 | |
文字颜色 | 右上角链接的颜色,包括搜索、登录和购物车 |
文字悬停颜色 | 光标悬停在右上角链接上时的颜色 |
购物车下拉背景 | 单击购物车时下拉菜单的颜色 |
购物车下拉边框 | 单击购物车时下拉菜单周围的边框颜色 |
购物车柜台背景 | 添加项目时出现在购物车链接旁边的图标的颜色 |
主导航 | |
隐藏网页链接 | 从类别导航菜单切换网页链接的可见性 |
文字颜色 | 顶部导航文字的颜色 |
文字悬停颜色 | 光标悬停在顶部导航文本上时的颜色 |
下拉菜单背景 | 类别有子类别时下拉菜单的颜色 |
下拉菜单边框 | 当类别有子类别时下拉菜单周围的边框颜色 |
下拉菜单显示方式 | 控制类别下拉显示深度。简单显示最多 3 级类别深度和交替显示最多 8 级类别深度 |
快速搜索背景 | 快速搜索区域的背景颜色(单击标题中的搜索时出现) |
社交媒体图标 | |
显示社交媒体图标 | 在标题中显示社交媒体图标 |
页脚放置 | 在页脚的左侧或右侧显示图标,或将它们一起删除 |
页脚 | |
页脚背景 | 页脚中的背景颜色 |
显示设置 | |
显示“由 BigCommerce 提供支持” | 将链接切换回 BigCommerce.com |
在页脚显示品牌 | 在页脚显示品牌链接 |
显示©、当年和商店名称 | 切换页脚中的 © 详细信息 |
付款图标 | |
美国运通、发现、万事达卡、贝宝、维萨、亚马逊支付、谷歌支付 | 启用或禁用卡和/或替代付款方式图标 |
Apple Pay 按钮颜色 | 允许您设置Apple Pay按钮的颜色样式。Apple Pay 按钮仅在某些浏览器上显示 |
主页
旋转木马 | |
显示轮播 | 打开或关闭轮播 |
显示轮播箭头 | 打开或关闭左右箭头 |
显示轮播播放/暂停按钮 | 打开或关闭播放/暂停按钮 |
允许图像在大屏幕上拉伸 | 如果查看屏幕宽于 1261 像素,则防止裁剪大型轮播图像 |
内容背景 | Carousel 上框覆盖的颜色 |
标题文本 | 轮播上大文本的颜色 |
说明文字 | Carousel 上较小文本的颜色 |
指标 | 如果有不止一张幻灯片,轮播下方空点的颜色 |
指标激活 | 如果有不止一张幻灯片,轮播下方全点的颜色 |
指标背景 | 如果有多个幻灯片,则轮播下方圆点后面的框的颜色 |
箭 | 如果有不止一张幻灯片,左右箭头的颜色 |
箭头背景 | 如果有不止一张幻灯片,箭头后面的框的颜色 |
箭头边框 | 如果有不止一张幻灯片,则箭头后面的框的边框颜色 |
播放/暂停按钮文本 | 如果有不止一张幻灯片,播放/暂停按钮文本的颜色 |
播放/暂停按钮背景 | 如果有不止一张幻灯片,则播放/暂停按钮后面的框的颜色 |
播放/暂停按钮边框 | 如果有不止一张幻灯片,则播放/暂停按钮后面的框的边框颜色 |
产品 | |
特色产品数量 | 主页上显示多少特色产品,或禁用此功能 |
最受欢迎产品数量 | 主页上显示多少最受欢迎的产品,或禁用此功能 |
新产品数量 | 主页上显示多少新产品,或禁用此功能 |
产品
产品销售徽章 | |
显示产品销售徽章 | 将销售徽章的显示样式更改为Top Left、Diagonal或Burst,或选择None以禁用销售徽章。禁用产品销售徽章将在页面构建器中隐藏下面的标签和徽章设置 |
产品销售徽章标签 | 更改销售徽章中的文本 |
产品价格标签(销售) | 更改销售价格文本 |
产品价格标签(售前) | 更改默认价格文本 |
产品价格标签(零售) | 更改零售/MSRP 价格文本 |
产品价格标签 | 当没有销售价格时更改价格标签的文本(如“最低”文本) |
徽章文字颜色 | 销售徽章上的文字颜色 |
徽章颜色 | 销售徽章的背景颜色 |
徽章悬停颜色 | 光标悬停在销售徽章上时的颜色 |
显示产品售罄徽章 | 将售罄徽章的显示样式更改为Top Left、Diagonal或Burst,或选择None以禁用售罄徽章。禁用产品售罄徽章将隐藏页面构建器中的标签和徽章设置 |
产品售罄徽章标签 | 更改售罄徽章中的文本 |
徽章文字颜色 | 售罄徽章上的文字颜色 |
徽章颜色 | 售罄徽章的背景颜色 |
徽章悬停颜色 | 光标悬停在售罄徽章上时的颜色 |
显示设置 | |
在产品卡上显示快速查看按钮 | 切换快速查看功能 |
在产品页面上显示数量选择 | 切换数量选择器 |
显示产品描述标签 | 在选项卡区域下或直接在页面上显示产品描述 |
选项卡中的产品自定义字段 | 在选项卡区域下或直接在页面上显示产品自定义字段。必须选中此选项才能在页面构建器中查看选项卡中的产品自定义字段设置 |
产品自定义字段选项卡标签 | 更改自定义字段选项卡的文本 |
显示产品重量 | 显示产品输入的运输重量 |
显示产品尺寸 | 显示产品的运输尺寸 |
显示产品样本名称 | 选择时显示样本名称 |
在过滤器中显示“按价格购物” | 按价格显示商店功能 |
显示产品评论 | 在产品页面上显示评论 |
产品页面上的评论数 | 产品描述下方显示的评论数量 |
愿望清单下拉背景 | 单击添加到愿望清单时下拉菜单背景的颜色 |
显示的产品数量 | |
类别页面 | 出现在一个类别的一个页面上的产品数量 |
品牌页面 | 出现在品牌页面的一页上的产品数量 |
搜索结果页面 | 在一页搜索结果中出现的产品数量 |
产品页面(相关产品) | 产品描述下方显示的相关产品数量 |
产品页面(客户还查看了产品) | 客户数量还查看了产品描述下方显示的产品 |
产品卡片 | |
产品标题文本颜色 | 在主页、类别页面或搜索结果中查看时产品标题的颜色 |
产品标题文本悬停颜色 | 将光标悬停在产品标题上时的颜色 |
按钮文字颜色 | 当您将鼠标悬停在产品图像上时出现的按钮的文本颜色,例如“添加到购物车”或“快速查看” |
按钮背景 | 当您将鼠标悬停在产品图像上时出现的按钮的背景颜色,例如“添加到购物车”或“快速查看” |
产品卡片(快速搜索) | |
背景颜色 | 带有产品标题和价格的文字背后的颜色 |
边框颜色 | 产品周围边框的颜色 |
文字悬停颜色 | 光标悬停在产品卡片上时的文本颜色 |
图像尺寸 | |
主要产品图片 | 产品页面上主要产品图像的大小。 有关调整产品图片尺寸的更多信息,请参阅我们的 调整商店图片设置指南 |
产品页面中的缩略图 | 具有多个图像的产品的主产品图像下的缩略图大小 |
购物车和其他页面中的缩略图 | 出现在购物车中的缩略图的大小 |
缩放图像 | 光标悬停在产品图像上时缩放产品图像的大小 |
画廊视图中的图像 | 产品图片出现在类别页面、品牌页面或搜索结果中时的大小 |
图库视图中的品牌形象 | 在品牌页面上查看时品牌形象的大小 |
产品样本图片 | 样本选项图像的大小 |
按钮和图标
主要操作按钮 | |
按钮文字颜色 | 按钮内文本的颜色 |
按钮文本悬停颜色 | 将光标悬停在按钮上时按钮中文本的颜色 |
按钮文本活动颜色 | 单击按钮时按钮中文本的颜色 |
按钮背景 | 文本后面按钮的颜色 |
按钮背景悬停 | 将光标悬停在文本后面时按钮的颜色 |
按钮背景激活 | 单击文本时文本后面的按钮的颜色 |
辅助操作按钮 | |
按钮文字颜色 | 按钮内文本的颜色 |
按钮文本悬停颜色 | 将光标悬停在按钮上时按钮中文本的颜色 |
按钮文本活动颜色 | 单击按钮时按钮中文本的颜色 |
按钮边框 | 按钮周围线条的颜色 |
按钮边框悬停 | 将光标悬停在按钮上时按钮周围线条的颜色 |
按钮边框激活 | 单击按钮时按钮周围线条的颜色 |
三级操作按钮 | |
按钮背景 | “排序依据”过滤器选择器/下拉菜单的颜色 |
按钮箭头图标 | “排序依据”过滤器选择器/下拉菜单中箭头的颜色 |
禁用按钮 | |
按钮文字颜色 | 禁用按钮内的文本颜色 |
按钮背景 | 文本后面按钮的颜色 |
按钮边框 | 按钮周围边框的颜色 |
图标 | |
社交媒体图标 | 页脚中社交媒体图标的颜色 |
社交媒体图标悬停 | 光标悬停在社交媒体图标上时显示的颜色 |
星评图标(完整) | 被计算的星形图标评级的颜色 |
星评图标(空) | 星级显示中为空的星形图标的颜色 |
增加/减少按钮 | 数量更改按钮的颜色 |
复选框和单选按钮 | |
复选框和单选图标 | 复选框上的复选标记或单选按钮上的点的颜色 |
按钮背景 | 复选标记或单选圆点后面的框的颜色 |
按钮边框 | 复选框/单选按钮周围边框的颜色 |
结帐页面
为了在页面构建器中查看结帐设置,您需要在您的商店中启用优化的一页结帐。
标题 | |
使用背景图片 | 选中此框以上传要在徽标后面显示的图像。推荐尺寸为 1000 x 400 像素 |
标题图片大小 | 标志后面的背景图片大小 |
背景颜色 | 出现在徽标后面的颜色 |
标题文字颜色 | 如果使用文本徽标,则标题文本的颜色 |
标题边框 | 标题周围边框的颜色 |
标识 | |
标志类型 | 为您的徽标添加图像。默认情况下,它将继承徽标选项卡中的设置。如果选择了独特的徽标图像,您可以选择要针对主题进行优化的尺寸或指定尺寸。优化主题选项的大小为 250 x 100 像素 |
标志位置 | 将徽标移动到标题的左侧、中间或右侧。 |
折扣横幅 | |
横幅背景 | 自动促销通知的颜色(在营销中设置) |
横幅文字颜色 | 自动促销通知中文本的颜色 |
横幅图标 | 自动促销通知中显示的图标颜色 |
订单汇总框 | |
框背景 | 订单汇总框背景颜色 |
框边框 | 订单摘要框周围边框的颜色 |
结帐步骤 | |
图标背景 | 图标/数字后面的圆圈颜色 |
图标边框 | 图标/数字周围圆圈边框的颜色 |
图标文字颜色 | 步骤中图标/数字的颜色 |
标题 | |
标题 1 字体系列 | h1 文本的字体 |
标题 1 文字颜色 | h1文字的颜色 |
标题 2 字体系列 | h2 文本的字体 |
标题 2 文字颜色 | h2文字的颜色 |
身体 | |
页面背景 | 页面背景颜色 |
焦点颜色 | 结帐表单上聚焦/选定字段的颜色 |
正文和链接 | |
正文字体系列 | 结帐页面上显示的文本的字体 |
正文文本颜色 | 结帐页面上显示的文本的颜色 |
辅助文本字体系列 | 不是标题、标签或信息文本的文本的字体 |
辅助文本颜色 | 不是标题、标签或信息文本的文本颜色 |
链接字体系列 | 结帐页面上显示的文本链接的字体 |
链接颜色 | 结帐页面上显示的文本链接的颜色 |
链接悬停颜色 | 将光标悬停在文本链接上时的颜色 |
主要操作按钮 | |
按钮文本字体系列 | 按钮的字体 |
按钮文字颜色 | 这些按钮内文本的颜色 |
按钮文本悬停颜色 | 将光标悬停在按钮上时按钮中文本的颜色 |
按钮文本活动颜色 | 单击按钮时文本的颜色。这通常显示得很快,并且可能不会出现在所有浏览器中 |
按钮文本禁用颜色 | 按钮时文本的颜色 |
按钮背景 | 文本后面按钮的颜色 |
按钮背景悬停 | 将光标悬停在文本后面时按钮的颜色 |
按钮背景激活 | 单击文本时文本后面的按钮的颜色 |
按钮背景已禁用 | 禁用时文本后面按钮的颜色 |
按钮边框 | 按钮周围线条的颜色 |
按钮边框悬停 | 将光标悬停在按钮上时按钮周围线条的颜色 |
按钮边框激活 | 单击按钮时按钮周围线条的颜色 |
按钮边框禁用 | 禁用时按钮周围线条的颜色 |
辅助操作按钮 | |
按钮文本字体系列 | 按钮的字体 |
按钮文字颜色 | 这些按钮内文本的颜色 |
按钮文本悬停颜色 | 将光标悬停在按钮上时按钮中文本的颜色 |
按钮文本活动颜色 | 单击按钮时文本的颜色。这通常显示得很快,并且可能不会出现在所有浏览器中 |
按钮背景 | 文本后面按钮的颜色 |
按钮背景悬停 | 将光标悬停在文本后面时按钮的颜色 |
按钮背景激活 | 单击文本时文本后面的按钮的颜色 |
按钮边框 | 按钮周围线条的颜色 |
按钮边框悬停 | 将光标悬停在按钮上时按钮周围线条的颜色 |
按钮边框激活 | 单击按钮时按钮周围线条的颜色 |
表单输入字段 | |
标签文本颜色 | 出现在文本框或产品选项选择上方的表单标签的颜色 |
字段文本颜色 | 出现在文本框或下拉菜单中的文本颜色 |
字段占位符文本颜色 | 在用户开始输入之前出现在文本框或下拉菜单中的示例文本的颜色 |
字段错误文本颜色 | 当用户在未完成所有必填字段的情况下尝试提交表单时错误标签文本的颜色 |
领域背景 | 出现在下拉菜单或文本框中文本后面的颜色 |
场内阴影 | 字段边界旁边阴影的颜色 |
字段边界 | 下拉菜单、文本框和矩形多选按钮周围的边框颜色 |
复选框按钮背景 | 复选框和付款方式指示器的颜色 |
表格清单 | |
背景颜色 | 付款方式的背景颜色 |
表格背景 | 活动/选择的付款方式的颜色 |
表格标题文本颜色 | 付款方式名称文本的颜色(如果不是徽标) |
表格边框颜色 | 付款方式周围边框的颜色 |
装载烤面包机 | |
烤面包机背景 | 加载通知文本后面的颜色 |
烤面包机文本颜色 | 加载通知上的文本颜色 |
付款按钮
下面列出的付款按钮适用于Venmo以及 PayPal。请注意,Venmo 只会显示给在安装了 Venmo 的设备上查看商店的购物者,以确保购物者只看到最适合他们的付款方式。如果您使用PayPal或由 Braintree 提供支持的PayPal,则需要在 BigCommerce 控制面板中启用 Venmo 。
显示 PayPal 标语 | 在付款按钮下显示简短的描述性文字。例如,只有 PayPal 按钮时显示“更安全、更简单的支付方式”,同时显示 PayPal 和 PayPal Credit 按钮时显示“两种简单的支付方式” |
显示资金图标 | 显示其他资金/卡徽标,例如 Visa、Mastercard、Amex 和 Discover |
按钮颜色 | PayPal 按钮的颜色(金色、蓝色、银色、黑色、白色) |
按钮形状 | 付款按钮的形状(药丸或矩形) |
按钮大小 | 支付按钮的大小(小、中、大、响应) |
按钮内容 | 显示在 PayPal 按钮内的文本(PayPal Checkout、Pay with PayPal、Buy Now、PayPal) |
显示风格 | 并排(水平)或堆叠(垂直)显示按钮 |
警告:以下样式与显示样式不兼容:显示按钮垂直布局并可能导致按钮无法呈现。
- 按钮尺寸:小
- 显示 PayPal 标语
- 显示资金图标
结帐 PayPal 按钮 | |
按钮颜色 | PayPal 按钮的颜色(金色、蓝色、银色、黑色、白色) |
按钮形状 | PayPal 按钮的形状(药丸或矩形) |
按钮大小 | PayPal 按钮的大小(小、中、大、响应) |
按钮内容 | 显示在 PayPal 按钮内的文本(PayPal Checkout、Pay with PayPal、Buy Now、PayPal) |
付款横幅
下面列出的设置用于设置PayPal Pay Later提供的促销横幅样式。如果您使用PayPal或由 Braintree 提供支持的PayPal,则需要在 BigCommerce 控制面板中启用稍后付款消息。
产品页面横幅 | |
横幅样式颜色 | 横幅背景颜色(蓝色、黑色、白色、白色无边框、灰色、单色、灰度) |
横幅样式比例 | 更改纵横比(8×1、20×1) |
主页横幅 | |
横幅样式颜色 | 横幅背景颜色(蓝色、黑色、白色、白色无边框、灰色、单色、灰度) |
横幅样式比例 | 更改纵横比(8×1、20×1) |
购物车页面横幅 | |
按钮文本样式颜色 | 横幅文本的颜色(黑色、白色、单色、灰度) |
横幅样式标志位置 | PayPal 徽标在横幅中的位置(左、右、上) |
横幅样式标志类型 | 横幅中 PayPal 徽标的样式(Inline、Primary、Alternative、None) |
对横幅外观的更改不会在发布后立即生效。您必须在控制面板中转到您的支付网关(由 Braintree 或 PayPal 提供支持的 PayPal)的设置选项卡,然后禁用并重新启用稍后付款消息,以查看您商店中的更改。
常问问题
为什么支付按钮部分没有出现在页面构建器中?
要在页面构建器中显示付款按钮,您的商店需要:
- Cornerstone 2.6.0 或更高版本(或其他兼容主题)
- 启用优化的一页结帐
为什么支付横幅部分没有出现在页面构建器中?
要在页面构建器中显示付款横幅,您的商店需要:
- Cornerstone 5.5.0 或更高版本(或其他兼容主题)
- 启用优化的一页结帐
- 通过PayPal或Braintree 提供支持的PayPal 启用稍后付款消息
为什么我的店面没有显示我选择的语言?
您必须使用最新版本的 Cornerstone 才能在店面显示您的语言。