Metaobjekte auf Startseite darstellen, optional sich täglich verändernd.

[Gardapura]

Ich würde gerne Metaobjekte in meinem Shop auf der Startseite anzeigen, beispielsweise ein Angebot mit Bild, Überschrift, Text und Button. Das Metaobjekt mit den passenden Feldern habe ich angelegt.

Jetzt habe ich nur noch Probleme, dieses auch auf der Startseite anzuzeigen, da ich ja ein Metafeld erstellen muss, welches auf diesen Metaobjekteintrag hinweist.

Beim Hinzufügen einer neuen Section auf meiner Startseite ist mir aufgefallen, dass nur Markt-Metafelder/Metaobjekte für diese Section ausgewählt werden können, also habe ich ein Markt-Metafeld angelegt und auf mein Metaobjekt verwiesen.

In der Section kann ich es nun zwar als dynamische Quelle verbinden, aber ohne Ergebnisse. Es erscheint mir hier auch nicht logisch, wo ich festlege, welcher Eintrag der Metaobjektdefinition dargestellt werden soll.

Die Section bleibt also komplett leer, wo liegt hier mein Denkfehler?

Ich hatte gehofft, so flexibler Angebote einzustellen oder sogar einen gesamten Adventskalender zu erstellen, indem ich dann den Eintrag täglich ändere und vorher schon die Bilder und Beschreibungen für das jeweilige Türchen angelegt hatte.

Alternativ wäre hier bestimmt auch möglich, das liquid zu coden, welches dann jeden Tag einen anderen Eintrag darstellt. Idealerweise würde es aber mit den dynamischen Quellen funktionieren, da ich nicht so viel Expertise in dem Thema habe. Ich nutze das Dawn Theme.

Vielen Dank im Voraus! 

[Finer]

@Gardapura man kann auch ohne Zuweisung von Metaobjekte abrufen, allerdings muss man hier mit Liquid arbeiten, um die richtigen Inhalte zuzuweisen.

Wenn du aber einen Adventskalender einbinden möchtest, könnte vielleicht einer der beiden Apps dir weiterhelfen.

https://apps.shopify.com/christmas-calendar-by-saio?locale=de
https://apps.shopify.com/odicci?locale=de

Die App von Saio ist zudem kostenfrei. Also vielleicht einen Versuch wert.

[Gardapura · Accepted solution]

Habe das Ganze dank KI so als benutzerdefiniertes Liquid umsetzen können: 

<style>

  /* Desktop Styling */

  .advent-calendar {

    display: flex;

    gap: 2%; /* Flexibler Abstand zwischen Bild und Text */

    align-items: center;

    justify-content: space-between;

    padding-left: 5%; /* Abstand links für Desktop */

    padding-right: 5%; /* Abstand rechts für Desktop */

  }

  .advent-calendar__image {

    flex: 1;

    max-width: 100%; /* Bild wird skalierbar, aber nicht zu groß */

    padding-left: 5vw; /* Abstand links auf Desktop (relativ zur Bildschirmbreite) */

  }

  .advent-calendar__image img {

    width: 100%; /* Bild nimmt nun 100% der Breite des Containers ein */

    max-width: none; /* Keine Begrenzung der maximalen Breite auf größeren Bildschirmen */

    height: auto;

    object-fit: contain; /* Bild wird angepasst, ohne es zu verzerren */

  }

  .advent-calendar__content {

    flex: 1;

    padding-left: 2%; /* Abstand links für Text auf Desktop */

    padding-right: 2%; /* Abstand rechts für Text auf Desktop */

  }

  /* Mobile Styling */

  @media (max-width: 767px) {

    .advent-calendar {

      display: block;

      padding-left: 5%; /* Flexibler Abstand links auf mobilen Geräten */

      padding-right: 5%; /* Flexibler Abstand rechts auf mobilen Geräten */

    }

    .advent-calendar__image {

      width: 100%; /* Bild nimmt nun die gesamte Breite ein */

      margin-bottom: 5vw; /* Abstand zwischen Bild und Text auf mobilen Geräten (relativ zur Breite) */

      padding-left: 0; /* Kein Abstand nach links */

    }

    .advent-calendar__image img {

      width: 100%; /* Bild auf volle Breite setzen */

      height: auto; /* Verhältnismäßige Skalierung */

      object-fit: cover; /* Bildfüllung beibehalten, ohne es zu verzerren */

    }

    .advent-calendar__content {

      padding-left: 5%; /* Dynamischer Abstand links für Text auf mobilen Geräten */

      padding-right: 5%; /* Dynamischer Abstand rechts für Text auf mobilen Geräten */

    }

  }

