新的 Ecwid 设计设置：数十种自定义选项，无需编码

12最小读取

设计说明了一切电子商务行业商店。如果人们可以轻松浏览您的在线店面，您就有更大的机会转化他们。一致的现代设计可以告诉客户您是一个值得信赖的品牌。

Ecwid 帮助任何企业（即使是小型和初创企业）在网上专业地寻找和销售产品。您无需支付大量费用即可顶级网页设计师得到适合移动设备，干净美丽电子商务行业存储。

我们添加了 数十种新的店面设计功能 到 Ecwid，这样您就可以电子商务行业存储最能反映您品牌的外观和感觉。

设置在线商店设计中的每个小细节都非常简单。无需编码即可更改图像样式、产品页面布局和店面元素。您将在这篇文章中亲眼看到。

新的设置嵌套在 设置 → 设计 在您的 Ecwid 控制面板中。要使用它们，请确保您已在 设置 → 新功能.

在“设置”→“新功能”中启用这些更新，以查看新的设计设置页面

如果我使用的是旧版本的 Ecwid 店面怎么办？

切换到新店面可能会完全改变商店的外观。使用新的设计设置，您将获得更多自定义选项，并为您的商店提供更引人注目的外观。但是，如果您使用的是自制 CSS 主题或其他定制开发店面功能 — 它们可能与新店面不兼容。如果您需要帮助，我们的支持团队将随时为您提供帮助。

设计您的网上店面

您可以控制产品目录的整体外观，从产品图片到单品和按钮。

1. 选择最佳图片尺寸来展示您的产品

默认情况下，产品图片是中型适合大多数商店。

有些产品具有您可能想要可视化的重要细节（例如，如果您销售珠宝或绘画）。选择大图像尺寸，让您的客户欣赏您精美的产品和摄影作品。

如果您销售的产品种类繁多（例如，200 条不同颜色的皮带），请坚持使用较小的图片。您的商店将在屏幕上显示大量产品，您的客户会对选择印象深刻。

产品图片的小、中、大尺寸

2. 根据产品尺寸优化图片纵横比

你们卖棕榈树吗？或者长腿模特展示您的设计师外套？这两种方式在垂直照片中看起来都很棒。

水平比例适合宽幅产品——例如鞋子、沙发或营养棒。

对于圆形物体（或者，当有疑问时），使用方形图像，它们总是看起来很棒。

垂直、水平和方形图像

如果您想强调产品图片并使其在商店背景中脱颖而出，请选择“使图像背景变暗”。

3. 选择在店面显示哪些产品信息

与产品照片类似，您可以从众多设计选项中选择其他店面元素：产品名称、标题、价格、SKU、“购买”按钮。决定如何显示每个元素 — 在产品图片下或鼠标悬停时。

在产品图片下、悬停时显示元素，或隐藏它们

如果您选择将信息放在产品图片下方，则可以设置布局。将内容左对齐、右对齐、居中或两端对齐 - 您可以自由地创建您最喜欢的外观。

元素（产品名称和价格）的不同布局

您还可以隐藏元素。隐藏所有元素，让您的店面看起来像一本产品手册。通过点击任何产品图片，您的客户将进入产品页面。

如果您想显示更多详细信息，请选择显示附加产品图像。鼠标悬停在 Ecwid 上时，将显示产品图片库中的第一张图片。

鼠标悬停时显示附加产品图像

这些新设置为您的店面外观带来了大量设计变化。

4. 设计你的商店类别

您将找到设置类别外观的选项。无论您的类别图片是照片、图标还是品牌徽标，Ecwid 都有设计选项让它们看起来令人惊叹。

图片下、图片上、悬停时和隐藏时的类别名称

优化产品页面以实现转化

现在，您可以根据最适合客户的方式以不同的方式组织产品页面的信息。每个设计选项都是根据最佳电子商务行业提高转化率的做法。

1. 选择产品页面布局

有四个新选项可用于组织产品页面上的内容。

吸引人们关注您的产品图片。 放置一个高品质产品页面左侧的产品图片将使客户首先注意到它。使用 2列如果您销售具有视觉吸引力的产品并且有简短的产品描述，则可在右侧布局产品描述。

- 2列布局与右侧的产品描述

添加详细的产品描述。 对于电子产品或医药产品等产品，产品说明可能相当长。然后选择双列布局中，产品描述位于图片下方。即使您添加了很长的产品使用手册，页面看起来也会很和谐。

- 2列布局中产品描述位于图片下方

强调产品选项和“结帐”按钮。 如果您的客户无需阅读长篇描述或仔细查看图库即可购买您的产品，请选择在左侧显示带有结帐按钮的产品选项。例如，如果您销售小型水族馆鱼类。

“添加到购物袋”按钮成为焦点

尽量减少滚动和干扰。 A 三栏如果您希望产品页面无需额外操作即可显示最多的信息，那么布局就是有效的。

紧凑型 3列布局

你也可以 选择照片库的布局. 通过引人注目的照片库帮助您的客户了解您的产品。选择图库中图像缩略图的布局（垂直或水平）或以全尺寸显示您的迷人图像。您显示的视图越多且越详细，效果就越好。

照片库布局选项

3. 选择要在侧栏中显示的产品信息

转换产品页面提供足够的产品信息，同时保持简洁。在 Ecwid 中，您可以隐藏不需要的元素（如 SKU、产品选项、分享按钮），这样您的客户就不会在购物车途中分心。

最好的部分是，您可以拖动每个元素并按任意顺序排列它们。测试大量新方法来优化您的产品页面以实现转化。

灵活的侧边栏设置

更改店面导航和颜色

还有一些店面设置，默认情况下启用这些设置以帮助您的客户浏览您的商店。您可以随时关闭其中任何一项。

如果您从旧版店面切换，这些设置将迁移到新店面，就像您之前使用的那样。

颜色自适应模式。如果您在网站上安装 Ecwid 在线商店，商店颜色将自动与网站主题相匹配。您的商店看起来就像网站的自然组成部分。

页脚菜单和面包屑 帮助顾客更快地浏览您的商店并防止他们迷路。

- 签署链接 使客户能够登录他们的个人资料来查看他们的订单并使用愿望清单。

“排序依据”选项 允许您的客户按价格、名称和其他条件对您的产品进行分类。

更改 Ecwid 商店设计的其他方法

新的设计设置涵盖了最常见的用例。如果您想以其他方式更改您的商店：

如果您需要为您的商店定制主题而无需编码，请尝试来自 Ecwid 应用市场的设计应用程序（适用于付费的 Ecwid 计划，适用应用程序价格）。
创建自定义 CSS 主题（一组确定商店中每个元素外观的规则，例如大小、形状或颜色）。创建 CSS 主题需要一定的技术知识。 Ecwid 知识库中的 CSS 主题指南解释了如何创建自己的 CSS 主题以及更改特定元素的说明。您可以随时向 Ecwid 客户服务团队寻求帮助，或者订购您自己的 CSS 主题的定制开发.
对于开发人员：使用 Ecwid Javascript API 扩展 Ecwid 店面功能。您可以构建新的 CSS 主题或应用程序，并在 Ecwid 应用市场上销售。Ecwid Javascript API 允许您完全更改店面外观，并根据需要进行深度更改。如果您已准备好开始，请在我们的开发人员页面上注册.