shopify 頁面模板添加自定義模塊


shopify新建的頁面進行布局,但主題內置的模板無法滿足需求怎么辦。自己建一個模塊就好了。

首先,找到要修改的文件,以contact頁面為例,contact頁面使用的模板是page.contact.liquid。如下圖所示,需要跳轉到page-contact-template

 

在page-contact-template.liquid文件需要修改的地方只有一個。在{% schema %}{% endschema %}里,在block的數組里再添加一個block,如下代碼,需要注意的是"type"這個屬性,其他的就按照自己想要的添加就好了。

{
"type": "hero-video",
"name": "Video hero",
"settings": [
{
"type": "textarea",
"id": "title",
"label": "Heading",
"default": "Bring your\nbrand to life."
}]

}

在page-contact-template.liquid修改了代碼后,就需要添加一個snippets文件,命名隨意,明確用處就好,例如page-block-hero-video.liquid。然后在這個文件里進行布局和樣式設置。例如:

<div class="container">

<p>{{ block.settings.title }}</p>

</div>

 

然后,在page-contact-template.liquid找到紅框里面的內容,各個主題不同,應該會有點差別,需要跳轉到page-template-blocks.liquid文件。

如下紅框所示,復制粘貼添加一個判定條件。

when ‘xxx’ (xxx里填入的內容是在page-contact-template.liquid添加的block的type,在我這的例子是hero-video )

render ' xxxx' (xxx里填的是你設置布局的snippets文件,在我例子就是page-block-hero-video.liquid)

所以

when 'hero-video'

render 'page-block-hero-video' ,block:block

 

 

最后回到主題自定義界面,就會發現多出了自己添加的block了。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM