Hi all,
Is there a way to centre align the recommended products block vertically? Our images are different ratios for a few reasons so aligning vertically would look much neater.
Thanks so the help in advance!
Brooklyn version 17.6.0
https://raw-chocolate-staging.myshopify.com/
Product Recommendations code:
{%- if section.settings.show_product_recommendations -%}
{%- if recommendations.performed -%}
{%- if recommendations.products_count > 0 -%}
<div class="product-recommendations">
<div class="section-header text-center">
{%- if section.settings.heading != blank -%}
<h2 class="h1 section-header__title">{{ section.settings.heading | escape }}</h2>
<hr class="hr--small">
{%- endif -%}
</div>
<div class="grid-uniform">
{% assign grid_item_width = 'small--one-half medium--one-half large--one-quarter' %}
{%- for product in recommendations.products -%}
{% include 'product-grid-item' %}
{%- endfor -%}
</div>
</div>
{%- endif -%}
{%- else -%}
<div data-base-url="{{ routes.product_recommendations_url }}" data-product-id="{{ product.id }}" data-section-id="{{ section.id }}" data-section-type="product-recommendations"></div>
{%- endif -%}
{%- endif -%}
{% schema %}
{
"name": {
"cs": "Doporučení produktů",
"da": "Produktanbefalinger",
"de": "Produktempfehlungen",
"en": "Product recommendations",
"es": "Recomendaciones de productos",
"fi": "Tuotesuositukset",
"fr": "Recommandations de produits",
"it": "Raccomandazioni sui prodotti",
"ja": "商品の推奨",
"ko": "제품 권장 사항",
"nb": "Produktanbefalinger",
"nl": "Productaanbevelingen",
"pl": "Rekomendacje produktu",
"pt-BR": "Recomendações de produtos",
"pt-PT": "Recomendações de produtos",
"sv": "Produktrekommendationer",
"th": "คำแนะนำสินค้า",
"tr": "Ürün önerileri",
"vi": "Đề xuất sản phẩm",
"zh-CN": "产品推荐",
"zh-TW": "商品推薦"
},
"settings": [
{
"type": "checkbox",
"id": "show_product_recommendations",
"label": {
"cs": "Zobrazit dynamická doporučení",
"da": "Vis dynamiske anbefalinger",
"de": "Dynamische Empfehlungen anzeigen",
"en": "Show dynamic recommendations",
"es": "Mostrar recomendaciones dinámicas",
"fi": "Näytä dynaamiset suositukset",
"fr": "Afficher les recommandations dynamiques",
"it": "Mostra raccomandazioni dinamiche",
"ja": "動的推奨を表示する",
"ko": "동적 권장 사항 표시",
"nb": "Vis dynamiske anbefalinger",
"nl": "Dynamische aanbevelingen weergeven",
"pl": "Pokaż dynamiczne rekomendacje",
"pt-BR": "Exibir recomendações dinâmicas",
"pt-PT": "Mostrar recomendações dinâmicas",
"sv": "Visa dynamiska rekommendationer",
"th": "แสดงคำแนะนำแบบไดนามิก",
"tr": "Dinamik önerileri göster",
"vi": "Hiển thị đề xuất động",
"zh-CN": "显示动态推荐",
"zh-TW": "顯示動態推薦"
},
"info": {
"cs": "Dynamická doporučení se v průběhu času mění a zlepšují. [Další informace](https://help.shopify.com/en/themes/development/recommended-products)",
"da": "Dynamiske anbefalinger ændres og forbedres med tiden. [Få mere at vide](https://help.shopify.com/en/themes/development/recommended-products)",
"de": "Dynamische Empfehlungen werden im Laufe der Zeit angepasst und verbessert. [Mehr Informationen](https://help.shopify.com/en/themes/development/recommended-products)",
"en": "Dynamic recommendations change and improve with time. [Learn more](https://help.shopify.com/en/themes/development/recommended-products)",
"es": "Las recomendaciones dinámicas cambian y mejoran con el tiempo. [Más información](https://help.shopify.com/en/themes/development/recommended-products)",
"fi": "Dynaamiset suositukset muuttuvat ja paranevat ajan myötä. [Lisätietoja](https://help.shopify.com/en/themes/development/recommended-products)",
"fr": "Les recommandations dynamiques changent et s'améliorent avec le temps. [En savoir plus](https://help.shopify.com/en/themes/development/recommended-products)",
"it": "Le raccomandazioni dinamiche cambiano e migliorano nel tempo. [Maggiori informazioni](https://help.shopify.com/en/themes/development/recommended-products)",
"ja": "動的推奨は時間とともに変化し改善します。[詳しくはこちら](https://help.shopify.com/en/themes/development/recommended-products)",
"ko": "동적 권장 사항은 시간이 지나면서 변하고 개선됩니다. [자세히 알아보기](https://help.shopify.com/en/themes/development/recommended-products)",
"nb": "Dynamiske anbefalinger endrer seg og forbedres med tiden. [Finn ut mer](https://help.shopify.com/en/themes/development/recommended-products)",
"nl": "Dynamische aanbevelingen veranderen en verbeteren mettertijd. [Meer informatie](https://help.shopify.com/en/themes/development/recommended-products)",
"pl": "Dynamiczne rekomendacje są zmieniane i ulepszane. [Dowiedz się więcej](https://help.shopify.com/en/themes/development/recommended-products)",
"pt-BR": "As recomendações dinâmicas mudam e melhoram com o tempo. [Saiba mais](https://help.shopify.com/en/themes/development/recommended-products)",
"pt-PT": "As recomendações dinâmicas mudam e melhoram com o tempo. [Saiba mais](https://help.shopify.com/en/themes/development/recommended-products)",
"sv": "Dynamiska rekommendationer ändras och förbättras med tiden. [Läs mer](https://help.shopify.com/en/themes/development/recommended-products)",
"th": "คำแนะนำแบบไดนามิกนั้นเปลี่ยนแปลงและถูกปรับปรุงให้ดีขึ้นตลอดเวลา [ดูข้อมูลเพิ่มเติม](https://help.shopify.com/en/themes/development/recommended-products)",
"tr": "Dinamik önerileri zamanla değişir ve gelişir. [Daha fazla bilgi edinin](https://help.shopify.com/en/themes/development/recommended-products)",
"vi": "Đề xuất động thay đổi và cải thiện theo thời gian. [Tìm hiểu thêm](https://help.shopify.com/en/themes/development/recommended-products)",
"zh-CN": "动态推荐会随着时间而变化和改进。[了解详细信息](https://help.shopify.com/en/themes/development/recommended-products)",
"zh-TW": "動態推薦會隨著時間改變與改進。[深入瞭解](https://help.shopify.com/en/themes/development/recommended-products)"
},
"default": true
},
{
"type": "text",
"id": "heading",
"label": {
"cs": "Nadpis",
"da": "Overskrift",
"de": "Überschrift",
"en": "Heading",
"es": "Título",
"fi": "Otsake",
"fr": "En-tête",
"it": "Heading",
"ja": "見出し",
"ko": "제목",
"nb": "Overskrift",
"nl": "Kop",
"pl": "Nagłówek",
"pt-BR": "Título",
"pt-PT": "Título",
"sv": "Rubrik",
"th": "ส่วนหัว",
"tr": "Başlık",
"vi": "Tiêu đề",
"zh-CN": "标题",
"zh-TW": "標題"
},
"default": {
"cs": "Mohlo by se vám také líbit",
"da": "Du vil muligvis også synes om",
"de": "Das könnte dir auch gefallen",
"en": "You may also like",
"es": "También te puede interesar",
"fi": "Saatat pitää myös näistä",
"fr": "Vous pourriez aimer également",
"it": "Potrebbero interessarti anche",
"ja": "あなたへのおすすめ",
"ko": "회원님도 좋아할 것입니다.",
"nb": "Kanskje du også liker",
"nl": "Wellicht vind je dit ook leuk",
"pl": "Może Ci się spodobać również",
"pt-BR": "Talvez você também goste de",
"pt-PT": "Também poderá gostar de",
"sv": "Du kanske också gillar",
"th": "คุณอาจจะชอบ",
"tr": "Şunlar da hoşunuza gidebilir:",
"vi": "Có thể bạn cũng thích",
"zh-CN": "您可能还喜欢",
"zh-TW": "您也可能喜歡"
}
}
]
}
{% endschema %}
