2024 Shopify网站设计教程 - 逐步指南

Shopify商店设计步骤

• 注册Shopify账户是设计商店的第一步，推荐使用附在描述中的我的推荐链接注册以延长免费试用期。

• 视频会逐步指导如何设计Shopify商店，包括所有设置和选项，让整个过程变得更加容易。

• 视频描述中会列出所有要涵盖的步骤，方便查找特定部分。

• 视频会展示如何使用Shopify编辑器搭建商店，确保最终效果出色。

• 视频强调立即开始注册Shopify账户，使用推荐链接可延长免费试用期。

Shopify商店设计步骤

Shopify免费试用创建账户

• 通过参加促销活动，你可以以每月仅需1美元的价格额外获得三个月的Shopify使用权，这样你实际上可以以每月仅需1美元的价格获得三个月的Shopify使用权，这是一个很棒的优惠，足够你为店铺的开张做好准备。

• 在网页上点击第一个链接，输入你的电子邮箱地址，然后点击“开始免费试用”，接下来Shopify会询问你一些与你要建立的业务或商店相关的问题，你可以选择回答，不过实际上不管你回答什么，我们使用的Shopify版本对每个人都是一样的。

• 选择你的国家并点击“下一步”，然后需要创建Shopify账户，你可以选择使用苹果、Facebook或谷歌账户，或者使用电子邮件注册。输入密码并点击“创建Shopify账户”，这样你的Shopify店铺就创建成功了，你就可以进入Shopify仪表盘了。

Shopify免费试用创建账户

激活扩展3个月试用

• 首先，我喜欢做的第一件事是激活扩展的3个月试用，

• 要做到这一点，我们需要到右下角点击这个黑色框，然后点击选择套餐，

• 开始选择基础套餐就足够了，我们可以看到，首月每月只需1美元，前3个月都是如此，

• 点击选择基础套餐，然后在账单周期上，我会选择每月付费，你也可以选择年付以节省费用，

• 点击确认账单地址，输入你的商业地址，然后选择支付方式为信用卡，一切填写好后，点击订阅，

• 现在我们激活了扩展的试用，可以完全访问所有功能3个月，开始设计我们的商店，

• 首先要做的事情是为我们的商店选择一个主题，转到在线商店，这会带我们到主题页面，

• 当前已安装的主题是黎明主题，如果你想要更改，可以向下滚动，然后点击访问主题商店，这里有一个主题库。

激活扩展3个月试用

安装和使用Shopify主题

• 您可以在商店上使用和安装各种不同主题，可以浏览这些主题，如果您想的话。

• 许多主题实际上是付费主题，因此您需要购买才能在商店上安装。

• 如果您刚开始使用，建议您使用免费主题，可以在左侧点击“免费”筛选，以查看所有免费主题。

• 这样，您就可以使用Shopify计划中所有不同的免费主题。

• 如果您想查看主题，只需点击主题，然后点击“查看演示商店”，然后您就可以浏览整个商店，看看各个页面的样式。

• 如果您找到喜欢的主题，只需点击右上角的“尝试主题”，即可将主题安装到您的商店中。

• 安装主题后，回到Shopify仪表板，在“主题库”下，可以看到所有主题的概览，新安装的主题正在安装。

• 现在新主题已经安装好，如果您想使用它，我们可以

安装和使用Shopify主题

切换主题和开始定制店铺

• 单击“发布”按钮，然后再次单击“发布”，主题从默认的黎明主题切换到了刚刚添加的新主题“刷新”。

• 黎明主题是默认主题之一，被认为是最好的主题之一，许多成功的Shopify商店都在使用。

• 切换回默认主题只需点击“发布”按钮，并确认，即可切换回黎明主题。

• 开始定制店铺时，点击“定制”按钮进入店铺编辑器。可以在左侧看到页面所有元素的概览，点击不同页面进行编辑。

切换主题和开始定制店铺

网站布局概述

• 目前我们网站的顶部是一个公告栏

• 其次是菜单、店铺名称/商标和右侧的购物车

• 在顶部和底部之间通常放置一些链接，如法律页面、电子邮件注册部分和其他图标

• 整个网站主要由不同类型的部分构建而成，每个部分中又包含不同类型的元素

• 例如，首页默认放置了图片横幅和一些产品展示

网站布局概述

在Shopify商店上使用页面结构

• 在Shopify商店中，页面结构非常灵活，我们可以轻松地添加、编辑和删除不同类型的部分。

• 例如，我们可以通过点击加号图标来添加文本部分，并且可以随时进行编辑。

