Icon Section Prestige Theme - nicht mittig

Deutsch Diskussion Technische Fragen & Antworten
,

Topic summary

Ein Benutzer hat eine benutzerdefinierte Icon/Logo-Section für das Shopify Prestige Theme erstellt, die auf dem Desktop nicht mittig angezeigt wird, während die mobile Ansicht korrekt funktioniert.

Problem:

  • Der Liquid-Code mit CSS Media Queries zeigt die Section auf Desktop-Geräten nicht zentriert an
  • Eine native Icon-Section fehlt im Prestige Theme
  • Performance-Apps sollen vermieden werden

Lösungsvorschlag:
Ein anderer Nutzer bietet Hilfe an, weist aber darauf hin, dass ohne Runtime-Testumgebung eine genaue Diagnose schwierig ist. Er warnt vor möglichen Nachteilen:

  • Negative Auswirkungen auf Page Loading Speeds
  • Ausschluss von Theme-Updates

Empfohlene Anpassungen:

  • Änderung der CSS-Klasse von .icon-list-section zu .logo-list-section
  • Entfernung überflüssiger Media Queries für mobile Geräte
  • Hinzufügen eines umschließenden Div-Elements mit der Klasse “logo-list-section”
  • Korrekte Formatierung der Listenelemente mit style="list-style: none; padding: 0;"

Die Diskussion bleibt offen, da noch keine Rückmeldung zum Testergebnis vorliegt.

Summarized with AI on November 21. AI used: claude-sonnet-4-5-20250929.
1

Moin,

ich habe den folgenden Liquid-Code eingefügt. Auf der Anpassungsseite ist soweit alles in Ordnung.

Leider wird die Section auf dem Desktop nicht mittig angezeigt, auf dem Handy allerdings schon.

Es gibt leider vom Prestige Theme keine eigene Logo oder Icon-Section, deswegen probiere ich es mit dieser.

Eine App will ich aufgrund der Performance ungerne verwenden.

Kann jemand helfen? :slightly_smiling_face:

Code:

@media only screen and (max-width: 767px) { .icon-list-section .icon-list-item { width: 50%; float: left; } } @media only screen and (min-width: 768px) { .icon-list-section { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } .icon-list-section .icon-list-item { flex: 1 1 150px; margin: 0 15px; } } .logo-bar-section { max-width: {{ section.settings.logo_width }}; display: inline-block; margin: 0 27.5px 35px; text-align: center; } .logo-bar-section p { margin-top: 10px; }

{{ section.settings.title | escape }}

{% if section.blocks.size > 0 %} {% endif %}

{% schema %}
{
“name”: “Logo list”,
“class”: “index-section”,
“max_blocks”: 10,
“settings”: [
{
“type”: “text”,
“id”: “title”,
“label”: “Heading”,
“default”: “Logo list”
},
{
“type”: “select”,
“id”: “logo_width”,
“label”: “Logo width”,
“default”: “150px”,
“options”: [
{
“label”: “Extra Small”,
“value”: “100px”
},
{
“label”: “Small”,
“value”: “125px”
},
{
“label”: “Medium”,
“value”: “150px”
},
{
“label”: “Large”,
“value”: “175px”
},
{
“label”: “Extra Large”,
“value”: “200px”
}
]
}
],
“blocks”: [
{
“type”: “logo_image”,
“name”: “Logo”,
“settings”: [
{
“type”: “image_picker”,
“id”: “image”,
“label”: “Image”
},
{
“type”: “url”,
“id”: “link”,
“label”: “Link”,
“info”: “Optional”
},
{
“type”: “text”,
“id”: “text”,
“label”: “Text”,
“default”: “Logo Text”
}
]
}
],
“presets”: [
{
“name”: “Logo list”,
“category”: “Image”,
“blocks”: [
{
“type”: “logo_image”
},
{
“type”: “logo_image”
},
{
“type”: “logo_image”
},
{
“type”: “logo_image”
}
]
}
]
}
{% endschema %}

2

Hey @it-ger

Es ist schwer zu sagen wo da der Wurm liegt ohne eine Runtime Environment wo man dein Code in deinem Sandbox Theme testen kann.

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negative beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

Es kann sein dass der von dir bereitgestellte Code einige Anpassungen braucht so dass die Logos sowohl auf dem Desktop als auch auf dem Mobilgerät mittig ausgerichtet werden. Hier ein Beispielcode den du testen kannst:


  ## {{ section.settings.title | escape }}
  {% if section.blocks.size > 0 %}
  
    {% for block in section.blocks %}
    - {% if block.settings.link != blank %}
      
        {% endif %}
        {% if block.settings.image != blank %}
        {{ block.settings.image | img_url: '150x150', scale: 2 | img_tag: block.settings.image.alt, 'logo-bar__image' }}
        {% else %}
        {{ 'logo' | placeholder_svg_tag: 'placeholder-svg' }}
        {% endif %}
        {% if block.settings.link != blank %}
      
        {% endif %}
        {% if block.settings.text != blank %}
      

  {{ block.settings.text }}

        {% endif %}
    
    {% endfor %}
  

  {% endif %}

Die wichtigsten Änderungen sind:

  1. Hinzufügen einer umschließenden Div mit der Klasse “logo-list-section” für die gesamte Logoliste.
  2. Ändern der CSS-Klasse von .icon-list-section zu .logo-list-section.
  3. Entfernen des überflüssigen Media-Query für Mobilgeräte, da das Logo auf Mobilgeräten bereits zentriert ist.
  4. Hinzufügen von style="list-style: none; padding: 0;" zum <ul>-Element, um die Listenelemente korrekt zu formatieren.

Bei weiteren Fragen kann ich gerne einen Experten empfehlen der dein Code in deiner Environment testen kann. :wink: