Cornerstone 是由 BigCommerce 设计的免费主题,适用于所有商店。它是完全响应式的,这意味着它会自动适应正在查看的设备(台式机、平板电脑和移动设备),并具有帮助您销售的内置功能,例如主页轮播(幻灯片)社交媒体图标特色/畅销/新品面板,并支持分面搜索(产品过滤)

该主题具有简单而干净的设计,可以使用Page Builder轻松定制以匹配您的业务或品牌。

基石主题功能

Cornerstone 主题带有三种样式变体,每种变体都具有完全响应性,非常适合大型目录。该主题使用顶部导航和圆角按钮。

对于轮播幻灯片图像,我们支持JPEGGIFPNG文件类型,但建议对产品图像使用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 themeSpecify Dimensions。如果选择指定尺寸,将出现两个最大高度和宽度框,允许您输入尺寸。当您输入任一尺寸时,​​它会自动调整相反的尺寸以保持图像的原始纵横比。优化主题选项的大小为 250 x 100 像素。
标志字体大小用于文本徽标的字体大小
标志文字颜色用于文本徽标的字体颜色
实用导航
文字颜色右上角链接的颜色,包括搜索、登录和购物车
文字悬停颜色光标悬停在右上角链接上时的颜色
购物车下拉背景单击购物车时下拉菜单的颜色
购物车下拉边框单击购物车时下拉菜单周围的边框颜色
购物车柜台背景添加项目时出现在购物车链接旁边的图标的颜色
主导航
隐藏网页链接从类别导航菜单切换网页链接的可见性
文字颜色顶部导航文字的颜色
文字悬停颜色光标悬停在顶部导航文本上时的颜色
下拉菜单背景类别有子类别时下拉菜单的颜色
下拉菜单边框当类别有子类别时下拉菜单周围的边框颜色
下拉菜单显示方式控制类别下拉显示深度。简单显示最多 3 级类别深度和交替显示最多 8 级类别深度
快速搜索背景快速搜索区域的背景颜色(单击标题中的搜索时出现)
社交媒体图标
显示社交媒体图标在标题中显示社交媒体图标
页脚放置在页脚的左侧或右侧显示图标,或将它们一起删除
页脚
页脚背景页脚中的背景颜色
显示设置
显示“由 BigCommerce 提供支持”将链接切换回 BigCommerce.com
在页脚显示品牌在页脚显示品牌链接
显示©、当年和商店名称切换页脚中的 © 详细信息
付款图标
美国运通、发现、万事达卡、贝宝、维萨、亚马逊支付、谷歌支付启用或禁用卡和/或替代付款方式图标
Apple Pay 按钮颜色允许您设置Apple Pay按钮的颜色样式。Apple Pay 按钮仅在某些浏览器上显示

主页

旋转木马 
显示轮播打开或关闭轮播
显示轮播箭头打开或关闭左右箭头
显示轮播播放/暂停按钮打开或关闭播放/暂停按钮
允许图像在大屏幕上拉伸如果查看屏幕宽于 1261 像素,则防止裁剪大型轮播图像
内容背景Carousel 上框覆盖的颜色
标题文本轮播上大文本的颜色
说明文字Carousel 上较小文本的颜色
指标如果有不止一张幻灯片,轮播下方空点的颜色
指标激活如果有不止一张幻灯片,轮播下方全点的颜色
指标背景如果有多个幻灯片,则轮播下方圆点后面的框的颜色
如果有不止一张幻灯片,左右箭头的颜色
箭头背景如果有不止一张幻灯片,箭头后面的框的颜色
箭头边框如果有不止一张幻灯片,则箭头后面的框的边框颜色
播放/暂停按钮文本如果有不止一张幻灯片,播放/暂停按钮文本的颜色
播放/暂停按钮背景如果有不止一张幻灯片,则播放/暂停按钮后面的框的颜色
播放/暂停按钮边框如果有不止一张幻灯片,则播放/暂停按钮后面的框的边框颜色
产品 
特色产品数量主页上显示多少特色产品,或禁用此功能
最受欢迎产品数量主页上显示多少最受欢迎的产品,或禁用此功能
新产品数量主页上显示多少新产品,或禁用此功能

产品

产品销售徽章 
显示产品销售徽章将销售徽章的显示样式更改为Top LeftDiagonalBurst,或选择None以禁用销售徽章。禁用产品销售徽章将在页面构建器中隐藏下面的标签和徽章设置
产品销售徽章标签更改销售徽章中的文本
产品价格标签(销售)更改销售价格文本
产品价格标签(售前)更改默认价格文本
产品价格标签(零售)更改零售/MSRP 价格文本
产品价格标签当没有销售价格时更改价格标签的文本(如“最低”文本)
徽章文字颜色销售徽章上的文字颜色
徽章颜色销售徽章的背景颜色
徽章悬停颜色光标悬停在销售徽章上时的颜色
显示产品售罄徽章将售罄徽章的显示样式更改为Top LeftDiagonalBurst,或选择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 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 才能在店面显示您的语言。