使用密码自定义Shopify密码页面。液体模板

在某些情况下，您需要为自己或客户的Shopify商店启用密码保护。这可能是因为站点仍在构建和测试中，或者您需要对主题进行快速更改。也许你想调整一些产品收藏，或者它可能是你的封闭式批发业务的永久固定装置。

默认情况下，Shopify允许您将自定义消息(可以包括HTML)添加到默认密码保护页面，并将显示此消息以及允许访问商店的默认登录表单。默认模板还为店主提供了访问Shopify管理的链接。

这个页面功能齐全，运行良好。但是，如果您需要一个长期的解决方案，您可能希望投入一些时间并创建自己的密码页面。您可以通过自定义password.liquid模板。我经常发现，即使是经验丰富的主题开发人员也不知道这个模板，但谢天谢地，它很容易设置。

登陆页是市场营销的重要组成部分。ob欧宝娱乐app下载地址了解更多关于如何构建自定义的信息着陆页．

创建自定义密码。液体模板

有两种方法可以创建模板。第一种，也是最简单的，是使用在线主题编辑器。这是一个很短的过程(见下面的步骤和图片):

1. 在“模板”下，单击“添加新模板”。
2. 在“创建新模板”下拉菜单中，选择“密码”。
3. 单击“创建模板”。

这将导致一个新的password.liquid文件被添加到模板目录。你会注意到该文件有几个关键组件:

1. {%布局无%}已应用，这允许我们设计的页面没有默认theme.liquid正在应用布局文件。
2. 因为我们没有使用布局文件，所以包含了Doctype和HTML元素。
3. 使用内联CSS，因为当存储受到密码保护时，无法访问资产文件(不包括图像)。
4. 一种液体如果语句，以显示商家的密码信息，如果Shopify管理中为空白，则显示默认信息。
5. 在Liquid中生成一个表单，其中包含密码和提交的标准输入(示例如下)。

第二种方法是添加一个名为password.liquid到您的主题的模板文件夹，并上传它(连同所有其他主题文件)通过Shopify管理员或者您选择的部署工具。

你可能还喜欢:如何在Shopify主题中使用Liquid的“case/when”控制标签

模板组件

与所有Shopify模板一样，的password.liquid模板是一个空白画布。你可以根据需要添加多少。您可以简单地将页面与商店的品牌(类型，颜色，徽标等)内嵌，或者您可以包括以下任何组件，这些组件通常出现在“即将推出”和“密码保护”页面上:

• 显示发射日期、分钟和小时的倒计时计时器
• 电子邮件时事通讯注册表单
• 即将推出的产品的预告视频
• 链接到社交媒体账户
• 一整页的背景来展示流行的产品

无论您采用哪种方法，下面的两个代码示例在定制密码模板时可能会很有用。

1.显示密码消息

这个示例检查是否存在密码消息，并确保它不是一个空字符串(为了更好地测量)。如果条件不满足，则会显示默认的“此商店将很快开业……”段落。

{%如果商店。Password_message和shop。Password_message != " %} {{shop。password_message}} {% else %} 
商店即将开业…
 {% endif %}

如果你不需要默认消息，你也可以这样处理它:

{%除非商店。Password_message == blank %} {{shop。Password_message}} {% endunless %}

2.显示密码表单

多亏了Liquid表单帮助器，如果需要的话，可以很容易地生成一个登录框。此示例还包括任何表单相关错误的输出。您还可以自定义显示这些错误消息的方式。有关如何做到这一点的更多信息，请参见Shopify文档．

{%表单'storefront_password' %}{{表单。errors | default_errors}} 使用密码进入存储:   {% endform %}

当然，你可以选择不包含这些元素——这完全取决于你和你的需求。

记住要点

• 如果一个password.liquid文件存在，则无论其内容如何，都将显示该文件。
• 而图像可以通过液体访问asset_url过滤器，所有的CSS和JS都必须写在模板中，因为存储在主题中的资源将不可用。
• 您可以选择包含或不包含密码消息—没有必要这样做。
• {% form 'storefront_password' %}如果您希望包含登录表单，则可以使用。

有关password.liquid模板可在Shopify文档．

您是否为自己或客户创建了品牌密码页面?请在下面的评论中分享链接或截图。