Personalizzazioni avanzate per la visualizzazione di prodotti e collezioni per il plug-in di Shopify

Queste impostazioni avanzate ti aiutano a personalizzare la vetrina virtuale su WordPress, a personalizzare il brand aziendale e a migliorare l'esperienza di acquisto dei clienti.

In questa pagina

Plug-in di Shopify e componenti della vetrina virtuale di Shopify

Il plug-in di Shopify è realizzato con i Shopify Storefront Web Components. I seguenti componenti sono utilizzati come elementi costitutivi della vetrina virtuale di Shopify:

Componente scheda prodotto: questo componente visualizza le singole informazioni sul prodotto, solitamente visualizzate nelle inserzioni di prodotto o sulle pagine di collezione. Spesso include elementi come l'immagine del prodotto, il titolo, il prezzo e un pulsante Aggiungi al carrello.
Componente modale di visualizzazione rapida del prodotto: questo componente mostra una finestra modale sopra il contenuto esistente con i dettagli del prodotto, un pulsante Aggiungi al carrello e un link per visualizzare i dettagli completi del prodotto.
Componente pagina di dettaglio del prodotto: questo componente visualizza un singolo prodotto, con tutti i dettagli. Ogni componente della pagina di dettaglio del prodotto ha un URL univoco.
Componente collezione: questo componente visualizza le collezioni di prodotti create.

Personalizzazione della visualizzazione di prodotti e collezioni di Shopify

I componenti predefiniti della vetrina virtuale di Shopify sul plug-in dispongono di strumenti per creare un'esperienza di acquisto fluida. Hai anche la flessibilità di personalizzare la visualizzazione di questi componenti per allinearla alla specifica identità del brand e ai requisiti di design.

Per eseguire tali personalizzazioni, devi avere accesso per modificare i file e le directory del tema WordPress. Il processo prevede la creazione di una cartella dedicata all'interno della directory del tema WordPress attivo.

Passaggi:

Crea la cartella Shopify: inizia creando una nuova cartella denominata Shopify direttamente all'interno della directory del tema attivo. Questa cartella funge da posizione centrale per gli override dei componenti personalizzati.
Override dei singoli componenti: per modificare un componente specifico, aggiungi un file PHP con un nome designato all'interno della cartella appena creata Shopify cartella. La convenzione di denominazione per questi file di override è fondamentale affinché il plug-in riconosca e applichi le versioni personalizzate:
- Per eseguire l'override del componente scheda prodotto, crea un file PHP denominato product-card.php all'interno della cartella Shopify.
- Per eseguire l'override del componente modale di visualizzazione rapida del prodotto, crea un file PHP denominato modal.php all'interno della cartella Shopify.
- Per sovrascrivere il Componente pagina di dettaglio del prodotto, crea un file PHP denominato pdp.php all'interno della cartella Shopify.
- Per sovrascrivere il Componente collezione, crea un file PHP denominato component.php all'interno della cartella Shopify.

Una volta creato il file PHP personalizzato, il plug-in ignora il suo file componente predefinito per quell'elemento specifico. Puoi implementare qualsiasi codice all'interno di questi file di override, dai blocchi HTML statici alla logica PHP complessa.

Anche se è vivamente consigliato sfruttare i Web Component della vetrina virtuale di Shopify (utilizzati nella struttura predefinita del plug-in) per garantire coerenza e accesso alle funzionalità integrate di Shopify, non sei limitato al loro utilizzo. Puoi integrare altri metodi per recuperare e visualizzare i dati di prodotti e collezioni, consentendo personalizzazioni avanzate.

Per maggiori informazioni e best practice, consulta la documentazione per sviluppatori del plug-in di WordPress.

Riscritture di prodotti e collezioni di Shopify

Quando pubblichi un prodotto o una collezione su Shopify, ogni prodotto e collezione ha un URL univoco. Per impostazione predefinita, questi URL vengono creati con il tuo dominio Shopify. Con la funzione di riscrittura, puoi accedere a quegli URL univoci con il tuo dominio WordPress pubblico.

Passaggi:

Dal plug-in di Shopify, vai su Impostazioni.
Nella scheda Avanzate, assicurati che le due caselle di spunta nella sezione Riscritture link di Shopify siano attivate.
Vai su Permalink.
Clicca su Salva per applicare questa nuova regola.
Vai al pannello di controllo Shopify, quindi vai alla pagina di dettaglio del prodotto o della collezione per cui desideri creare un link di WordPress.
Nella scheda dell'inserzione per i motori di ricerca, viene visualizzato un URL che collega i clienti direttamente al tuo prodotto o alla tua collezione. Ad esempio: https://johns-apparel.myshopify.com › products › huskee-reusable-cup.
Aggiungi products/huskee-reusable-cup alla fine dell'URL del tuo sito WordPress. Ad esempio: https://johns-apparel-wordpress.com/products/huskee-reusable-cup.

Personalizzazione del comportamento della scheda prodotto

Con i componenti della vetrina virtuale di Shopify, esistono due tipi di schede di dettaglio del prodotto:

Visualizzazione rapida: passando il mouse sulla scheda prodotto, il cliente ha l'opzione Quick Shop. Una volta cliccata, i dettagli del prodotto vengono visualizzati in uno stile pop-up o modale sopra il contenuto esistente in background.
Pagina di dettaglio del prodotto: quando un cliente clicca sulla scheda prodotto, ad esempio sull'immagine o sul nome del prodotto, i dettagli del prodotto vengono visualizzati in una visualizzazione a pagina intera con un URL univoco.

Puoi modificare questa impostazione per visualizzare solo la visualizzazione rapida, solo la pagina di dettaglio del prodotto o entrambe.

Passaggi:

Dal plug-in di Shopify in WordPress, vai su Impostazioni.
Dalla scheda Avanzate, vai alla sezione Visualizzazione prodotto.
Scegli l'opzione più adatta al tuo negozio.
Clicca su Salva.