如何使用液体创建自定义着陆页模板

在他们旅程中的某个时刻，几乎每个在线企业家都需要使用登录页来推广他们的产品，获取营销线索，或发起营销活动。ob欧宝娱乐app下载地址当这种需求出现时，开发人员有一个独特的机会，可以用他们在设计方面的专业知识来支持客户。

正如我们在最近的网页设计和开发博客文章在设计针对特定目标受众的登录页面时，“以用户为中心的设计”至关重要，开发人员在设计页面布局和页面功能时应考虑到客户的客户。

值得庆幸的是，通过对静态部分的仔细使用，可以在Shopify上构建可定制的着陆页面，可以由客户端填充内容。这意味着开发人员可以专注于页面的设计，而您的客户端有权决定哪些产品和副本将出现在登录页面上。

在Shopify上构建登录页面对于任何需要一个作品集网站来展示他们的作品和吸引新客户的开发人员也很有用。自定义部分可以添加到登录页面，显示案例研究，演示过去的项目，并概述您的技能。

在本文中，我将演示如何自定义现有主题并构建客户端可以用存储内容填充的登录页模板。我还将向您展示如何确保着陆页具有灵活的Liquid标签和部分设置，以及在运行活动时为您的客户提供最多的选择。

要了解更多帮助您开发过程的工具，请查看我们最喜欢的工具列表崇高的文本插件．

创建自定义页面模板

为主题创建登录页的第一步是为这个特定的活动创建一个独特的Liquid模板文件。通过使用替代模板，您可以创建一个特定的登录页Liquid文件，客户端可以从管理分配到页面，并从主题编辑器进行自定义。

有两种方法可以实现这一点。如果我使用的是Slate，我可以手动创建一个新文件，然后复制粘贴现有文件页面。液体的代码到这个文件中，并保存在模板文件夹中。如果我使用管理模板编辑器，我可以添加一个新模板，编辑器会自动提取默认模板代码。

对于这个例子，我希望我的附加元素出现在我输入到这个页面的文本下面，这样任何新的部分都将包含在Liquid对象下面{{页面。内容}}．但是，请随意尝试不同的页面内容和部分的位置，以找到最适合您的客户的安排。

注意:如果客户端希望托管多个登录页面，则需要为每个登录页面创建不同的页面模板，每个页面模板都有自己独特的部分。区段的现有限制是对一个区段所做的更改将影响该区段的所有迭代。这意味着需要创建单独的部分，以避免对一个部分的更改影响其他版本。

向登录页添加内容

接下来，我们需要确定您的客户端希望在他们的登录页面上显示什么样的内容。也许这是一个特定的产品，或者他们想强调的一个新系列，或者他们想引导人们去看的一篇博客文章。

在本例中，我将重点关注一个特定的集合，因此我将向该页添加一个特色集合部分。几乎所有主题都有一个现有的特色集合部分，通常通过主题编辑器在主页上访问。

这些现有的节通常是动态节，这允许将它们添加到主页，但也可以将它们作为静态节添加到其他页面。与代码段类似，可以在模板文件中使用液体标签。这是最常用的静态部分，如页眉和页脚，但我们可以使用这些来构建一个登录页面。

我在本例中使用的主题是Narrative，它有一个现有的动态部分，用于展示特色集合。一旦我在sections文件夹中找到了这个Liquid文件，我就可以将这段代码复制并粘贴到一个新的section中，并给它一个适当的名称，例如fall-featured-collection.liquid．

现在我可以通过删除部分设置中的预设来将其转换为静态部分。在我的例子中，这是我需要从section底部删除的JSON数组的一部分:

现在可以使用Liquid标记将其添加到我们创建的自定义页面模板中{% section 'fall-featured-collection' %}．

你可能还会喜欢:如何创建你的第一个Shopify主题部分．

在登陆页面上包括一份简报

时事通讯注册表单通常是登录页面的关键组成部分之一，因为客户可以将他们的受众吸引到该页面来收集线索。

一旦找到了主题现有的时事通讯部分，就可以按照将动态部分转换为静态部分的相同过程进行操作。我们需要创建一个包含时事通讯部分代码的新部分，然后删除预设，使其成为可以手动包含在自定义页面模板中的静态部分。

然而，对于通讯部分，我们可以添加一个选项来隐藏或显示通讯，让您的客户端选择是否显示此表单。客户可能更喜欢专注于产品或不同的行动呼吁，所以给这个选择，让你的客户自己做决定。

通过使用液体的控制流量标签使用节设置，我们可以创建基于节的设置隐藏或显示节的能力。我们可以创建这样的规则:

