ShopifyにカスタムCSSとJSを追加する

私は、Shopifyのページの垂直タブを 'Atlantic'テーマを使って取得する作業をしています。このテーマにはデフォルトで垂直タブがありませんので、私は外部JSとCSS "jquery-jvert-tabs"を使用しました。ShopifyにカスタムCSSとJSを追加する

私はJSファイルとCSSファイルをアセットとしてアップロードすると、それらを使用したいページにリンクする方法と、それ以降のページでこれらを使用する方法を教えてください特定のスタイル要素もそこにありますか？

出典

2013-12-09 gagneet

は単に資産フォルダ内の自分のfilename.jsファイルをアップロードします。

、あなたのtheme.liquid頭セクションに次のようにドロップ：ところで

{{ 'filename.js' | asset_url | script_tag }}

、あなたはあなたのファイルの名前を変更し、

filename.js.liquid

幸運を.liquid拡張子を追加する必要があります！

出典

2014-01-05 02:36:32 JCharette

'.liquid'拡張を追加する利点は何ですか？ – Ronnie

@ r3wt oh、ok完璧です。あなたのOS全体が '.liquid'拡張でなければなりません。 – Ronnie

@Ronnie .liquid拡張子を使用すると、jsとcssファイルに液体を使用することができます。 – JCharette

私が正しく理解していれば、asset_url filterはあなたが探しているものです。

.liquidファイルにJSファイルをインクルードするには、使用：

{{ 'script.js' | asset_url | script_tag }}

とCSSファイル：

{{ 'style.css' | asset_url | stylesheet_tag }}

出典

2013-12-09 11:50:44

このSteph-Sharpのアップデートをありがとう、私はこれらのファイルをテーマではなく "ページ"に含めるようにしていました。私はasset_urlを使ってみましたが、そこではうまくいきませんでした。 – gagneet

@gagneet "liquid_url"フィルタは.liquidファイルで使うことができるので、page.liquidでうまく動作するはずです。それでも問題が残っていると、コードの一部を投稿する可能性があります。 –

グローバルな名前空間を汚染したくない場合は、JavaScriptまたはCSSを特定の領域に制限することができます。

Shopifyは単純なif文をページハンドルとともに使用します（www.foo.com/abcd/barの場合は "bar"がハンドルになります）。

{% if page.handle == "bar" %} 
    {{ 'your_custom_javascript.js' | asset_url | script_tag }} 
    {{ 'your_custom_css.css' | asset_url | stylesheet_tag }} 
{% endif %}

これは、特定のページを少し変更したい場合に非常に便利です。

出典

2016-11-21 11:38:35

ShopifyにカスタムCSSとJSを追加する

答えて

関連する問題