{% comment %}
Section: Press Logos
Description: Grille/carrousel de logos de presse avec liens externes.
{% endcomment %}
<section
id="section-press-logos-{{ section.id }}"
class="shopify-section section-press-logos"
style="
--pl-bg: {{ section.settings.bg | default: '#002645' }};
--pl-pt: {{ section.settings.padding_top | default: 30 }}px;
--pl-pb: {{ section.settings.padding_bottom | default: 30 }}px;
--pl-maxw: {{ section.settings.max_width | default: 1200 }}px;
--pl-gap-d: {{ section.settings.gap_desktop | default: 70 }}px;
--pl-gap-m: {{ section.settings.gap_mobile | default: 40 }}px;
--pl-logo-h: {{ section.settings.logo_height | default: 40 }}px;
--pl-opacity: {{ section.settings.opacity | default: 70 | divided_by: 100.0 }};
--pl-container-pad: {{ section.settings.container_padding | default: 20 }}px;
"
>
<div class="press-logos-section{% if section.settings.custom_bg %} has-custom-bg{% endif %}">
<div class="press-logos-container">
{% if section.settings.heading != blank %}
<h3 class="press-logos-heading">{{ section.settings.heading }}</h3>
{% endif %}
<div class="press-logos-wrapper">
{% for block in section.blocks %}
{% assign img = block.settings.image %}
{% if img != blank %}
{% assign alt_txt = block.settings.alt | default: img.alt | default: 'Logo presse' %}
<div class="press-logo-item" {{ block.shopify_attributes }}>
{% if block.settings.link != blank %}
<a
href="{{ block.settings.link }}"
class="press-logo-link"
{% if section.settings.open_new_tab %}target="_blank" rel="noopener"{% endif %}
aria-label="{{ alt_txt }}"
>
{{ img
| image_url: width: 600
| image_tag:
alt: alt_txt,
loading: 'lazy',
class: 'press-logo-img',
widths: '200, 300, 400, 600'
}}
</a>
{% else %}
{{ img
| image_url: width: 600
| image_tag:
alt: alt_txt,
loading: 'lazy',
class: 'press-logo-img',
widths: '200, 300, 400, 600'
}}
{% endif %}
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
<style>
#section-press-logos-{{ section.id }} .press-logos-section {
padding-top: var(--pl-pt);
padding-bottom: var(--pl-pb);
{% if section.settings.custom_bg %}background-color: var(--pl-bg);{% endif %}
}
#section-press-logos-{{ section.id }} .press-logos-container {
max-width: var(--pl-maxw);
margin: 0 auto;
padding-left: var(--pl-container-pad);
padding-right: var(--pl-container-pad);
}
#section-press-logos-{{ section.id }} .press-logos-heading {
margin: 0 0 18px 0;
font-size: clamp(16px, 2.2vw, 22px);
line-height: 1.25;
font-weight: 600;
text-align: center;
color: {{ section.settings.heading_color }};
}
#section-press-logos-{{ section.id }} .press-logos-wrapper {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: var(--pl-gap-d);
}
#section-press-logos-{{ section.id }} .press-logo-item { flex-shrink: 0; }
#section-press-logos-{{ section.id }} .press-logo-link { display: inline-block; text-decoration: none; }
#section-press-logos-{{ section.id }} .press-logo-img {
height: var(--pl-logo-h);
width: auto;
object-fit: contain;
{% if section.settings.grayscale %}filter: grayscale(100%);{% endif %}
opacity: var(--pl-opacity);
transition: transform .25s ease, filter .25s ease, opacity .25s ease;
}
{% if section.settings.hover_effect %}
#section-press-logos-{{ section.id }} .press-logo-img:hover,
#section-press-logos-{{ section.id }} .press-logo-link:hover .press-logo-img {
{% if section.settings.grayscale %}filter: grayscale(0%);{% endif %}
opacity: 1;
transform: translateY(-1px);
}
{% endif %}
@media (max-width: 768px) {
#section-press-logos-{{ section.id }} .press-logos-section {
padding-top: {{ section.settings.padding_top_mobile | default: 20 }}px;
padding-bottom: {{ section.settings.padding_bottom_mobile | default: 10 }}px;
}
#section-press-logos-{{ section.id }} .press-logos-container { padding-left: 15px; padding-right: 15px; }
#section-press-logos-{{ section.id }} .press-logos-wrapper {
gap: var(--pl-gap-m);
{% if section.settings.mobile_scroll %}
overflow-x: auto; justify-content: flex-start; flex-wrap: nowrap; padding-bottom: 10px;
scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
{% endif %}
}
{% if section.settings.mobile_scroll %}
#section-press-logos-{{ section.id }} .press-logos-wrapper::-webkit-scrollbar { display: none; }
#section-press-logos-{{ section.id }} .press-logo-item { flex: 0 0 auto; scroll-snap-align: start; }
{% endif %}
#section-press-logos-{{ section.id }} .press-logo-img { max-width: 70vw; }
}
</style>
</section>
{% schema %}
{
"name": "Presse – Logos",
"tag": "section",
"class": "section-press-logos",
"settings": [
{ "type": "text", "id": "heading", "label": "Titre (optionnel)", "default": "Ils parlent de nous" },
{ "type": "color", "id": "heading_color", "label": "Couleur du titre", "default": "#ffffff" },
{ "type": "checkbox", "id": "custom_bg", "label": "Activer la couleur de fond personnalisée", "default": true },
{ "type": "color", "id": "bg", "label": "Couleur de fond", "default": "#002645" },
{ "type": "range", "id": "padding_top", "label": "Padding haut (desktop)", "min": 0, "max": 120, "step": 2, "unit": "px", "default": 30 },
{ "type": "range", "id": "padding_bottom", "label": "Padding bas (desktop)", "min": 0, "max": 120, "step": 2, "unit": "px", "default": 30 },
{ "type": "range", "id": "padding_top_mobile", "label": "Padding haut (mobile)", "min": 0, "max": 100, "step": 2, "unit": "px", "default": 20 },
{ "type": "range", "id": "padding_bottom_mobile", "label": "Padding bas (mobile)", "min": 0, "max": 100, "step": 2, "unit": "px", "default": 10 },
{ "type": "range", "id": "container_padding", "label": "Padding latéral du container", "min": 0, "max": 60, "step": 2, "unit": "px", "default": 20 },
{ "type": "range", "id": "max_width", "label": "Largeur max du container", "min": 600, "max": 1800, "step": 20, "unit": "px", "default": 1200 },
{ "type": "range", "id": "gap_desktop", "label": "Espacement entre logos (desktop)", "min": 0, "max": 160, "step": 2, "unit": "px", "default": 70 },
{ "type": "range", "id": "gap_mobile", "label": "Espacement entre logos (mobile)", "min": 0, "max": 100, "step": 2, "unit": "px", "default": 40 },
{ "type": "range", "id": "logo_height", "label": "Hauteur des logos", "min": 20, "max": 120, "step": 2, "unit": "px", "default": 40 },
{ "type": "checkbox", "id": "grayscale", "label": "Appliquer un niveau de gris", "default": true },
{ "type": "range", "id": "opacity", "label": "Opacité des logos (en %)", "min": 10, "max": 100, "step": 5, "unit": "%", "default": 70 },
{ "type": "checkbox", "id": "hover_effect", "label": "Activer l’effet hover (retire gris + opacité)", "default": true },
{ "type": "checkbox", "id": "mobile_scroll", "label": "Activer le scroll horizontal sur mobile", "default": true },
{ "type": "checkbox", "id": "open_new_tab", "label": "Ouvrir les liens dans un nouvel onglet", "default": true }
],
"blocks": [
{
"type": "logo",
"name": "Logo",
"limit": 24,
"settings": [
{ "type": "image_picker", "id": "image", "label": "Image du logo" },
{ "type": "url", "id": "link", "label": "Lien (optionnel)" },
{ "type": "text", "id": "alt", "label": "Texte alternatif", "default": "Logo presse" }
]
}
],
"presets": [
{ "name": "Presse – Logos", "category": "Contenu" }
]
}
{% endschema %}
Pastebin
Retrouvez, créez et partagez vos snippets en temps réel.