如果section.settings. {%show_newsletter== true %} code for newsletter {% endif %}

属性对应的节设置中创建一个复选框show_newsletter属性。这将用于从主题编辑器中打开和关闭时事通讯部分的可见性:

"type": "checkbox"， "id": "show_newsletter"， "label": "Show newsletter sign up"， "default": true

你可能还会喜欢:如何在Shopify主题开发中使用备用模板．

登陆页上的行动号召

登陆页最常见的功能之一是行动号召按钮，它允许客户端推动访问者对特定产品的参与，或执行特定的活动，如创建帐户或访问内容。

大多数主题通常不会有一个特定的部分来调用行动，但可以创建我们自己的自定义部分。我们在之前的网页设计和开发博客中已经探讨过这个问题．

虽然在您现有的主题中可能没有本机支持的操作调用部分，但在创建按钮时使用默认的类名是很重要的，以确保它们在整个主题中样式一致。

对于本例，我使用Narrative，次要样式按钮适合我正在创建的页面，因此我将使用类btn——二次在设计部分时。根据主题的不同，您将使用的类或id可能不同。

在该部分中，我添加了一个标题，商家可以在此标题中添加文本，位于“号召行动”按钮的上方。按钮本身的副本，以及按钮链接到的位置，可以在主题编辑器的节设置中分配。当这一切都设置好后，这是我的行动调用部分的代码:

同样，我们将添加允许客户端隐藏或显示此节的节设置。这给了商家更多的灵活性，当他们决定什么是重要的显示在登录页。

在本节中，我还在按钮上方添加了一个文本字段，以防客户端需要添加一些副本。如果您的行动调用需要任何额外的指示，这将非常有用。

找到你的新宠减价编辑器在我们的综述中。

把它们都放在一个自定义页面模板上

现在我们已经创建了一些静态部分，我们需要将它们包含在前面创建的自定义页面模板中。如前所述，我们使用部分标签将这些部分添加到我们的模板中，例如:{% section 'fall-featured-collection' %}．

添加了我们创建的三个节的节标记之后，将page.fall-landing-page.liquid模板看起来像这样:

现在当你的客户创建他们的登陆页面时，他们可以从管理员中选择他们需要的特定的登陆模板:

隐藏页面的页眉和页脚

设计登陆页的另一个选择是删除页眉导航和页脚。这减少了访问者的选择数量，并将重点放在页面内容和行动呼吁上。

可以使用Liquid的控制流标签设置条件，以阻止在我们新创建的登陆页面上加载页眉和页脚。这也有提高页面加载速度的额外好处。

在我们的例子中，我们可以使用an除非标签只在当前页面不是登录页时才包含标题部分。我们会把这个条件加到我们的theme.liquid文件，其中头部分包括为{% section 'header' %}．

为了达到这种效果，我们设置了一个针对页面标题的“unless语句”。液体模板文件。我们可以用包含操作符来创建加载页眉的条件，除非页面模板的标题包含" landing-page "。

当这个设置完成后，代码看起来像这样:

{%除非模板。后缀包含“landing-page”%}
{% section 'header' %}
{% endunless %}

同样，页脚也可以用“unless语句”来包装theme.liquid文件:

{%除非模板。后缀包含“landing-page”%}
{% section 'footer' %}
{% endunless %}

一旦实现了这一点，页眉顶部导航和页脚将不会出现在您的登录页面，或在文件名中带有“landing-page”的页面上。然而，页眉和页脚将出现在店面的所有其他页面上。

定制登录页

最后，这个登录页可以填充产品、时事通讯注册表单，以及当客户导航到主题编辑器时发出的行动呼吁。页面选择器允许用户访问特定的登陆页面，并编辑与之相关的设置。

一旦你用客户需要的静态部分类型设置了着陆页，他们就可以用他们的集合、产品、博客文章和任何他们需要的其他内容来填充它。这种不那么固执己见的方法意味着您的客户可以决定突出显示哪些内容，而您可以专注于设计一个视觉上令人愉悦和高转化率的登录页面。

要了解此登录页对客户的外观和感觉，您可以访问我在这里建立的例子。

在登陆页上更有创意

您可以自由地尝试现有主题的原生部分，或者创建具有独特功能和布局的全新部分。可以定制一些现有的动态部分，使它们更适合登陆页面。

正如我们所看到的，通过添加一个选项来显示section，客户端可以在着陆页上隐藏不需要的元素。当客户启动他们的登录页面时，这种灵活性对他们来说是至关重要的。

你为什么要建立登陆页面?请在下面的评论中告诉我们!