</style>

{% assign current_date = 'now' | date: "%Y-%m-%d" %}

{% assign start_date = '2024-12-01' %}

{% assign end_date = '2024-12-24' %}

{% if current_date >= start_date and current_date <= end_date %}

  {% assign day_number = current_date | date: "%d" | plus: 0 %}

  <div class="advent-calendar">

    <div class="advent-calendar__image">

      {% case day_number %}

        {% when 1 %}

          <a href="https://www.deinshop.de/link1">

            <img src="{{ 'bild1.jpg' | asset_url }}" alt="1. Dezember Bild" />

          </a>

        {% when 2 %}

          <a href="https://www.deinshop.de/link2">

            <img src="{{ 'bild2.jpg' | asset_url }}" alt="2. Dezember Bild" />

          </a>

        {% when 3 %}

          <a href="https://www.deinshop.de/link3">

            <img src="{{ 'bild3.jpg' | asset_url }}" alt="3. Dezember Bild" />

          </a>

        {% when 4 %}

          <a href="https://www.deinshop.de/link4">

            <img src="{{ 'bild4.jpg' | asset_url }}" alt="4. Dezember Bild" />

          </a>

        {% when 5 %}

          <a href="https://www.deinshop.de/link5">

            <img src="{{ 'bild5.jpg' | asset_url }}" alt="5. Dezember Bild" />

          </a>

        {% when 6 %}

          <a href="https://www.deinshop.de/link6">

            <img src="{{ 'bild6.jpg' | asset_url }}" alt="6. Dezember Bild" />

          </a>

        {% when 7 %}

          <a href="https://www.deinshop.de/link7">

            <img src="{{ 'bild7.jpg' | asset_url }}" alt="7. Dezember Bild" />

          </a>

        {% when 8 %}

          <a href="https://www.deinshop.de/link8">

            <img src="{{ 'bild8.jpg' | asset_url }}" alt="8. Dezember Bild" />

          </a>

        {% when 9 %}

          <a href="https://www.deinshop.de/link9">

            <img src="{{ 'bild9.jpg' | asset_url }}" alt="9. Dezember Bild" />

          </a>

        {% when 10 %}

          <a href="https://www.deinshop.de/link10">

            <img src="{{ 'bild10.jpg' | asset_url }}" alt="10. Dezember Bild" />

          </a>

        {% when 11 %}

          <a href="https://www.deinshop.de/link11">

            <img src="{{ 'bild11.jpg' | asset_url }}" alt="11. Dezember Bild" />

          </a>

        {% when 12 %}

          <a href="https://www.deinshop.de/link12">

            <img src="{{ 'bild12.jpg' | asset_url }}" alt="12. Dezember Bild" />

          </a>

        {% when 13 %}

          <a href="https://www.deinshop.de/link13">

            <img src="{{ 'bild13.jpg' | asset_url }}" alt="13. Dezember Bild" />

          </a>

        {% when 14 %}

          <a href="https://www.deinshop.de/link14">

            <img src="{{ 'bild14.jpg' | asset_url }}" alt="14. Dezember Bild" />

          </a>

        {% when 15 %}

          <a href="https://www.deinshop.de/link15">

            <img src="{{ 'bild15.jpg' | asset_url }}" alt="15. Dezember Bild" />

          </a>

        {% when 16 %}

          <a href="https://www.deinshop.de/link16">

            <img src="{{ 'bild16.jpg' | asset_url }}" alt="16. Dezember Bild" />

          </a>

        {% when 17 %}

          <a href="https://www.deinshop.de/link17">

            <img src="{{ 'bild17.jpg' | asset_url }}" alt="17. Dezember Bild" />

          </a>

        {% when 18 %}

          <a href="https://www.deinshop.de/link18">

            <img src="{{ 'bild18.jpg' | asset_url }}" alt="18. Dezember Bild" />

          </a>

        {% when 19 %}

          <a href="https://www.deinshop.de/link19">

            <img src="{{ 'bild19.jpg' | asset_url }}" alt="19. Dezember Bild" />

          </a>

        {% when 20 %}

          <a href="https://www.deinshop.de/link20">

            <img src="{{ 'bild20.jpg' | asset_url }}" alt="20. Dezember Bild" />

          </a>

        {% when 21 %}

          <a href="https://www.deinshop.de/link21">

            <img src="{{ 'bild21.jpg' | asset_url }}" alt="21. Dezember Bild" />

          </a>

        {% when 22 %}

          <a href="https://www.deinshop.de/link22">

            <img src="{{ 'bild22.jpg' | asset_url }}" alt="22. Dezember Bild" />

          </a>

        {% when 23 %}

          <a href="https://www.deinshop.de/link23">

            <img src="{{ 'bild23.jpg' | asset_url }}" alt="23. Dezember Bild" />

          </a>

        {% when 24 %}

          <a href="https://www.deinshop.de/link24">

            <img src="{{ 'bild24.jpg' | asset_url }}" alt="24. Dezember Bild" />

          </a>

      {% endcase %}

    </div>

    <div class="advent-calendar__content">

      {% case day_number %}

        {% when 1 %}

          <h2>Überschrift für den 1. Dezember</h2>

          <p>Textinhalt für den 1. Dezember. Dies ist eine mehrzeilige Beschreibung, die sich auf das tägliche Angebot oder das Thema bezieht.</p>

          <a href="https://www.deinshop.de/link1" class="button">Jetzt entdecken</a>

        {% when 2 %}

          <h2>Überschrift für den 2. Dezember</h2>

          <p>Textinhalt für den 2. Dezember. Dies ist eine mehrzeilige Beschreibung, die sich auf das tägliche Angebot oder das Thema bezieht.</p>

          <a href="https://www.deinshop.de/link2" class="button">Jetzt entdecken</a>

        {% when 3 %}

          <h2>Überschrift für den 3. Dezember</h2>

          <p>Textinhalt für den 3. Dezember. Dies ist eine mehrzeilige Beschreibung, die sich auf das tägliche Angebot oder das Thema bezieht.</p>

          <a href="https://www.deinshop.de/link3" class="button">Jetzt entdecken</a>

        {% when 4 %}

          <h2>Überschrift für den 4. Dezember</h2>

          <p>Textinhalt für den 4. Dezember. Dies ist eine mehrzeilige Beschreibung, die sich auf das tägliche Angebot oder das Thema bezieht.</p>

          <a href="https://www.deinshop.de/link4" class="button">Jetzt entdecken</a>

        {% when 5 %}

          <h2>Überschrift für den 5. Dezember</h2>

          <p>Textinhalt für den 5. Dezember. Dies ist eine mehrzeilige Beschreibung, die sich auf das tägliche Angebot oder das Thema bezieht.</p>

          <a href="https://www.deinshop.de/link5" class="button">Jetzt entdecken</a>

        {% when 6 %}

          <h2>Überschrift für den 6. Dezember</h2>

          <p>Textinhalt für den 6. Dezember. Dies ist eine mehrzeilige Beschreibung, die sich auf das tägliche Angebot oder das Thema bezieht.</p>

          <a href="https://www.deinshop.de/link6" class="button">Jetzt entdecken</a>

        <!-- Weitere Tage hier folgen ... -->

      {% endcase %}

    </div>

  </div>

{% else %}

  <p>Der Adventskalender ist nur vom 1. bis zum 24. Dezember verfügbar.</p>

{% endif %}