Shopify Styling

shopifyのCSSでページ識別子を取得する方法はありますか？Shopify Styling

私はすべてのページではなく、特定のページをショップでスタイリングしたいと思います。

だから私はあなたがこのようなものを使用することができますホームページや私が構築したページ、ブログページやショッピングページなどのいずれか

2016-04-09 Anonymous

、ページを指定したい：

theme.liquidで<body>を交換してください

<body class="{{ template }} {{ page.handle }}{% if template == 'collection' %}{{ collection.handle }}{% endif %}{% if template == 'product' %}{{ product.title | handleize }}{% endif %}{% if template == 'blog' %}{{ blog.handle }}{% endif %}{% if template == 'article' %}{{ article.title | handleize }}{% endif %}">

ページのbody要素にクラスを追加するには、次のようにします。

{{ template }}

は、このホームページのための例インデックスのために（テンプレートの名前を返す、ブログをブログページ、コレクションのために：

はそれを打破するには、ここで私がやっているものですショップページなど）

{{ page.handle }}

は、それぞれの固有のページ（約-たち、接触-たちを...ページのみではなく、コレクション、ブログ、製品）

012のハンドルを返します。

{% if template == 'collection' %}{{ collection.handle }}{% endif %}{% if template == 'product' %}{{ product.title | handleize }}{% endif %}

ページが収集{% if template == 'collection' %}とページが製品{% if template == 'product' %}、コレクション{{ collection.handle }}とhandleizeフィルタ{{ product.title | handleize }}と製品のページへのタイトルのためにハンドルを追加している場合であればここで私がチェックしています。私は、製品が通常の方法でハンドルを返さないので、私はページをチェックし、代わりにタイトルを使用しています。コレクションをチェックしないと、製品ページにも追加されます。

{% if template == 'blog' %}{{ blog.handle }}{% endif %}{% if template == 'article' %}{{ article.title | handleize }}{% endif %}

この1つのロジックは、コレクション/製品のものと同じです。

上記を設定したら、各ページのボディクラスをターゲットにして、そのようにスタイルを設定できます。

出典

2016-04-09 07:11:05 drip

よく書かれた答え。 – HymnZ

Shopifyで新しいページテンプレートを追加できます。必要に応じてカスタマイズすることができます。終了したら、shopify adminパネルからページテンプレートを選択することができます。

ページの代替テンプレートを作成します。 Shopify管理者からオンラインストアをクリックし、テーマをクリックしてください

編集するテーマを見つけて、...ボタンをクリックし、HTML/CSSの編集をクリックします。

[テンプレート]フォルダの下にある[新しいテンプレートを追加]リンクをクリックします。

新しいテンプレート（ページや製品など）に適切なオプションを選択して、テンプレートに意味のある名前を付けます（たとえば、page.no-sidebarなど）。

通常どおりに新しいテンプレートを編集して保存します。

代替テンプレートが作成されると、テンプレートドロップダウンに表示されます。したがって、製品の代替テンプレートを作成した場合、各製品ページの下部にある新しいテンプレートセクションでテンプレートを選択するオプションが表示されます。

出典

2016-08-22 15:55:47

答えて

関連する問題