Shopify基礎(chǔ)建站教程,獨(dú)立站裝修主題代碼設(shè)置

Shopify作為建站工具，它確實(shí)能夠讓我們非常便捷的建立網(wǎng)站并實(shí)現(xiàn)網(wǎng)站的各種功能。但是這樣的便捷也犧牲了一定的可自定義的空間。通俗的說，Shopify把各個(gè)功能都模塊化了，對于一些高級用戶來說，如果它需要一些特殊的功能，想修改代碼的話，就比較麻煩了。

在本小節(jié)中，我們以“去除詳情頁面上的社會(huì)化媒體分享按鈕”為例。學(xué)習(xí)在Shopify的框架內(nèi)的一些基本常用的前臺的HTML代碼和CSS代碼的修改。

第一步：在左側(cè)工具欄的“Online Store”中選擇“Themes”

第二步：在action里面找到“Edit code”，點(diǎn)擊進(jìn)入。

在這里我們能夠看到各種頁面的前臺的HTML代碼

第三步：假如我們要看一種頁面類型的HTML代碼，我們只需要點(diǎn)擊這個(gè)頁面模板的名稱即可。

這里我們以page（也就是Shopify里面的靜態(tài)頁面模板）為例，我們點(diǎn)擊page.liquid進(jìn)入。

接下來我們大致了解下這些HTML代碼，

{{ page.title }}

這段代碼的意思是靜態(tài)頁面所有的title都被設(shè)置為了H1標(biāo)簽。

{{ 'general.breadcrumbs.home' | t }}

這段代碼的意思是頁面上顯示面包屑導(dǎo)航。

這里不詳細(xì)說，我們只是對Shopify的頁面模板，也就是liquid以及HTML代碼有個(gè)初步了解。有進(jìn)一步想了解代碼的朋友們可以咨詢網(wǎng)站小哥（QQ：3298600936）。

第四步：我們進(jìn)入product.liquid，也就是產(chǎn)品頁面模板，去除產(chǎn)品頁面上的社會(huì)化媒體分享按鈕。

為了快速定位社會(huì)化分享媒體按鈕的位置，我們查找下“share”這個(gè)字，能夠發(fā)現(xiàn)如下代碼：

{%- if settings.show_share_btn and settings.share_type == '1' -%}

{%- assign gl_follow_social = false -%}

{%- elsif settings.show_share_btn and settings.share_type == '2' -%}

   {%- assign gl_follow_social = true -%}

這段代碼就是關(guān)于社會(huì)化媒體分享按鈕的，如果你實(shí)在不想要這些按鈕，就刪除這段代碼就好了。

如果你安裝了不同的Theme的話，會(huì)對你的代碼產(chǎn)生不同程度的改動(dòng)。你在修改代碼的時(shí)候就更應(yīng)該小心謹(jǐn)慎。本節(jié)只是為了讓有一定HTML和CSS基礎(chǔ)的同學(xué)指導(dǎo)應(yīng)該在哪里如何自定義一些HTML和CSS，千萬不要自己不懂的情況下亂改，以免網(wǎng)站出問題。

（來源：K哥聊出海）