大家好,欢迎再次光临我的频道!今天,我将带大家一起搭建一个既美观又实用的 美妆类 Shopify 跨境独立站。这个网站在桌面端和移动端都进行了优化,效果非常出色。
在今天的教程中,我会使用 Shopify 和 Canva 这两个工具。提到 Canva,很多小伙伴应该不陌生,它可以用来创建各种设计,只需注册一个免费的 Canva 账号,就能轻松编辑和保存你的设计。
好了,咱们直接进入今天的主题,动手搭建我们的美妆店铺吧!
C. 顶部 Desktop logo position 为居中
D. Announcement bar 公告栏:满199全场免运费
E. 设置 > 颜色 > Scheme 2, Background 为黑,text 为白。
G. 设置 > 颜色 > Scheme 1。背景色:#F8D4E8。
I. 顶部下拉 Section padding 顶部与底部间距改为 0。
J. 当你向上滚动时出现导航菜单,可以关掉:Sticky header 改为 none。
A. 点中轮播图,左边 Image overlay opacity 改为 0。
B. 点中图上的文字 Browse our latest products 删除。
C. Shop all 按钮:Use outline button style 勾去掉。
D. 点中轮播图:Color scheme 改为 Scheme 1。
B. 左边素材 > 网格选 2 列。顶部间距改为 0。
D. AI 生成照片,ChatGPT 提示:详情描述下这张照片,用中英文对照。
F. 上传两张进 Canva,标题:打上文字 COSMETIC,全部大写。字体选时髦里面的 Kaushan Script。
G. 增加一段正文文字:Shop the Sale,字体用 Bright Slight Script,字号 220 左右。
H. 素材 > 加入正方形放在最低部。字体用 Archivo Narrow,字号 100,打上 Shop the Sale。大重,重复几次。
J. 回到 Shopify,上传照片进轮播图,Banner height 改为 adapt to first image。适应第一张图片。
A. 在轮播图下面点增加 section,选 featured collection,Color scheme 改为粉色,文字改为 BEST SELLERS。
B. 选择分类 Select collection,建分类,并导入产品。
C. 找产品搜 cosmetic,新建分类为 Lip Gloss 唇彩。
B. Show container on desktop 去掉。Show container on mobile 也去掉。
C. 点击按钮:删除第二个按钮 Second button label,去掉上面的文字即删除。
D. Use outline button style 勾上。
F. 上面的文字标题为:ABOUT US,小字用 AI 生成。GPT 提示:我做了一个关于美妆的 Shopify 店铺,帮我写一个关于我们的介绍,我的品牌叫 Windy 有风,用中英文对照。
G. 点中背景图:Color scheme 改为 Scheme 3。
I. Animations 的 Image behavior 改为 fix background position。
J. 下面增加区域:rich text,删除上面所有的文字,Color scheme 改为粉。
7. Collection Lists(集合列表)
您可以创建类似的集合列表,比如 “面部护理产品”、”明星推荐产品” 或 “热销护肤品”。
B. 增加数量为 4,Number of columns on desktop。
E. 加入分类:副标题 Whitening 美白,字号 196,字体 Authenia。
F. 再复制三个,改里面的文字:Oil Control 控油、Pore Minimizing 毛孔收缩、Daily Skincare 日常基础护理。
B. Number of columns on desktop 改为 4。
C. 改标题为:CUSTOMER FEEDBACK。
D. 删除按钮上的文字,Column alignment 改为居中。
E. 更改评价内容,上面放在 5 颗星 ★★★★★。
10. 首页焦点图 1st Image Banner
C. 第一个按钮上的文字为:Explore the Collection 探索这个系列。加上链接为所有产品。
D. 更改里面文字标题:Save Up to 30%,描述:See All Cosmetic Essentials! – 查看所有化妆必备品!
E. 回到 Canva,复制刚开始的海报图片。上下布局,背景为黑。
G. 字颜色为粉:#F8D4E8, “Shine Brighter, Smile Bolder – Unleash Your Glossy Glow!”。
H. 下载上传到 Shopify。Banner height 改为 adapt to first image。
A. Subscribe and Save 10%! – 订阅并节省 10%!Heading size 为改非常大。
B. 增加 Image banner 区,删除上面所有文字。
C. 增加 Rich text,删除上面的字,只留按钮,更改间距为 0,下面 32。
D. 按钮上的文字为:Find Us on Social Media – 在社交媒体上找到我们。
F. 背景为粉 #F8D4E8,加副标题 Follow for Updates 全部大写。字体为 Voguer,字号 140。
H. 搜素材 Instagram 图标,放在文字下面。
J. 放上文字副标题:@kuajingdianshang,白色加阴影。
L. 上传进照片,Banner height 为 adapt to first image。
B. 删除上面的文字,Show container on desktop 和 Show container on mobile 勾去掉。
E. Use outline button style 勾上,加上链接。
F. 点中背景图:Color scheme 改为 Scheme 3。
G. Desktop content position 为 bottom center。
H. 回到 Canva,点 +,新增一页。素材 > 网格为三列。间距为 40。
I. 增加副标题:Don’t Miss the Sale! – 不要错过促销!,字颜色白,字体 beautifully delicious script,在上和右下放上文字。
L. 增加形状正方形,透明度为 85%,增加副标题:SHOP NOW,字体为 brown sugar,字号 230。
M. 复制一个文字:Buy 2, Get 1 Free! – 买二送一!
👉 野卡 | 一分钟注册,轻松订阅海外线上服务