• 我们还可以通过拖放的方式轻松移动部分的位置，使页面布局更符合我们的需求。

• 当我们想删除特定部分时，只需将鼠标悬停在左侧的部分上，点击垃圾桶图标或选择部分并点击删除图标即可。

• 通过了解了页面的结构，我们可以开始设计商店了。

在Shopify商店上使用页面结构

添加主页幻灯片

• 在主页顶部添加一个幻灯片是很常见的，特别是在时尚商店中，我们也要做这个。

• 可以使用图片横幅，然后添加一张图片，但在我的情况下，我会删除整个部分，然后点击“添加部分”，再寻找幻灯片部分，选择插入。

• 特色产品现在位于幻灯片的上方，但我想改变这个，可以回到概览，拖动该部分到主页顶部。

• 为了向这个部分添加内容和图片，可以通过点击选择来选择第一张幻灯片的图片，然后上传需要的图片。

添加主页幻灯片

优化幻灯片

• 在第一张幻灯片中，我们只有一张图片，而我希望有四张不同的图片，也就是四张幻灯片。

• 所以我会点击“添加幻灯片”，然后再次返回并添加另一张幻灯片，这样我就有了四张可以添加图片的幻灯片。

• 接下来，我会选择第二张图片，然后点击“完成”；接着选择第三张图片，再次点击“完成”；最后选择第四张图片，点击“完成”。

• 现在我们可以看到有四张不同的幻灯片了，点击底部的箭头可以看到它们之间的切换。

优化幻灯片

SEO优化：调整网页设计和内容布局的重要性

• 在网页设计中，调整内容的位置和颜色是非常重要的。

• 通过调整内容位置和颜色，可以使网页看起来更吸引人。

• 同时，添加按钮时一定要确保按钮有链接到相关页面。

• 调整标题大小和按钮标签也能让整个页面效果更好。

SEO优化：调整网页设计和内容布局的重要性

优化幻灯片设置

• 现在我们要对所有其他幻灯片做同样的操作。

• 回到上一步，选择第二张幻灯片。

• 由于底部右侧有一些空白区域，所以在这里放置按钮和文字更合适。

• 滚动页面至底部，将内容调整到右下角。

• 桌面对齐选择左侧，同时取消选中这个选项。

• 由于背景色较浅，文字颜色应选择深色。

• 删除副标题，并使用预先准备好的标题语句。

• 标题大小选择小号。

• 需要对按钮进行链接，然后链接到所有商品。

• 对其他两张幻灯片也做同样的操作。

• 实际上，我忘了修改…

优化幻灯片设置

优化首页内容

• 网站首页的按钮文本可以根据需要调整，比如将原文中的“快速选购”改为“立即购买”。

• 建议在首页顶部添加畅销产品或特价促销的横幅，或者展示新品系列，并在按钮中链接到相应的页面。

• 在不同设备上查看网站效果时，可以轻松切换到手机或桌面视图，但通常建议在桌面版本上进行更改。

• 接下来可以在首页的下一个部分展示一些产品，可以根据需要精选展示产品，一般来说商家会选择一些热销产品。

优化首页内容

添加产品和集合

• 要在首页展示产品，可以通过在网站编辑器中添加“特色产品”部分，让用户直接在首页购买特定产品。

• 要将产品添加到商店中，需要回到Shopify仪表盘，确保在编辑器中保存更改后，可以通过在新标签中打开Shopify仪表盘来快速构建商店。

添加产品和集合

添加产品信息

• 在仪表盘中，进入产品栏目，点击“添加产品”

• 从上到下添加产品信息，包括产品名称、描述、媒体和定价

• 描述中可以介绍产品特点和详细尺寸信息，也可以使用AI生成文本进行描述

• 媒体部分需要上传高质量的产品图片，并可以自由调整排列顺序

• 在定价部分填写产品价格

添加产品信息

添加产品和创建集合

• 在添加产品时，首先需要输入产品的基本信息，包括名称、描述、价格等。

• 除了基本信息外，还可以设置折扣价、库存信息和运费等。

• 如果产品有不同的尺寸、颜色或其他变体，也需要在这里设置。

• 添加完所有信息后，保存即可。

• 在创建集合时，可以为不同类型的产品创建不同的分类，方便顾客浏览。

添加产品和创建集合

Conclusion:

通过本教程，您将学会如何注册Shopify账户、延长免费试用期并使用Shopify编辑器搭建商店，同时了解如何优化网页设计和内容布局，为您的网店打下坚实基础。