Shopify美妆跨境电商新手建站指南

大家好,欢迎再次光临我的频道!今天,我将带大家一起搭建一个既美观又实用的 美妆类 Shopify 跨境独立站。这个网站在桌面端和移动端都进行了优化,效果非常出色。

在今天的教程中,我会使用 Shopify 和 Canva 这两个工具。提到 Canva,很多小伙伴应该不陌生,它可以用来创建各种设计,只需注册一个免费的 Canva 账号,就能轻松编辑和保存你的设计。

好了,咱们直接进入今天的主题,动手搭建我们的美妆店铺吧!

本期用到的电商工具

  • Shopify:3天免费试用,首月仅需1美元
    👉 注册Shopify店铺

  • 野卡:办理国外银行卡
    👉 野卡 | 一分钟注册,轻松订阅海外线上服务

  • 邮件营销:GetResponse
    👉 GetResponse

  • 开通 TikTok 广告
    👉 TikTok广告

  • 注册 Stripe 企业收款账户教程
    👉 Stripe教程

  • Northwest 美国公司注册
    👉 Northwest注册

  • Fiverr 找专业 CPA 协助报税
    👉 Fiverr

  • 取色器插件
    👉 ColorZilla

  • Canva 在线设计
    👉 Canva

  • DSers 一件代发工具
    👉 DSers

  • 速卖通
    👉 速卖通

  • AliSave Plus 批量下载图片
    👉 AliSave Plus

1. 注册 Shopify 店铺

2. 安装模板 Dawn

A. 自定义

B. 进入设计页面,右上角预览看看

C. 顶部 Desktop logo 位置为居中

D. Announcement bar 公告栏:满199全场免运费

E. 设置 > 颜色 > Scheme 2,背景为黑,文字为白

F. 公告栏颜色改为:Scheme 2

G. 设置 > 颜色 > Scheme 1,背景色:#F8D4E8

H. 设置 > logo,大小 160

I. 顶部下拉 Section padding 顶部与底部间距改为 0

J. 当你向上滚动时,出现导航菜单,可以关掉:Sticky header 改为 none

3. 轮播图设计

A. 点中轮播图,左边 Image overlay opacity 改为 0

B. 点中图上的文字 Browse our latest products 删除

C. Shop all 按钮:Use outline button style 勾去掉

D. 点中轮播图:Color scheme 改为 Scheme 1

4. Canva 设置 Banner

A. 自定义大小:4320X2160

B. 左边素材 > 网格选 2 列,顶部间距改为 0

C. 上传两张美妆照片

D. AI 生成照片,ChatGPT 提示:详情描述下这张照片,用中英文对照

E. AI 生成

F. 上传两张进 Canva,标题:打上文字 cosmetic,全部大写,字体选时髦的 Kaushan Script

G. 增加一段正文文字:shop the sale,字体用 Bright Slight Script,字号 220 左右

H. 素材 > 加入正方形放在最低部,字体用 Archivo Narrow,字号 100,打上 shop the sale,重复几次

I. 下载为 PNG 格式

J. 回到 Shopify,上传照片进轮播图,Banner height 改为 adapt to first image

5. 精选商品

A. 在轮播图下面点增加 section,选 featured collection,Color scheme 改为粉色,文字改为 BEST SELLES

B. 选择分类 Select collection,建分类,并导入产品

C. 找产品搜 cosmetic,新建分类为 Lip Gloss 唇彩

6. 关于我们

A. 增加 image banner

B. Show container on desktop 去掉,Show container on mobile 也去掉

C. 点击按钮:删除第二个按钮 Second button label,去掉上面的文字

D. Use outline button style 勾上

E. 改按钮上的文字为 CONTACT US

F. 上面的文字标题为:ABOUT US,小字用 AI 生成

G. 点中背景图:Color scheme 改为 Scheme 3

H. 更改背景图片 First image

I. Animations 的 Image behavior 改为 fix background position

J. 下面增加区域:rich text,删除上面所有的文字,Color scheme 改为粉

K. Bottom padding 改为 0

7. Collection Lists(集合列表)

您可以创建类似的集合列表,比如 “面部护理产品”、”明星推荐产品” 或 “热销护肤品”

A. 增加区域 Collection Lists

B. 增加数量为 4,Number of columns on desktop

C. 改标题为 SHOP CATEGORIES

D. 点中图片可以选择分类

8. Canva 设计分类图片

A. 尺寸:1000X1000

B. 背景色为粉:#F8D4E8

C. 搜 fade 拖入两个进来

D. 素材 > 相配 拖入正方形

E. 加入分类:副标题 Whitening 美白,字号 196,字体 Authenia

F. 再复制三个,改里面的文字:Oil Control 控油、Pore Minimizing 毛孔收缩、Daily Skincare 日常基础护理

G. 上传照片,下载

H. Shopify 创建分类,并上传分类照片

9. 评价

A. 增加区域 Multicolumn

B. Number of columns on desktop 改为 4

C. 改标题为:CUSTOMER FEEDBACK

D. 删除按钮上的文字,Column alignment 改为居中

E. 更改评价内容,上面放在 5 颗星 ★★★★★

10. 首页焦点图 1st Image Banner

A. 增加区域 Image banner

B. 删除第二个按钮

C. 第一个按钮上的文字为:Explore the Collection 探索这个系列,加上链接为所有产品

D. 更改里面文字标题:Save Up to 30%,描述:See All Cosmetic Essentials! – 查看所有化妆必备品!

E. 回到 Canva,复制刚开始的海报图片,上下布局,背景为黑

F. 增加副标题,全大写

G. 字颜色为粉:#F8D4E8, “Shine Brighter, Smile Bolder – Unleash Your Glossy Glow!”

H. 下载上传到 Shopify,Banner height 改为 adapt to first image

11. IG 区域

A. Subscribe and Save 10%! – 订阅并节省 10%!Heading size 为改非常大

B. 增加 Image banner 区,删除上面所有文字

C. 增加 Rich text,删除上面的字,只留按钮,更改间距为 0,下面 32

D. 按钮上的文字为:Find Us on Social Media – 在社交媒体上找到我们

E. Canva 复制一个海报

F. 背景为粉 #F8D4E8,加副标题 Follow for Updates 全部大写,字体为 Voguer,字号 140

G. 再复制一个文本:ON Instagram

H. 搜素材 Instagram 图标,放在文字下面

I. 放上 7 个正方形

J. 放上文字副标题:@kuajingdianshang,白色加阴影

K. 正方形里面放上照片

L. 上传进照片,Banner height 为 adapt to first image

12. 第二张焦点图

A. 增加 Image banner 区

B. 删除上面的文字,Show container on desktop 和 Show container on mobile 勾去掉

C. 删除第二个按钮上的文字

D. 第一个按钮上的文字:SHOP NOW

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,在上和右下放上文字

J. 加入图片,搜索 cosmetic

K. AliSave Plus 批量下载图片

L. 增加形状正方形,透明度为 85%,增加副标题:SHOP NOW,字体为 Brown Sugar,字号 230

M. 复制一个文字:Buy 2, Get 1 Free! – 买二送一!


希望这篇指南能帮助你顺利搭建自己的美妆跨境电商网站!如需更多信息,请随时联系我。

(0)
上一篇 2025年6月2日
下一篇 2025年6月2日

相关推荐