Porto Shopify 主题装修笔记

主题购买

https://themeforest.net/item/porto-ultimate-responsive-shopify-theme/19162959

主题教程

https://portotheme.com/shopify/porto/documentation/

主题支持

https://obest.org/support/

Shopify 安装

1.在themeforest.net中下载主题源文件

在这里插入图片描述
下载后解压文件结构如下图

2.在Shopify中安装主题

打开shopify后台，选择在线商店→模板→添加模板，选择Theme Files Shopify 2.0文件夹下Porto4.0.zip
在这里插入图片描述

3.选择演示

导入 .zip 文件后，转到当前模板→编辑→编辑代码
在这里插入图片描述
我这边使用的演示模板为demo4，选择Presets Shopify 2.0文件夹demo4文本到settings_data.json，然后保存

4.发布主题

在这里插入图片描述
至此 Porto Shopify 主题安装完毕

Porto Shopify 主题装修

Porto Shopify 很简单，我看了看demo04,仅仅几个页面，点击不同页面，就会出现不要修改内容

1.首页

在这里插入图片描述
不同的块代表不同的区域，找到对应区域修改内容就行
这个理主要解决一下Block Html内容如何修改，Block Html可以是一段HTML,也可以是 shortcode
这里主要使用shortcode
首先先选择Page下的shortcode

选择合适的样式，设置内容即可

2.collection页面

collection会自动调用默认样式，这边主要讲解侧边栏的设置，以及产品筛选的设置
首先先新建好网站导航
在这里插入图片描述

3.产品详情页

活动倒计时：[countdown]2022/12/10 10:30:00[/countdown]
在这里插入图片描述
简短描述（不使用这个会默认调取des内容）：

[shortdesc]
Detection gas:Carbon Monoxide（CO gas）
Application:Household CO alarm gas, smart home devices.
Feature:High sensitivity, high resolution, low power consumption, long lifespan Supply UART, analog voltage signal output ways
[/shortdesc]

在这里插入图片描述
额外定义tab：

[additional]WInsen Winsen[/additional]

在这里插入图片描述