Produkt als Startseite?

[sternenbilder]

Hallo zusammen

Soweit ich gelesen habe kann ich nicht einfach eine Produktseite als Startseite anzeigen lassen?
Ich möchte meine Seite so schlank wie möglich halten und daher direkt das einzige Produkt auf der Startseite anzeigen lassen. Wenn ich dies mit der Funktion "Vorgestelltes Produkt" mache dann habe ich nicht die gleichen Funktionen und der Builder wird nicht geladen. D.h die Kunden müssten dann nochmals klicken (vollständige Details anzeigen) um auf die Produktseite zu gelangen. Wie schaffe ich es alle Informationen auf der Startseite anzeigen zu lassen?

Startseite: https://sternenbilder.ch

Produktseite: https://sternenbilder.ch/products/sternenbild

Liebe Grüsse
Fabian

[Gabe]

Hey @sternenbilder 

Danke für die fragen und um die PDP als Homepage anzuzeigen, kannst du an erster Stelle deine Homepage Abschnitte so gestalten bzw. ausblenden, so dass sie nur den Featured Product Abschnitt anzeigt, was die einfacherer Lösung wäre. Hier ein Beispiel aus meinem eigenen Test-Dawn-Theme:

Wäre das nicht die einfachste Lösung? Du kannst das "Vorgestelltes Produkt"-Widget auf deiner Startseite so anpassen, dass es mehr Informationen und Funktionalitäten zeigt. Dies kann durch Anpassen des entsprechenden Abschnitts im Theme-Code geschehen. Du kannst zum Beispiel die Liquid- und HTML-Code-Strukturen der eigentlichen Produktseite in den Code des oben-abgebildeten "Vorgestelltes Produkt"-Abschnitts einfügen. Aber immer zuerst in einer Testumgebung testen.

Es gibt auch Shopify-Apps, die es ermöglichen, benutzerdefinierte Seiten zu erstellen oder spezifische Layouts für Produkte und Seiten zu gestalten. Apps wie "PageFly Advanced Page Builder" oder "Shogun Landing Page Builder" können dir helfen, deine Startseite so anzupassen, dass sie wie eine vollständige Produktseite aussieht.

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

---
Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

[sternenbilder]

Hallo @Gabe 

Danke für deine ausführliche Antwort! Beim Featured Produkt noch mehr auszublenden hilft leider nichts weil ich möchte ja eigentlich mehr anzeigen und die Einstellungen auf der Produktseite sind grösser als beim Featured Produkt. Ich möchte eingentlich dieselben Funktionen direkt auf der Startseite haben. Eventuell muss ich wirklich mal schauen welchen Code ich dazu rausnehmen muss..

[Gabe]

Hey @sternenbilder 

Wie meinst du "Beim Featured Produkt noch mehr auszublenden hilft leider nichts weil ich möchte ja eigentlich mehr anzeigen". Das Ausblenden betrifft ja nur die anderen Abschnitte, nicht den des Featured Products. Du möchtest ja nur den Featured Product auf der HP anzeigen so wie auf der PDP?

Ansonsten wird das entweder eine Page Builder App oder eine grössere Coding Lösung verlangen.

Hoffe das hilft dir weiter und ein schönes Wochende noch! 😉

[sternenbilder]

Ja die anderen Abschnitte kann ich dann später noch anpassen / ergänzen. Beim Featured Produkt wird der Bildgenerator nicht geladen. Vergleiche mal die beiden Seiten wie oben verlinkt. Dann siehst du bei der Produktseite rechts gleich alle Optionen und Personalisierungsmöglichkeiten - die ganzen Sachen habe ich beim Featured Produkt nicht - da steht einfach nur "vollständige Details anzeigen".

[Gabe]

Um welchen Bildgenerator handelt es sich da? Das ist wieder etwas anderes denn das ist ein externes Plug-in das nur auf der PDP funzt, wie es aussieht aufgrund den internen Verlinkungen im Liquid, wie z. B. die Auswahl der Varianten Daten und deren Weiterleitung an den Warenkorb was nicht unbedingt von der Homepage aus gehen wird ohne eine größere Coding Lösung. Unsere Free Theme sind sehr gut aber für etwas Komplexeres wie das, könnte eins unserer Premium Themes notwendig sein.

Der HTML-Code deines Product Customizers ist somit für die Produktseite (Product Detail Page, PDP) gebaut, nicht für ein Section auf der Homepage. Das Layout der Seite ist so strukturiert, dass es eine Mediengalerie für Produktbilder und eine separate Sektion für Produktinformationen umfasst was ja nicht auf der Homepage geht. Hier sind einige der Hauptelemente und deren Funktionen:

1. Media-Gallery:

   • Beinhaltet einen Slider für Produktbilder, der es ermöglicht, durch verschiedene Medien zu navigieren.
   • Verwendet ein modal-opener Element, um ein größeres Bild oder eine Galerie in einem Modal-Fenster zu öffnen.

