shopify自定義商店模板有哪些擴展內容?-ESG跨境

shopify自定義商店模板有哪些擴展內容?

shopify新聞
shopify新聞
2022-03-28
點贊icon 0
查看icon 807

Shopify 模板提供許多設置和自定義選項。但是,您的模板可能不提供某些功能,或者您可能只是想進一步自定義模板。例如,您可能希望在商店中顯示產品評論,這可以通過安裝應用來實現(xiàn)。如果要擴展您的模板功能,您可以按照以下方式進行擴展。

擴展您的模板

Shopify 模板提供許多設置和自定義選項。但是,您的模板可能不提供某些功能,或者您可能只是想進一步自定義模板。例如,您可能希望在商店中顯示評論,這可以通過安裝應用來實現(xiàn)。如果要擴展您的模板功能,您可以按照以下方式進行擴展。

本頁相關主題

  • 添加自定義 HTML 或 Liquid

  • 安裝應用

  • 編輯模板代碼

添加自定義 HTML 或 Liquid

某些模板提供一些設置,讓您能夠添加 HTML 或 Liquid 代碼的代碼片段,這些代碼可在包含相關設置的模板、分區(qū)或塊中呈現(xiàn)。通過這些設置,您可以安全地將自定義代碼添加到在線商店,而無需直接編輯模板的代碼,這有助于確保您的模板符合自動升級條件。

您可以將這些設置用于以下任務:

  • 使用自定義 Liquid 分區(qū)插入適合您業(yè)務的 Liquid 變量。例如,您可以在產品頁面上包含物流政策。

  • 使用自定義 Liquid 分區(qū)添加將應用與模板集成所需的代碼。

若要了解模板是否有自定義 HTML 或 Liquid 選項,請參閱模板的文檔。

Liquid 設置僅允許您訪問有限的 Liquid 對象和標簽。若要了解可在 Liquid 設置中使用的對象和標簽,請參閱 Shopify.dev 上的 Liquid 設置文檔。

安裝應用

您可以安裝應用,以向您的模板中添加功能和集成。您可在 Shopify 應用商店上查找應用。

應用可以通過以下方式與您的模板集成:

  • 作為應用塊:通過應用塊,您可以準確地在模塊中要使用應用功能的位置添加應用功能。您可以通過模板編輯器添加、刪除和自定義應用塊。

    應用塊只能與 Online Store 2.0 模板一起使用。如果您使用復古模板,那么您應該閱讀應用描述和文檔,了解該應用是否與您的模板兼容。

  • 作為應用嵌入:應用嵌入是應用提供的元素,可在您的模板中浮動或以疊加層的形式顯示,也可在客戶看不到的情況下將代碼添加到您的在線商店。您可以通過模板編輯器啟用、禁用和自定義應用嵌入。

  • 通過更改您的模板代碼:一些應用直接將代碼注入您的模板代碼中,以便為您的模板添加功能。您可以使用應用設置或使用模板編輯器自定義應用。

    如果您的模板提供 Custom Liquid 部分,您或許可以將您的應用代碼添加到模板編輯器中的“自定義 Liquid”部分,而不是直接編輯您的模板代碼。

編輯模板代碼

您可以通過編輯模板代碼來對在線商店進行詳細更改。模板文件包含 Liquid(Shopify 的模板語言),以及 HTML、CSS、JSON 和 JavaScript。只有在您了解 HTML 和 CSS,并具備 Liquid 的相關基礎知識時,才可編輯模板的代碼。

如果您編輯模板的代碼,則可能會使其不符合自動升級的條件。只有在無法使用 HTML 或 Liquid 設置或 Shopify 應用進行所需更改的情況下,才應編輯模板的代碼。

如果您使用 Shopify 的免費模板,Shopify 支持團隊可以幫助您對模板代碼進行某些自定義。有關可用自定義項的列表,請參閱模板的文檔。詳細了解針對模板的支持。

您可以按照以下方式編輯您的模板代碼:

  • 直接在 Shopify 后臺中編輯代碼。

  • 使用  CLI 和 Shopify GitHub 集成等開發(fā)工具在本地編輯模板。

,請考慮聘請 Shopify 專家。

Extend your theme

Shopify themes offer many settings and customization options. However, there might be some features that your theme doesn't offer, or you might just want to further customize your theme. For example, you might want to display product reviews in your store, which you can do by installing an app. If you want to extend the functionality of your theme, you can do so in the following ways.

On this page

  • Add custom HTML or Liquid

  • Install an app

  • Edit your theme code

