已收藏,可在 我的资料库 中查看
关注作者
您可能还需要

Shopify基础建站教程,独立站装修主题代码设置

Shopify作为建站工具,它确实能够让我们非常便捷的建立网站并实现网站的各种功能。

Shopify基础建站教程,独立站装修主题代码设置

Shopify作为建站工具,它确实能够让我们非常便捷的建立网站并实现网站的各种功能。但是这样的便捷也牺牲了一定的可自定义的空间。通俗的说,Shopify把各个功能都模块化了,对于一些高级用户来说,如果它需要一些特殊的功能,想修改代码的话,就比较麻烦了。

在本小节中,我们以“去除详情页面上的社会化媒体分享按钮”为例。学习在Shopify的框架内的一些基本常用的前台的HTML代码和CSS代码的修改。

第一步:在左侧工具栏的“Online Store”中选择“Themes”

Shopify基础建站教程,独立站装修主题代码设置

第二步:在action里面找到“Edit code”,点击进入。

Shopify基础建站教程,独立站装修主题代码设置

在这里我们能够看到各种页面的前台的HTML代码

Shopify基础建站教程,独立站装修主题代码设置

第三步:假如我们要看一种页面类型的HTML代码,我们只需要点击这个页面模板的名称即可。

这里我们以page(也就是Shopify里面的静态页面模板)为例,我们点击page.liquid进入。

Shopify基础建站教程,独立站装修主题代码设置

接下来我们大致了解下这些HTML代码,

{{ page.title }}

这段代码的意思是静态页面所有的title都被设置为了H1标签。

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

这段代码的意思是页面上显示面包屑导航。

这里不详细说,我们只是对Shopify的页面模板,也就是liquid以及HTML代码有个初步了解。有进一步想了解代码的朋友们可以咨询网站小哥(QQ:3298600936)。

第四步:我们进入product.liquid,也就是产品页面模板,去除产品页面上的社会化媒体分享按钮。

为了快速定位社会化分享媒体按钮的位置,我们查找下“share”这个字,能够发现如下代码:

{%- 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 -%}

这段代码就是关于社会化媒体分享按钮的,如果你实在不想要这些按钮,就删除这段代码就好了。

如果你安装了不同的Theme的话,会对你的代码产生不同程度的改动。你在修改代码的时候就更应该小心谨慎。本节只是为了让有一定HTML和CSS基础的同学指导应该在哪里如何自定义一些HTML和CSS,千万不要自己不懂的情况下乱改,以免网站出问题。

(来源:K哥聊出海)

分享到:

--
评论
最新 热门 资讯 资料 专题 服务 果园 标签 百科 搜索
雨果跨境顾问
【爆单冲刺】Google爆单冲刺包
雨果跨境谷歌官方顾问

收藏

--

--

分享
K哥聊出海
分享不易,关注获取更多干货