如何通过自定义代码嵌入插件修改主题样式？

店匠支持多种主题样式效果展示，如您仍有特殊样式效果显示，店匠支持对主题进行二次开发，来实现您的理想效果。

主题样式常见知识

1. Style标签包裹样式代码：针对主题的样式修改，使用的是Style标签来覆盖（通过自己添加的样式，来覆盖/增加主题中的样式）从而达到展示自己需要的效果。

2. CSS选择器  ：css选择器可以定位到页面元素中的class（类），找到这个（类）就可以针对性的修改，而不是全局的修改，从而达到页面多样化的效果。

3. 学习查找链接  。

所需工具

1. 登录您的Shoplazza管理后台，点击应用 > 访问应用商店，搜索自定义代码嵌入  ，将自定义代码嵌入插件添加至店铺中。

2. 添加成功后，在自定义代码插件中，点击新增代码。

3. 在自定义代码插件中可以添加覆盖样式所需要的代码，编辑自定义的名字、选择触发的页面、代码添加的位置，添加设置好后点击保存。

如何修改主题样式

1. 登录您的Shoplazza管理后台，点击在线商店 > 主题装修 > 编辑，将设置完成的主题样式点击发布。

2. 在店铺C端页面鼠标右击选择检查打开控制台，选中光标，鼠标移动到需要修改的模块，点击 选择工具，选中网页中的相应元素，右边控制台就会自动显示和锁定到对应的代码。

3. 对代码进行修改后，将最终修改后的样式，通过Style标签的方式添加进后台应用市场中的自定义代码嵌入插件中。

实例讲解 - Nova 2023主题清单配件卡片修改样式

如图，如若使用Nova 2023主题中的清单配件卡片，目前该卡片中的的数量配置项是需要填写了大于0的数字才会展示，对于这种情况，如果无法满足部分您所需要的场景，需要使用到这个卡片，但是又不想展示这个数量，这种情况就可以直接通过修改样式的方式实现。

1. 右击鼠标点击检查，在网页控制台中点击选中器，点击清单配件卡片找到对应代码。

2. 在网页控制台中，点击＋按钮，可以快速添加一个选中卡片对应相同的代码样式。

3. 修改/添加自己需要的样式，例如：

• 修改字体颜色

• 隐藏

4. 当修改完需要的样式后，将这段代码直接复制到自定义代码嵌入插件中，首尾处添加<style>标签，点击保存。

<style> 
.tw-body-plus-2 { 
    display: none; 
} 
</style>

5. 代码添加完成后，不需要在主题代码中修改，也不用担心更换主题/升级主题导致代码丢失。如出现更换主题后代码不生效，可以检查代码。

实例讲解 - Hero主题商品详情页加购按钮添加Hover背景颜色

如果需要在按键上添加一个hover背景色，hover就是鼠标悬停后的效果（hover伪类会在鼠标指针悬浮到一个元素上的时候选择这个元素：详情可查看CSS选择器  ）

1. 找到对应位置（查找方式可以参考上述style标签的步骤），然后找到class内容。

2. 然后在这个类后面加上伪类，代码如下：

"<style>
.product-info__buy-now:hover{
 background: blue;
 color:yellow;
}
</style>

• <style>双标签，用于定义样式，在这里的用途是覆盖原有样式。

• 定位需要修改的具体位置（也就是“类”）。

• {xxxx}花括号中的内容，就是需要生效的样式，如：颜色、位置、大小等。