ブルックリンテーマfor shopify

Question

私は現在Shopifyにサブスクリプションしており、 "ブルックリン"テーマを使用しています。基本的には、商品ページに表示される画像を、スライドショー形式で表示するのではなく、スクロールして表示する代わりに、スライドショー形式で表示することができます。誰でも私に手を差し伸べるこのテーマの経験がありますか？大変感謝しています。

Answer 1

あなたが達成したいことは、このリンクの "Helpful Human"の回答で説明されています。 https://ecommerce.shopify.com/c/ecommerce-design/t/change-product-photos-to-thumbnails-under-main-image-in-brooklyn-theme-272292

私はブルックリンのテーマを変更して製品を変更しました。特定の変更を行う必要があります。

1. ショップ管理者からクラシックテーマをインストールします（公開しません）。
2. [テーマ]> [クラシックテーマ]プルダウンで[HTML/CSSの編集]をクリックします。
3. アセットフォルダを開き、timber.js.liquidファイルをクリックします。
4. 別のタブで、ブルックリンテーマのHTML/CSSを開きます。 （これを行う前にバックアップを取ってください）、ブルックリンテーマの 'theme.js.liquid'ファイルを編集してください。
5. クラステーマtimber.jsで、timber.productImageSwitch（）というコードの行が表示されます。 init関数内にあります。これが私たちが必要とする機能です。この行をコピーしてtheme.jsファイルの同じtimber.init関数に貼り付けてください
6. また、ファイルの下にある実際の機能コード（175〜207行目）をコピーする必要があります。正しいコードを取得していることを確認するには、productImageSwitchのページ（cmd + F）を検索すると、関連する関数とswitchImage関数が表示されます。これらの機能をすべてコピーしてtheme.jsに残してください。 theme.jsファイル（ブルックリンのテーマ）で今
、 Shopify.Image.switchImage(newImg, el, timber.switchImage);
1. JSの最後のピースあなたはよと、この行を置き換えライン

   Shopify.Image.switchImage(newImg, el, theme.showVariantImage);

を見つけますコピーしたいのは、timber.cache内のProduct Pageコメントの下の23行目と27行目です。以下の両方の行をtimber.js（Classic）からtheme.js（Brooklyn）にコピーしてください。 $productImageWrap: $('#ProductPhoto'), $thumbImages: $('#ProductThumbs').find('a.product-single__thumbnail'), 注：末尾のカンマを覚えておいてください。

8. 最後に、サムネイルに関連するproduct.liquidテンプレートからマークアップをコピーしたいと思うでしょう。これは "{％if product.images.size> 1％}"と関連する "{％endif％}"ステートメントから始まります。
9. それです。あなたはどのようにマークアップをスタイルすることができますが、イメージをクリックすると、ページを更新せずに紹介画像を交換する必要があります。動作しない場合は、ブラウザのコンソールでエラーを確認してください。コードをコピーして貼り付けると、機能全体を壊すことができる必要なカンマや終了タグ​​を見逃すことになります。これには細心の注意が必要です。

さらなる助けが必要な場合は、ショップにリンクを張ってください。