Neue Section im Shopify-Shop über Liquid hinzufügen

Shopify ist bekanntlich nicht sehr programmierfreundlich, für jedes Zusatzfeature ist die Verwendung einer meist kostenpflichtigen App nötig. Heute zeige ich, wie du eigenhändig eine zusätzliche Section erstellst, konkret für das Hinzufügen einer Referenzen- oder Partnerliste mit Logo.

Anpassungen über Liquid von Shopify

Schon mal von Liquid gehört? Das ist die von Shopify eigens entwickelte Codesprache basierend auf Ruby. Über Liquid kannst du selber Anpassungen an deinem Theme und an der Nutzeroberfläche vornehmen. Heisst konkret in unserem Fall, dass du über Liquid eine neue von dir erstellte Section erstellen kannst, die dann unter Sections im User-Panel erscheint.

Und so geht’s: Gehe im Admin-Bereich auf dein Theme und wähle unter Actions das Dialogfeld “Code ändern”. Dieser Klick führt dich zu Liquid und all den CSS-Sheets und Vorlagen von deinem Theme.

  1. Shopify Adminbereich > Gehe zu Online Store > Themes.
  2. Wähle bei deinem Theme Actions > Edit code.
  3. Wähle den Bereich Sections und > Add new section
  4. Füge den gewünschten Code ein und speichere das File
  5. Zurück über Online-Store > Customize/Anpassen > Section hinzufügen > hier findest du deine neue Section “Logo List” oder “Reference

Willst du nun eine neue Section hinzufügen gehe zum Sections-Ordner und wähle “Neue Section erstellen”. Dann kommen wir schon mal zum Code-Teil. Was jetzt folgt ist ein allgemeines Beispiel, je nach Theme solltest du noch Anpassungen v.a. im Style-Bereich vornehmen.

In meinem Fall verwendet der Kunde das “Brooklyn” Gratis-Theme von Shopify. Den Code musste ich im Style-Bereich leicht anpassen, erkläre ich dann weiter unten.

Das ist der allgemeine Code:

<style>
  .logo-bar-section {
    max-width: {{ section.settings.logo_width }};
    display: inline-block;
    
    text-align: center;
  }
</style>



<div class="section-header text-center">
  <h2 class="h1 section-header__title">{{ section.settings.title | escape }}</h2>
        <hr class="hr--small">
             
  {% if section.blocks.size > 0 %}
    <ul>
      {% for block in section.blocks %}
        <li class="logo-bar-section" {{ block.shopify_attributes }}>
          {% if block.settings.link != blank %}
            <a href="{{ block.settings.link }}">
          {% 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 %}
            </a>
          {% endif %}
        </li>
      {% endfor %}
    </ul>
  {% endif %}
</div>
{% 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"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Logo list",
        "category": "Image",
        "blocks": [
          {
            "type": "logo_image"
          },
          {
            "type": "logo_image"
          },
          {
            "type": "logo_image"
          },
          {
            "type": "logo_image"
          }
        ]
      }
    ]
  }
{% endschema %}



Anpassungen beim Brooklyn Theme

Jetzt musste ich noch Anpassungen vornehmen für das Brooklyn Theme, weil die Section ansonsten ganz links gefloatet (linksbündig) war. Dies obwohl wir im div Style “text-align center” haben. Das Problem ist im Container-Bereich DIV. Ich habe also den div-Bereich ersetzt durch die Div-Class, die ich in den anderen Templates gefunden habe.

Ich habe also Folgenden Teil ersetzt:

<div>
  <h2>{{ section.settings.title | escape }}</h2>
<div class="section-header text-center">
  <h2 class="h1 section-header__title">{{ section.settings.title | escape }}</h2>
        <hr class="hr--small">

So sieht der neue Code aus:

<style>
  .logo-bar-section {
    max-width: {{ section.settings.logo_width }};
    display: inline-block;
    
    text-align: center;
  }
</style>



<div class="section-header text-center">
  <h2 class="h1 section-header__title">{{ section.settings.title | escape }}</h2>
        <hr class="hr--small">
             
  {% if section.blocks.size > 0 %}
    <ul>
      {% for block in section.blocks %}
        <li class="logo-bar-section" {{ block.shopify_attributes }}>
          {% if block.settings.link != blank %}
            <a href="{{ block.settings.link }}">
          {% 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 %}
            </a>
          {% endif %}
        </li>
      {% endfor %}
    </ul>
  {% endif %}
</div>
{% 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"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Logo list",
        "category": "Image",
        "blocks": [
          {
            "type": "logo_image"
          },
          {
            "type": "logo_image"
          },
          {
            "type": "logo_image"
          },
          {
            "type": "logo_image"
          }
        ]
      }
    ]
  }
{% endschema %}



Mehr Infos findest du über das Shopify Developer Portal