現在、brooklynを使用しております。
トップバナーのスライドショーが 横表記で白文字となっておりますが、
下記のような、縦向きで黒表記（矢印なし）にカスタマイズしたいです。
カスタマイズ方法をご存知の方、ご教示頂けますと幸いでございます。
宜しくお願い致します。
Topic summary
ShopifyのBrooklynテーマで、トップバナーのスライドショーのナビゲーションを横・白・矢印付きから、縦向き・黒表示・矢印なしに変更したい要望。希望の見た目は画像で提示。
デモストアでの検証により、CSSの追記で「形だけ」縦配置と矢印非表示に近づける例が提示。主な変更点:
- hero__controlsの位置を左寄せし、中央揃え
- 矢印リストを非表示
- slick-dots（ページネーション）を絶対配置し、各項目を縦並びに変更
用語補足: slick-dotsはスライダーのドット型ページネーション、hero__controlsはヒーローバナーの操作要素。
ただしこの方法は「かなり無理やり」で推奨されず、HTMLからの修正が必要との見解。公式サポートやエキスパート／パートナーへの依頼が提案。
現時点で決定や完全な解決はなく、課題は継続中。次のアクションは、提示CSSの検証か、Shopifyサポートへの相談。
デモストア( https://brooklyn-theme-classic.myshopify.com/ )にて開発者ツールで試しましたら、一応以下のような記述の追加で形だけどうにかなりそうではありました。
.hero__controls {
width:auto;
height: auto;
top: 50%;
left: 20px;
right: auto;
bottom: auto;
}
.hero__controls > ul {
display:none;
}
.slick-slider .slick-dots{
bottom:auto;
position: absolute;
transform: translateY(-50%);
}
.slick-dots{
position: absolute;
transform: translateY(-50%);
}
.slick-dots > li {
display: block;
}
ただしかなり無理やりなのでお勧めはできず、HTMLなどから直していく必要があるかなと思います。
そのため以下のShopifyのサポートに相談したり、エキスパートやパートナーに依頼されることをお勧めします。
https://help.shopify.com/ja/manual/online-store/themes/theme-support#part-5ad7f21e8d34326a