Avancerade anpassningar för visning av produkter och produktserier för Shopify-pluginprogrammet

De här avancerade inställningarna hjälper dig att anpassa ditt digitala skyltfönster på WordPress, personifiera ditt företagsvarumärke och förbättra dina kunders köpupplevelse.

På den här sidan

Shopify-pluginprogram och Shopifys komponenter för digitala skyltfönster

Shopify-pluginprogrammet är byggt med Shopify Storefront Web Components. Följande komponenter används som byggstenar för ditt digitala Shopify-skyltfönster:

Produktkortskomponent: Den här komponenten visar individuell produktinformation, vanligtvis på produktlistningar eller produktseriesidor. Den innehåller ofta element som produktbild, titel, pris och en Lägg till i varukorgen-knapp.
Modalkomponent för snabbvy av produkt: Den här komponenten visar en modal över det befintliga innehållet med produktuppgifter, en Lägg till i varukorgen-knapp och en länk för att se fullständiga produktuppgifter.
Produktdetaljsidekomponent: Den här komponenten visar en enskild produkt med fullständiga produktuppgifter. Varje produktdetaljsidekomponent har en unik URL.
Produktseriekomponent: Den här komponenten visar produktserier som du har skapat.

Anpassning av visning av Shopify-produkter och produktserier

Standardkomponenterna för det digitala Shopify-skyltfönstret i ditt pluginprogram har verktyg som hjälper dig att skapa en smidig köpupplevelse. Du har också flexibiliteten att anpassa visningen av dessa komponenter så att de överensstämmer med din specifika varumärkesidentitet och dina designkrav.

För att kunna göra sådana anpassningar måste du ha åtkomst till att ändra dina WordPress-temafiler och kataloger. Processen innebär att du skapar en dedikerad mapp i din aktiva WordPress-temakatalog.

Steg:

Skapa mappen Shopify: Börja med att skapa en ny mapp med namnet Shopify direkt i din aktiva temakatalog. Den här mappen fungerar som den centrala platsen för dina anpassade komponentåsidosättningar.
Åsidosätt enskilda komponenter: För att ändra en specifik komponent, lägg till en PHP-fil med ett angivet namn i den nyskapade Shopify mappen. Namngivningskonventionen för dessa åsidosättningsfiler är avgörande för att pluginprogrammet ska känna igen och tillämpa dina anpassade versioner:
- För att åsidosätta produktkortskomponenten, skapa en PHP-fil med namnet product-card.php i mappen Shopify.
- För att åsidosätta modalkomponenten för snabbvy av produkt, skapa en PHP-fil med namnet modal.php i mappen Shopify.
- Skapa en PHP-fil med namnet pdp.php i mappen Shopify för att åsidosätta produktsideskomponenten.
- Skapa en PHP-fil med namnet component.php i mappen Shopify för att åsidosätta produktseriekomponenten.

När din anpassade PHP-fil har skapats ignorerar insticksprogrammet sin standardkomponentfil för det specifika elementet. Du kan implementera vilken kod som helst i dessa åsidosättningsfiler, från statiska HTML-block till komplex PHP-logik.

Även om det rekommenderas starkt att använda Shopify Storefront Web Components (som används i standardstrukturen för insticksprogrammet) för konsekvens och åtkomst till inbyggda Shopify-funktioner, är du inte begränsad till dem. Du kan integrera andra metoder för att hämta och visa data för produkter och produktserier, vilket möjliggör avancerade anpassningar.

Mer information och bästa praxis finns i utvecklardokumentationen för WordPress-insticksprogram.

Omskrivningar för Shopify-produkter och -produktserier

När du publicerar en produkt eller en produktserie på Shopify får varje produkt och produktserie en unik URL. Som standard skapas dessa URL:er med din Shopify-domän. Med omskrivningsfunktionen kan du komma åt dessa unika URL:er med din publika WordPress-domän.

Steg:

Gå till Inställningar i Shopify-insticksprogrammet.
På fliken Avancerat ser du till att de två kryssrutorna i avsnittet Omskrivningar av Shopify-länkar är aktiverade.
Gå till Permalänkar.
Klicka på Spara för att tillämpa den här nya regeln.
Gå till din Shopify admin och navigera sedan till produktsidan eller produktseriesidan som du vill skapa en WordPress-länk för.
På kortet för sökmotorlistning visas en URL som länkar kunder direkt till din produkt eller produktserie. Till exempel: https://johns-apparel.myshopify.com › products › huskee-reusable-cup.
Lägg till products/huskee-reusable-cup i slutet av din WordPress-webbplats URL. Till exempel: https://johns-apparel-wordpress.com/products/huskee-reusable-cup.

Anpassa produktkortets beteende

Med Shopifys komponenter för digitala skyltfönster finns det två typer av produktkort:

Snabbvy: När kunden för muspekaren över produktkortet visas alternativet Snabbköp. När kunden klickar på det visas produktuppgifterna i ett popup-fönster eller spärrande fönster över det befintliga innehållet i bakgrunden.
Detaljerad produktsida: När en kund klickar på produktkortet, till exempel på bilden eller produktnamnet, visas produktuppgifterna i en helsidesvy med en unik URL.

Du kan ändra den här inställningen för att endast visa en snabbvy, endast en detaljerad produktsida eller båda.

Steg:

Gå till Inställningar i Shopify-insticksprogrammet i WordPress.
Gå till avsnittet Produktvy på fliken Avancerat.
Välj det alternativ som fungerar bäst för din butik.
Klicka på Spara.