大家好，欢迎回到我的频道。我是有风，今天的视频里我会教大家如何设计一个精致的简约风Shopify电商网站。这个网站特别适合服装精品店、化妆品商店等。
这个网站对手机和电脑都非常友好，无论在哪种设备上看都很完美。今天我会用到Shopify和Canva这两个平台。如果你还没用过Canva，你可以注册一个免费账户，用它来制作各种图形，比如网站的LOGO和广告图片。
►Shopify 3天免费试用
➜ https://bit.ly/3Xq89AJ
实用的跨境电商工具：
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
►开通tiktok广告
➜https://bit.ly/3PoqAT6
►dsers（把速卖通铺货到 Shopify ）
➜https://www.dsers.com/partner/windyyoufeng
► zendrop 速度快的一件代发平台（3-7天）
➜https://bit.ly/3wHqcbV
► Leonardo AI图片生成
➜https://bit.ly/3yTr0LO
► midjourney+ChatGPT 账号合租平台、账号购买
➜https://nf.video/C1dxn
►视频中用的GPT Prompt提示词及文字脚本
➜https://aiyoufeng.com/shopify-clothing-store
►chatGPT
➜https://chatgpt.com/
►wildcard办一张国外银行卡（用于升级ChatGPT会员）
➜ https://wildcard.com.cn/i/19YC7OIQ
►canva
➜https://www.canva.com/
►Anytime Mailbox 租用美国私人地址
➜https://bit.ly/483TVKr
►northwest美国公司注册
➜https://bit.ly/4eAZy5S
►Fiver 找专业会计协助报税(美国的注册会计师 )
➜ https://bit.ly/4dXgra7
►AutoDS shopify店铺自动化工具
➜https://bit.ly/3TR9xM0
►Page Pilot AI 生成高转化率的产品页面
➜https://bit.ly/3vtv5oC
► Gempages shopify 产品页克隆复制
➜https://bit.ly/3VmyVKT
► GetResponse电商邮件营销
➜https://bit.ly/3RmFRoG
►Loox shopify自动评论APP
➜https://loox.io/app/windy
►Shopify便宜好用的第三方主题/模版
➜https://bit.ly/3KWmkrj
话不多说，我们马上开始教程。
1、注册Shopify店铺
2、基础设计
首先，打开Shopify，进入”Online Store”，然后选择”Themes”。往下滚动，你会看到Shopify所有的免费主题。
我会安装原始的”dawn”主题，这将是我们网站的基础模板。点击这个图标，你可以看到全屏状态下网站的样子。点击这个手机图标，你可以看到网站的手机端预览。
现在我会点击”Header”，在”Desktop Local Position”下方，我会把它设置为中间对齐。然后我会移除公告栏，不过如果你喜欢也可以保留它。想修改的话，可以点击”Theme Settings”，再选择”Logo”。
在这里你可以直接从电脑上传你的LOGO和网站图标。我建议把LOGO保存为透明背景的PNG格式，在”Desktop Logo Width”选项中，你可以调整LOGO的尺寸。向下滚动再向上滚动时，你会注意到顶部栏会一直保持显示。
这叫做“粘性顶部栏（sticky header）”，如果你想的话，可以在这里把这个效果移除，也可以选择”Always”，让它一直保持在网站顶部。
当客户点击”Catalog”时，他们会进入你网站的所有商品页面；点击”Contact Us”时，他们会进入你的联系表单。如果你想在Shopify上设计一个更加自定义的导航栏，可以打开”Online Store”，然后选择”Navigation”，再打开主菜单。在这里你可以编辑主菜单项，添加更多的页面。
接下来我会教大家如何设计这个主横幅图片。首先，我会删除这个文本框，然后将图片叠加的不透明度调为零。
这样一来，我们的横幅设计就会完全显示出来。然后你可以重新命名这个按钮的标签，并选择一个链接，可以是网站里的某个页面或某个产品系列。
3、设计图片
以下是一些知名的国际女装品牌及其官方网站：
- 路易威登（Louis Vuitton）：
- 香奈儿（Chanel）：
- 古驰（Gucci）：
- 普拉达（Prada）：
- 爱马仕（Hermès）：
- 迪奥（Dior）：
- 博柏利（Burberry）：
- 克洛伊（Chloé）：
- 华伦天奴（Valentino）：
- 杜嘉班纳（Dolce & Gabbana）：
GPT提示1：
你现在扮演一名国际大牌服装设计师，请根据以上女装设计风格，给我提供10个随机的AI图片生成的PROMPT，我好在midjourney用于生成AI图片
GPT提示2：
给我一些关键词，比如新品，用中英文对照
New Arrival
字体：sugar
小字
限量款 – Limited Edition 字体：dream avenue
第三排：windy
字体：beautifully
好了，我已经打开Canva，现在我要点击“自定义尺寸”。接下来我会设置尺寸为4320×2160像素。然后点击“元素”。
接下来打开“图片网格”，我会上传一个“双网格”，并在点击“上传”后移除网格间距。在“上传文件”下方，你可以直接从电脑上传品牌图片和产品照片。
然后你只需要把这些图片拖放到图片网格里就好了。接下来我会上传一个文本框，并将文字全部设为大写，选择“Brown Sugar”字体，再点击“效果”。
然后我会选择“提升效果”。再上传另一个文本框，同样设为大写，选择“Dream Avenue”字体。
接着再应用“提升效果”。然后我会上传最后一个文本框，选择“Beautifully delicious”字体，再应用“提升效果”。完成后，你可以把这个页面以PNG格式下载下来，以获得最佳质量。
接着在Shopify中，点击“选择图片”，你可以把这个网页横幅设计上传到“横幅高度”的地方。我会把它设置为“适应第一张图片”，完成后就这样设计好了网站的页头和主要横幅部分。
以下是4-5的内容
接下来我会向你展示我是如何添加商品集合列表的。现在我在这里导入一个集合列表，并把列数增加到四列。
在标题下面，你可以重新命名这个部分，并且可以启用“查看全部”按钮。如果你有超过四个集合，当你点击一个集合时，你可以选择想要展示的集合。顺便说一句，如果你不太熟悉Shopify上的集合，它们其实就是你创建的用于归类特定产品的类别。
这样做可以让你的商店更容易整理好。一旦你完成了这些，这就是我添加商品集合列表的方法。接下来我会向你展示我是如何设计“关于我们”部分的。
在这里我导入了一个图片横幅。我会在桌面版和手机版上移除容器，然后你可以插入“关于我们”部分的文字内容。
我会移除第二个按钮标签，然后你可以重新命名第一个按钮的标签并为该部分选择一个链接。我会把颜色设置为配色方案3。
我还会应用“轮廓按钮”样式，然后点击“选择图片”，你可以上传一张品牌图片作为背景。在“图片行为”中，我会把背景位置设置为固定。当你完成后，这就是我设计“关于我们”部分的方式。
接下来我会向你展示我是如何设计“商店品质”部分的。在这里我导入了一个多列布局。
我会移除标题和按钮标签，然后把列对齐设置为居中，并且移除次要背景。当你点击列下的标题时，你可以输入商店提供的每一个品质。
例如，你可以写上“快速发货”或“优质客户服务”。在描述下面，你可以写一个简短的描述来配合。接下来我会向你展示我是如何设计这些图标的。
回到Canva中，我会打开之前同样的网页横幅页面，点击“添加页面”。点击“元素”，在“形状”中上传一个圆形。然后点击“边框样式”，应用一个边框。
接着你可以搜索来代表每个商店品质的图标。
4、分类：产品系列列表
GPT提示：
产品分类 用英文的表达，中英文对照
服装分类（Clothing Categories）
5、ABOUT US:图片横幅
A、去掉
在台式设备上显示容器
在移动设备上显示容器
B、
gpt提示：
我的女装品牌叫windy，专注于大牌时尚女装，人群为30-40左右，帮我写一个简短的关于我们，中英文对照
C、删除一个按纽，按纽上的文字：CONTACT US
6、多列：Multicolumn
A、移除按纽
C、居中对齐
D、辅助背景无
GPT提示：
请根据以上内容，再帮我写一些其他的。
SUPERIOR QUALITY | 卓越品质
Crafted with precision and care, we use only the finest materials to deliver exceptional quality. Each piece embodies a perfect harmony of elegance and durability.
通过严谨的工艺和优质的材料，为您呈现卓越的品质。每件产品都兼具优雅与持久的魅力。
WORLDWIDE FAST SHIPPING | 全球极速配送
Experience seamless and efficient global shipping services, ensuring your favorite styles arrive promptly, no matter where you are.
享受便捷高效的全球配送服务，无论您身在何处，时尚魅力总能及时送达。
PREMIUM CUSTOMER CARE | 一流服务
Our team is dedicated to providing attentive and professional support, ensuring every interaction is tailored to your needs for an exceptional shopping journey.
我们贴心且专业的团队将为您提供个性化支持，让每一次沟通都成为愉悦的购物体验。
E、canva设计 三个图标
加圆，加边框，搜quality、fast shipping、Customer service
6、**特色产品系列：**精选产品
下是一些适合女装品牌的特色产品系列名称，突显时尚与优雅的氛围：
- Eternal Elegance – 永恒优雅
- Signature Styles – 经典风尚
- Timeless Treasures – 永恒珍品
- Graceful Glamour – 优雅魅力
- Luxury Essentials – 奢华精选
- Chic & Classic – 时尚经典
- Refined Radiance – 精致光芒
- Modern Muse – 现代缪斯
- Iconic Collection – 标志系列
- Effortless Charm – 自然魅力
背景色：#FFF8F8
7、顾客评价：Multicolumn 多列
接下来我要展示如何添加“精选商品集合”。在这里，我会导入一个精选的商品集合。在“标题”部分，你可以重新命名这个板块。
然后我会应用“配色方案2”。在这里我会打开配色方案2，把背景颜色改为浅米色。如果你的集合中有超过四个产品，记得启用“查看全部”按钮。
接下来你可以选择你想要展示的商品集合。例如，大多数人会展示他们的畅销商品集合。一旦完成，这就是我添加精选商品集合的方法。
接下来我要演示“顾客评价”部分的设计。在这里，我会导入一个多列板块，并移除按钮标签，重新命名标题。
然后我会把列数增加到四列。当你点击某一列时，我会把列的对齐方式设置为居中。在“标题”部分，我会粘贴星星表情符号来代表顾客的评分。
在“描述”部分，你可以粘贴顾客的评论。我会用这个文本作为示例，但我建议你可以加入评论者的名字，并插入一个链接到他们评论的产品页面。这就是我添加“顾客反馈”部分的方式。
A、GPT提示：
顾客反馈 ，用英文一般怎么说，来 几个种说法，中英文对照片
- Customer Reviews – 顾客评价
- What Our Customers Say – 客户怎么说
- Testimonials – 用户感言
- Happy Customers – 满意客户
- Client Feedback – 客户反馈
- Customer Stories – 客户故事
A、GPT提示：截图
生成五星可复制的信息
黑白的
生成5个顾客评价内容
如果需要更多类似符号，也可以使用以下：
- ✧
- ✪
- ★
- ☆
8、图片横幅：第二张横幅图片
- Explore the Collection探索系列
- Shop Now立即购买
- Discover More发现更多
- View This Line查看此系列
- Browse Our Favorites浏览我们的精选
- Find Your Style寻找属于你的风格
UP TO 30% OFF
Fall Fashion Favorites 秋季精选限时优惠
Step into autumn with style and grace. Our fall collection brings together the best of cozy comfort and contemporary fashion, making it easy to elevate your wardrobe. Each item is designed for endless versatility, giving you the freedom to create outfits that match your unique style. Welcome the cooler weather with confidence and sophistication, and let the beauty of fall inspire your look this season.
字体为：season
9、邮箱注册：电子邮件注册信息
GPT提示：
换个说法，改写下，中英文对照
SUBSCRIBE AND GET 10% OFF
订阅立享 10% 优惠
English:
Join our email list for 10% off your first purchase!
中文：
订阅我们的邮件，首次购物立减 10%！
10、多行：博客文章
如果需要更多类似符号，也可以使用以下：
- ✧
- ✪
- ★
- ☆
FEATURED ARTICLE ✦
Highlight your favorite product, collection, or story with an image. Share insights on availability, style, or even include a thoughtful review.
精选文章 ✦
通过图片展示您喜欢的产品、系列或故事。分享关于库存、风格的见解，或者加入一段用心的评价。
SEE MORE
查看更多
接下来，我会给大家演示一下我是怎么设计第二个横幅广告图片的。这里我要导入一个图片横幅，然后在桌面端把容器去掉。
接着我会去掉文字，然后你可以应用轮廓按钮样式，并重新命名这一部分，叫做桌面内容位置。在Canva中，我会把这个设置到右下角。
你要打开同一个网页横幅页面，然后点击添加页面。接着点击元素，上传一个图片网格。我会把这个复制两次。
然后你可以把品牌的图片拖放到这些图片网格中。我会上传一个文本框，把内容设置为大写，然后使用”The Seasons”字体。接着我会复制这个文本框，并在其下方创建一个小一些的文本框。
然后我会再复制一次这个文本框。在这个页面上，你可以描述一个新的产品系列，或者写一段简短的公司介绍。然后你可以下载这个页面并将其上传到那个图片横幅中。
在Shopify上，找到横幅高度的设置。我会将其设置为适应第一张图片的高度。完成这些步骤后，这就是我设计第二个网页横幅部分的过程。
接下来，我会演示一下我是如何添加邮件注册和精选博客文章部分的。在这里，我会导入一个邮件注册，并重新命名这个部分。
接着我会应用配色方案二，然后插入一个多行布局，并删除第三行，但如果你愿意的话，也可以保留第三行。这些行将代表你精选的两篇博客文章。
在标题部分，你可以输入博客文章的标题。我会用这个文本作为示例。然后你可以加上一个简短描述和一个匹配的说明文字。
接着你可以重新命名按钮标签，并插入一个链接，直接指向这些博客文章。然后你可以插入品牌图片，作为这些博客文章的封面。完成这些步骤后，这就是我添加邮件注册和博客文章部分的过程。
11-12内容、instagram：Multicolumn 多列
接下来我要给大家演示一下我是如何设计这个Instagram精选帖子部分的。首先，我会导入一个多列布局。然后我会把按钮标签删掉，并重新设置标题。
接下来你需要应用颜色方案2，然后把列数增加到4列。接着我会插入一个富文本，然后把默认文本删除。
我会将它的颜色设置为颜色方案2，再应用描边按钮样式。接下来你可以重新命名按钮标签，并插入一个链接，直接指向你的Instagram账号。
然后，点击某一列，你可以给标题重新命名。而对于描述部分，你可以粘贴你要展示的Instagram帖子的文案。接着你可以直接从电脑上传要展示的Instagram帖子。
最后，一定要记得在完成后启用手机端的滑动效果。这就是我设计Instagram精选帖子部分的全部过程。
如果需要更多类似符号，也可以使用以下：
- ✧
- ✪
- ★
- ☆
✦ CONNECT WITH US ON INSTAGRAM ✦
✦ 在 Instagram 与我们相连 ✦
English:
Discover the latest trends, exclusive content, and behind-the-scenes moments by following us on Instagram!
中文：
关注我们的 Instagram，探索最新潮流、独家内容和幕后故事！
12、富文本
其他文字删除，只留 关注按纽
STAY CONNECTED →
保持联络 →
13、图片横幅：保持联系
authenia 字体
最后，我会演示一下我是如何设计”Let’s Connect”这个部分的。
首先，我会导入一个图片横幅。在桌面端和移动端，我会去掉容器的边框。然后我会去掉文字和按钮标签。
接着在Canva这边，我会点击“添加页面”，打开它们的图片网格，选择一个三栏网格并导入。然后把网格间距去掉。
之后你可以把你的品牌图片拖放到这个网格里。接下来我会上传一个方形形状，再上传一个文本框，并使用“Authentic Signature”字体。
再上传另一个文本框，使用“Brown Sugar”字体。在这个页面上，你可以展示品牌信息和社交媒体账号。我会展示品牌、电话号码、电子邮箱、营业地址和社交媒体账号。
然后我会上传一个文本框，使用大写字母并应用“Glacial Indifference”字体。对于最后一个文本框，可以填写你的社交媒体用户名，并使用“Alta”字体。接着你可以下载这个页面，并把它上传到Shopify上的图片横幅部分，设置为横幅高度。
我会把它设置为适应第一张图片，这样一旦你完成，就可以了。这就是我设计”Let’s Connect”部分的方法。好啦，接下来就是最终完成的Shopify网站。
相关文章
