免費(fèi)參與·100+跨境活動(dòng) 
免費(fèi)下載·4000+跨境資料 
免費(fèi)學(xué)習(xí)·2000+直播課程 
免費(fèi)加入·15萬(wàn)+賣(mài)家交流群 
2020-04-03 17:12
Shopify作為建站工具，它確實(shí)能夠讓我們非常便捷的建立網(wǎng)站并實(shí)現(xiàn)網(wǎng)站的各種功能。但是這樣的便捷也犧牲了一定的可自定義的空間。通俗的說(shuō)，Shopify把各個(gè)功能都模塊化了，對(duì)于一些高級(jí)用戶(hù)來(lái)說(shuō)，如果它需要一些特殊的功能，想修改代碼的話(huà)，就比較麻煩了。
在本小節(jié)中，我們以“去除詳情頁(yè)面上的社會(huì)化媒體分享按鈕”為例。學(xué)習(xí)在Shopify的框架內(nèi)的一些基本常用的前臺(tái)的HTML代碼和CSS代碼的修改。
第一步：在左側(cè)工具欄的“Online Store”中選擇“Themes”
第二步：在action里面找到“Edit code”，點(diǎn)擊進(jìn)入。
在這里我們能夠看到各種頁(yè)面的前臺(tái)的HTML代碼
第三步：假如我們要看一種頁(yè)面類(lèi)型的HTML代碼，我們只需要點(diǎn)擊這個(gè)頁(yè)面模板的名稱(chēng)即可。
這里我們以page（也就是Shopify里面的靜態(tài)頁(yè)面模板）為例，我們點(diǎn)擊page.liquid進(jìn)入。
接下來(lái)我們大致了解下這些HTML代碼，
{{ page.title }}
這段代碼的意思是靜態(tài)頁(yè)面所有的title都被設(shè)置為了H1標(biāo)簽。
{{ 'general.breadcrumbs.home' | t }}
這段代碼的意思是頁(yè)面上顯示面包屑導(dǎo)航。
這里不詳細(xì)說(shuō)，我們只是對(duì)Shopify的頁(yè)面模板，也就是liquid以及HTML代碼有個(gè)初步了解。有進(jìn)一步想了解代碼的朋友們可以咨詢(xún)網(wǎng)站小哥（QQ：3298600936）。
第四步：我們進(jìn)入product.liquid，也就是產(chǎn)品頁(yè)面模板，去除產(chǎn)品頁(yè)面上的社會(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à)，會(huì)對(duì)你的代碼產(chǎn)生不同程度的改動(dòng)。你在修改代碼的時(shí)候就更應(yīng)該小心謹(jǐn)慎。本節(jié)只是為了讓有一定HTML和CSS基礎(chǔ)的同學(xué)指導(dǎo)應(yīng)該在哪里如何自定義一些HTML和CSS，千萬(wàn)不要自己不懂的情況下亂改，以免網(wǎng)站出問(wèn)題。
（來(lái)源：K哥聊出海）
