用HTML和CSS格式化Shopify中的区块

Shopify这个电商平台背后的理念是，为企业提供一个尽可能简单易用的一体化解决方案，用于在线展示和销售。这样所有企业家都能获得机会，无需大量工作或技术知识就能搭建并运营一个正常运作的网店。

这个对简单、易于概览的操作的关注，却常常意味着详细的自定义选项在Shopify编辑器中没有显示或只部分显示。例如，当你们为网店创建新页面时，可以用HTML和CSS代码修改它。不过，对于你们用来设计首页的区块，这个选项是缺失的（使用Dawn主题时，这些区块现在甚至可用于网店几乎所有页面）。

我们在这里向你们展示，如何通过几次点击来改变这一点，以便也能在区块内使用HTML和CSS，让你们的首页更加个性化，更适合你们、你们的企业和你们的产品或服务。

注意：在本指南中，你们将对主题的代码进行更改。我们强烈建议在每次更改代码前备份你们的主题。只需复制当前主题，并给副本起一个易于理解的名称（例如主题名称 + “Backup” + 日期）：

在编辑前复制你们的主题，以创建备份！
Shopify编辑器中的标准区块
我们以Debut主题中名为“Image with text overlay”（德语：“Foto mit überlegtem Text”）的这个区块为例。在左侧菜单中，你们可以选择图片，有该区块的各种布局选项，还有一个文本框，你们可以在其中写入要显示在图片上的文字。可惜在这里你们只能将文字设为粗体（B）和斜体（I），或者插入链接。

如果你们还想使用更多格式选项：别绝望，因为解决方案很简单，我们在这里向你们展示怎么做！

你们在左侧字段中输入的文字随后会显示在图片上。
找出区块的内部名称
首先，你们必须找出相应区块在Shopify代码中的名称。如果你们使用Chrome浏览器，可以右键点击该区块并选择“Inspect”选项，在开发者控制台中查看页面代码。当你们把鼠标指针移到各个代码行上时，网页上的相应区域会被标记，如下图所示：

左：网页上被检查的元素。右：Google Chrome的开发者控制台。
在这种情况下，“hero”这个词出现在我们图片叠加文字区域代码的多个地方。如果你们找到主元素，也就是包围整个区域的代码容器，会在代码中看到“type”:”hero”，所以该区块的“类型”就是“hero”。有了这个知识，我们现在可以在Shopify代码中定位了。（如果你们使用其他没有此功能的浏览器，也可以直接进入代码，点击“Sections”下的Liquid文件，并用Strg+F/Cmd+F搜索你们要编辑的区块名称）

在代码中进行调整，以启用文本框的 HTML 和 CSS
打开你们主题的代码，点击“Actions”（或“Aktionen”），然后选择“Edit code”（或“Code bearbeiten”）：

这样你们就能进入主题的代码。
在“Sections”文件里搜索你们在代码中找到的名称，在我们的例子中就是“hero.liquid”。点击该文件并按下快捷键“Strg + F”（如果你们用的是 Mac 则是“Cmd + F”）来打开搜索框。如果想确认编辑的是正确分区的文件，直接搜索“{% schema %}”，不要带引号。在它正下方你们会找到一段代码，里面写着分区的名称：

该 Liquid 文件所属分区的德文名称，你们可以在第 131 行看到：“Foto mit überlegtem Text”
现在在搜索框中输入“richtext”。这里你们会看到在“label”下出现了值“Text”，这就是编辑器中文本框上方的标题。如果找到的匹配项的“label”是其他值，就继续搜索，直到找到这一处。

你们必须修改这部分，才能在“hero”分区的文本框中使用 HTML 和 CSS。
现在把值“richtext”改成“textarea”，然后点击“Speichern”。

“richtext”已被替换为“textarea”。别忘了保存！
完成了。现在回到编辑器并编辑相应的分区，你们会在文本框中看到通过 HTML 和 CSS 实现的格式，并且可以自己使用它们，按你们的意愿来设计文本：

这里使用了“style=background-color:red”，给文字加上红色背景。
再简要总结一下：

找出你们要编辑的分区对应的 Liquid 文件
在该文件中搜索文本框的代码
在代码中把文本框类型从 richtext 改成 textarea
保存代码中的更改，现在你们可以在相应文本框中使用 HTML 和 CSS 了
另外，在 https://www.w3schools.com/html/default.asp 你们可以找到大量关于 HTML 和 CSS 应用的教程、资源和示例。

如果你们对这篇文章还有问题，或者在搭建网店时需要其他帮助，联系我们，我们很乐意继续帮你们！ 🙂

Happy Clicking & Coding,

你们的魔法学徒 Jonathan McGrinsey