做应用开发，只要涉及到前台页面的展示，HTML代码是跑不掉的。插入HTML代码本身是一件很简单的事情，Shopify插件的开发跟其他系统开发有一些不一样，因为每一个Shopify店铺都有不同的模板，我们也没法去更改Shopify独立站店铺的模板代码。今天就来讲一下，怎么向插件怎么去影响页面的展现。
以下内容是接着上一篇《Shopify插件开发基础篇-获取店铺信息》。如果不知道下面变量都是怎么来的，建议先阅读前一篇文章，或者给我留言也行。
首先，一个Shopify独立站可能会安装多个模板，所以我们需要获取到站点的模板列表。
$shopApi = $shop->api();
$themes = $shop->api()->rest('GET', '/admin/api/2021-01/themes.json');
dump($themes);
细心的同学会发现上面有一个2021-01，这其实是Shopify的一个接口版本，它是接口地址的一部分。
如下图所示 themes数组里面就是当前我测试店铺的模板。
image.png
接下来我需要向我的Shopify店铺首页插入一段Html代码。
$themeId = $themes['body']['themes'][0]['id'];
$value = '<h1>Hello World from Bepei.com!</h1>';
$value .= '<h2>微信公众号「Shopify插件服务」</h2>';
$array = array(
'asset' => [
'key' => 'templates/index.liquid',
'value' => $value,
],
);
$res = $shopApi->rest('put', '/admin/api/2021-01/themes/' . $themeId . '/assets.json', $array);
这里代码中$shopApi->rest()只是我使用的一个工具调用的方法，说白了它会发起一个网络请求而已，put是一个method，我们平时使用的都是get、Post之类，如果有不清楚这里建议去找一些RESTFUL API资料去学习一下。
在店铺后台进入插件首页时，会返回如下图，插入成功。
image.png
接下来我们看下前台实际效果。
image.png
如果你有任何疑问，欢迎给我留言。
