颜色、形状、功能——合适的 Shopify 主题不仅可以使您的在线商店用户友好，而且在塑造您的品牌形象方面也发挥着关键作用。为了给您提供最大程度的设计自由，您可以从 70 多个 Shopify 主题中进行选择，并且可以使用来自 2,900 多个 Shopify 应用程序的附加设计元素和插件根据您的客户和业务流程进行自定义。
但是，如果所有这些还不足以让您的 Shopify 商店完全符合您的要求怎么办？这非常简单：然后您可以使用 CSS 直接将您的设计写入主题的源代码中。一旦您熟悉了 CSS 基础知识，即使没有任何编程知识，您也可以通过进行细微更改来将 Shopify 主题定制为您的品牌。
基础知识：什么是 CSS？
CSS 代表层叠样式表，是一种基于文本的标记语言，主要决定您的 Shopify 商店的外观。 CSS 是超文本标记语言 HTML 的对应部分。您可能不仅从商店的后端了解它们，还可以从电子邮件程序的文本编辑器或博客中了解它们。
阅读提示：在本文中，我们将告诉您如何创建独特的“关于我们”页面。
HTML 代码决定了文本在互联网上显示的结构。它可以识别标题、设置换行符、缩进列表并允许我们在文本中嵌入图像。另一方面，CSS 赋予文本其独特的外观。该代码包含 HTML 需要检索的布局、字体、大小和颜色、行距以及许多其他设计元素。
例如，如果您在 Shopify 商店的三个页面上格式化标题，并且它始终具有相同的颜色和大小，则此组合将存储在标题的 CSS 中。这意味着您可以在此处进行调整，使用 CSS 为您的主题提供新的设计。
HTML 和 CSS：如何创建网上商店的主题
CSS 代码被组织成所谓的规则。这些都是始终按照相同模式构建的小链。为了解决这个问题，我们首先需要一段用 HTML 编码的文本：
<H1>CSS 代码如何工作？</H1>
所以我们的问题是“CSS 代码如何工作？”作为 H1， 特殊数据库 即页面上最大的标题。但是，我们还不知道这个标题在特定情况下会是什么样子：这可能因主题而异。
大写或小写、斜体或粗体、红色或蓝色、 德里亚·厄兹坎 行政助理 黄色或绿色——HTML 代码从在线商店的一种样式表中检索所有这些因素。而这个样式表正是CSS规则。对于我们的例子来说，它可能看起来像这样：
H1 {颜色：红色；字体大小：18px;}
让我们仔细看看这个问题。 CSS 规则集总是以这样的方式构建：它们以所谓的选择器开始。选择器指的是特定的 HTML 编码， 最新群发短信 我们在此为其指定样式。在我们的例子中，它是“H1”，这告诉我们我们即将为所有带有 HTML 标签“H1”的标题设置规则。
接下来是花括号中的声明。它们总是用英文书写，并决定设计的各个方面。这里我们选择“color:red”表示红色字体颜色，选择“font-size:18px”表示字体大小为 18。
我们可以在花括号末尾的分号后添加以下声明之一来继续此列表：
- 字体粗细： 粗体表示粗体打印
- 字体样式：斜体
为了让 CSS 识别规则内的所有声明，我们必须始终用分号分隔它们。严格来说，没有必要在括号末尾加上括号，但通过养成加上括号的习惯，可以确保所做的任何扩展都能正确显示新添加的声明。
推荐阅读： 适用于 GraphQL 的 Shopify 学习套件。
安全第一：为什么你应该首先复制网上商店
我们为您提供的有关主题的最重要的 CSS 提示是什么？始终使用当前主题的副本，而不要使用原始主题。这样，您可以确保始终拥有一个正常运行的在线商店，无论您是否可以一次性完成转换工作，还是希望将更改分步纳入您的日常工作中。
如果您正在运营的 Shopify 商店已经上线，那么这一点就显得尤为重要：如果我们使用当前正在使用的主题，客户会将在线商店视为一个施工现场，在购买过程中，其颜色和形状可能会发生变化。这不仅会造成不愉快的购物体验，而且在最坏的情况下还可能导致客户无法完成购买。
因此，所有更改都隐形地保存在商店副本中，并将适配主题的激活视为重新启动。如果出现问题或者您不喜欢结果，只需单击几下即可通过备份恢复到以前的 Shopify 主题。
要创建主题的副本，请登录您的帐户并选择“在线商店”下的“主题”。在这里您可以找到您想要用作新设计基础的主题，然后单击“操作”下的“复制”按钮。然后我们就可以开始了。
如何更改 Shopify 商店的 CSS 代码
复制 Shopify 主题后，单击副本旁边的“操作”菜单中的“编辑代码”。这将带您进入 Shopify 源代码编辑器。您可以在“Assets”文件夹中查找主题的 CSS 文件。
如果您使用 Shopify 的默认主题，则该文件名为“theme.scss.liquid”。如果您使用不同的主题，这可能会有所不同，但您始终可以通过其名称包含“scss”或“css”来识别 CSS 文件。
您可以在此文件中对主题进行更改。要更改现有规则，您不一定非要在代码中找到它们：只需将新规则集放在文件末尾即可，因为特定选择器的最低规则总是会覆盖 CSS 中所有先前的规范。
当然，你不应该经常这样做。如果 CSS 中积累了太多未使用的代码，那么您的商店的加载时间迟早会受到影响。但如果您需要快速完成此操作或想要在决定是否进行更改之前测试几天，则可以使用此快速扩展。重要的是，您要记得稍后从 CSS 中删除不必要的代码。
适用于 Shopify 主题的两个简单 CSS 技巧
基本上，您不需要比这些 CSS 基础知识更多的东西来定制 Shopify 商店。现在您要做的就是找到源代码并在正确的位置插入适当的规则以实现所需的结果。
下面我们展示了两个使用 CSS 自定义主题的简单技巧：
- 更改字体颜色
- 放大按钮
如果您没有 CSS 经验，我们建议您从颜色开始，因为如果需要，您可以一键撤消此更改。严格来说，您不需要 CSS 代码来调整 Shopify Shop 中的字体颜色：您可以使用富文本编辑器，只需单击所需的颜色即可。
但是，即使是富文本编辑器也无法满足您建立梦想商店的所有需求 – 这时 CSS 就派上用场了。在尝试更复杂的自定义之前，更改字体颜色是一个很好的起点项目，可以在实践中测试您的基础知识。您还可以在闲暇时尝试创建模板。如果您只想更改单个页面而不是整个商店的样式表，则需要此功能。