“Bloxy 主题与 Theme Customizer 美化”
🔒 登录后可标记已读装了电商优化主题（以 Bloxy 为例）后，怎么用主题自带的 Theme Customizer 快速把页头、页脚、Shop 页、产品页做出专业感,不用手写 CSS。这篇也把 Elementor 页面构建器素材里跟 WooCommerce 直接相关的部分（选电商主题、导入电商 Starter Site 模板）收进来——Elementor 本身通用的拖拽设计操作不算 WooCommerce 专属知识，不在这篇范围内。
重点内容
选主题 + 一键导入电商 Starter Site
很多电商主题（例如 Bloxy）自带「Starter Sites／一键导入模板」功能：装好主题后，从模板库里选一个电商类模板导入，连 WooCommerce 都会一并帮你装好，几分钟内就有一个能看的网店雏形，比自己从空白页面开始拼快很多：
- Appearance → Themes → Add New Theme → 搜索并安装 Bloxy（或其他支持 Starter Sites 的电商主题）。
- 激活后会跳出模板库,筛选「eCommerce／Shop」类别的模板。
[截图：Starter Sites 模板库，筛选 "eCommerce／Shop" 类别后的模板缩略图列表]
- 选定模板后点 Import，等待自动帮你建好首页、Shop 页、产品页等一系列页面骨架。
Header（页头）
大部分电商主题的页头构建器是「拖拽式」的，通常分成上/中/下三排（Top row / Main row / Bottom row），可以自由把 Logo、导航菜单（Menu）、搜索框、账户入口、社交图标拖到任意一排、任意位置。每个元素点开都有独立的样式设置（颜色、间距、对齐方式）。
[截图：Bloxy 主题 Header Builder 的 Top row / Main row / Bottom row 三排拖拽布局界面]
💡 拖拽编辑器有时候会卡顿或显示跟实际不符，遇到显示异常先关掉再重新打开 Customizer，通常就会恢复正常。
Footer（页脚）
页脚区块通常是基于 Gutenberg Block 搭建的（跟页头的拖拽逻辑不一样）：一个个 Widget Area 底下可以自由加各种 Block（段落、图片、WooCommerce 专属的产品列表/购物车摘要等），排版方式跟编辑一篇 Gutenberg 文章一样。
Shop 页（产品列表页）
- 可以整个关掉页面顶部的横幅（Banner）区域，或换一张背景图。
- 卡片样式（Card options）可以调整每个产品缩略图的元素排列顺序（图片、标题、价格、星级评分谁在上谁在下）、要不要显示星级评分。
- 可以加侧边栏（Sidebar），塞入「产品搜索」「按价格筛选」「按评分筛选」「最近浏览」「新品上市」等 WooCommerce 专属 Widget（Appearance → Widgets 里找 WooCommerce Sidebar）。
产品详情页
- 可以调整产品主图尺寸、要不要「粘性画廊」（滚动时图片固定在旁边）、灯箱效果的样式细节。
- 标题、价格等元素的排列顺序和对齐方式也能自由调整。
常见误区 / 常见问题
- 网站还没切成「Live」就纳闷 Theme Customizer 改的东西怎么前台看不到——很多主题的实际改动效果要网站状态是 Live 才会正常显示，Coming soon 状态下预览可能不准。
- 拖拽编辑器显示卡顿/跟实际不符就以为是自己设置错了——先试着关掉再重新打开 Customizer，通常是编辑器本身的显示 bug，不是设置问题。
Sources
YouTube：
官方文档：