Add custom HTML or Liquid

Some themes offer settings that let you add snippets of HTML or Liquid code that can be rendered in the template, section, or block that contains the setting. These settings let you safely add custom code to your online store without editing your theme's code directly, which helps to ensure that your theme is eligible for automatic upgrades.

You might use these settings for the following tasks:

  • Use a Custom Liquid section to insert Liquid variables where they make sense for your business. For example, you might include your shipping policy on your product .

  • Use a Custom Liquid section to add the code that's required to integrate an app with your theme.

To learn whether your theme has a custom HTML or Liquid option, refer to your theme's documentation.

Liquid settings only allow you to access limited Liquid objects and tags. To learn about the objects and tags that you can use in a Liquid setting, refer to the Liquid setting documentation on Shopify.dev.

Install an app

You can install apps to add features and integrations to your theme. You can find apps on the Shopify App Store.

Online Store apps can integrate with your theme in the following ways:

  • As an app block: App blocks let you add app functionality exactly where you want to use it in your theme. App blocks can be added, removed, and customized through the theme editor.

    App blocks can only be used with Online Store 2.0 themes. If you use a vintage theme, then you should read the app listing and documentation to understand whether the app is compatible with your theme.

  • As an app embed: App embeds are app-provided elements that float or appear as an overlay in your theme, or add code to your online store without being visible to your customers. App embeds can be enabled, disabled, and customized through the theme editor.

  • By altering your theme code: Some apps inject code directly into your theme's code to add functionality to your theme. You might customize the app using the app settings, or using the theme editor.

    If your theme offers a Custom Liquid section, then you might be able to add your app code into a Custom Liquid section in the theme editor instead of editing your theme code directly.

Edit your theme code

You can edit your theme code to make detailed changes to your online store. Theme files contain Liquid, Shopify's templating language, along with HTML, CSS, JSON, and JavaScript. Edit the code for a theme only if you know HTML and CSS, and have a basic understanding of Liquid.

If you edit your theme's code, then you might make it ineligible for automatic upgrades. You should only edit your theme's code if you can't make the changes that you need using an HTML or Liquid setting or a Shopify app.

If you use a free theme from Shopify, then Shopify Support can help you to make certain customizations to your theme code. Refer to your theme's documentation for a list of available customizations. Learn more about support for themes.

You can edit your theme code in the following ways:

  • Edit code directly in the Shopify admin.

  • Edit your theme locally using development tools like Shopify CLI and the Shopify GitHub integration.



特別聲明:以上文章內容僅代表作者本人觀點,不代表ESG跨境電商觀點或立場。如有關于作品內容、版權或其它問題請于作品發(fā)表后的30日內與ESG跨境電商聯(lián)系。

搜索 放大鏡
韓國平臺交流群
加入
韓國平臺交流群
掃碼進群
歐洲多平臺交流群
加入
歐洲多平臺交流群
掃碼進群
美國賣家交流群
加入
美國賣家交流群
掃碼進群
ESG跨境專屬福利分享群
加入
ESG跨境專屬福利分享群
掃碼進群
拉美電商交流群
加入
拉美電商交流群
掃碼進群
亞馬遜跨境增長交流群
加入
亞馬遜跨境增長交流群
掃碼進群
亞馬遜跨境增長交流群
加入
亞馬遜跨境增長交流群
掃碼進群
拉美電商交流群
加入
拉美電商交流群
掃碼進群
ESG獨家招商-PHH GROUP賣家交流群
加入
ESG獨家招商-PHH GROUP賣家交流群
掃碼進群
《TikTok官方運營干貨合集》
《TikTok綜合運營手冊》
《TikTok短視頻運營手冊》
《TikTok直播運營手冊》
《TikTok全球趨勢報告》
《韓國節(jié)日營銷指南》
《開店大全-全球合集》
《開店大全-主流平臺篇》
《開店大全-東南亞篇》
《CD平臺自注冊指南》
通過ESG入駐平臺,您將解鎖
綠色通道,更高的入駐成功率
專業(yè)1v1客戶經理服務
運營實操指導
運營提效資源福利
平臺官方專屬優(yōu)惠

立即登記,定期獲得更多資訊

訂閱
聯(lián)系顧問

平臺顧問

平臺顧問 平臺顧問

微信掃一掃
馬上聯(lián)系在線顧問

icon icon

小程序

微信小程序

ESG跨境小程序
手機入駐更便捷

icon icon

返回頂部