2. Produktinformationen:

   • Der Abschnitt enthält grundlegende Informationen wie den Produkttitel und die Preisgestaltung.
   • Ein product-info Element, das für die Anzeige spezifischer Informationen zum Produkt verwendet wird.

3. Anpassungsoptionen:

   • Der Abschnitt customily-main-app zeigt verschiedene Anpassungsoptionen, die der Kunde auswählen kann, wie Ort, Datum und Design des Produktes.
   • Nutzer können spezifische Eigenschaften wie Sternenkonstellation oder Milchstraße ein- oder ausschalten und Designoptionen aus verschiedenen Stilen auswählen.

4. Warenkorb und Kauf:

   • Enthält Formulare und Buttons, um das Produkt nach Anpassung direkt in den Warenkorb zu legen.
   • Es gibt auch dynamische Elemente wie das Erhöhen oder Verringern der Produktanzahl.

Es werden somit sowohl clientseitige als auch serverseitige Technologien genutzt, um die Produktanpassungen und den Kaufprozess zu handhaben, was nicht auf der Homepage so ohne weiteres gehen wird, ohne eine größere Coding Lösung.

[sternenbilder]

Hi Gabe

Danke für deine ausführliche Rückmeldung. Ich verstehe als Laie nicht wieso ich nicht einfach die Produktseite als Startseite anzeigen lassen kann. Wie z.B bei Wordpress kann man jede Seite als Startseite anzeigen lassen. Das App ist übrigens Customily. 

[Gabe]

Hey @sternenbilder 

Ja, ganz klar ist es nicht was du damit meinst denn jedes Shop hat die Root Domain deinshop.com oder deinshop.de die auf die Homepage deutet die im theme.liquid festgelegt ist. Alle Domain Unterordner wie deinshop.de/Produkt gehen auf die Unterseiten die in den einzelnen Liquid Dateien festgelegt werden wie product.liquid.

• Soweit ich gelesen habe kann ich nicht einfach eine Produktseite als Startseite anzeigen lassen?

Du hast nicht erwähnt, wo du das gelesen hast.

Page-Builder Apps wie Shogun, PageFly oder GemPages können dabei helfen, eine benutzerdefinierte Startseite zu erstellen, die alle Funktionen der Produktseite enthält. Sie bieten eine Drag-and-Drop-Oberfläche, mit der du die Produktbeschreibung, Preisangaben, Bilder und andere Elemente direkt einfügen kannst.

Es selber DIY im Code machen anhand deines Dawn Theme

Das Shopify Dawn Theme ist ein flexibles und modernes Theme, das anpassbar ist. Hier sind Schritte und Hinweise, um den Code der Produktseite in die Vorlage der Startseite einzufügen. Beachte bitte, dass dies eine Anpassung des Themes auf Code-Ebene erfordert, also stelle sicher, dass du ein Backup erstellst, bevor du Änderungen vornimmst.

Wenn du es selber programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ 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:

1. Produktinformationen abrufen: Stelle sicher, dass du die ID oder den Handle des Produkts kennst, das auf der Startseite angezeigt werden soll. Dies wird benötigt, um die Produktinformationen korrekt abzurufen.

2. Home-Template anpassen:

   • Gehe zu Online-Shop > Themes > Code bearbeiten.
   • Öffne die Datei die für die Startseite.

3. Produktinformationen einfügen: Verwende einen Code wie das folgende Beispiel, um die Produktinformationen direkt auf der Startseite anzuzeigen:

{% assign product_handle = "your-product-handle" %}
{% assign product = all_products[product_handle] %}

{% if product %}
  <a href="{{ product.url }}">Go to Product Page</a>
{% else %}
  <p>Product not found</p>
{% endif %}

ODER

{% assign product = all_products["sternenbild"] %}

<div class="product-info">
    <h2>{{ product.title }}</h2>
    <div class="product-description">{{ product.description_html }}</div>
    <p class="price">{{ product.price | money }}</p>

    <div class="product-images">
        {% for image in product.images %}
            <img src="{{ image.src }}" alt="{{ product.title }}" />
        {% endfor %}
    </div>

    <form action="/cart/add" method="post">
        <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
        <button type="submit">Add to Cart</button>
    </form>
</div>

Alternativ einen Redirect in das liquid  einfügen, die die Homepage automatisch auf die gewünschte PDP umleitet:

<script>
  window.location.href = "/products/your-product-handle";
</script>

Somit kann man die Startseite auf die Produktseite umzuleiten, sodass Besucher direkt zur gewünschten Produktseite gelangen. Dies kann mittels eines Redirect-Codes oder durch eine App realisiert werden. Für die Ladezeiten ist das aber keine optimale Lösung.

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