Shopify ti consente di aggiungere immagini alle opzioni del prodotto, in modo che i clienti possano vedere come appare ciascuna scelta. Tuttavia, essendo regolamentato da Shopify, puoi associare una sola immagine a un valore di opzione. Quindi, la domanda è: come avere più immagini associate a un'opzione?
C'è una risposta in Be Yours, in cui puoi specificare determinate immagini per un valore di opzione . Questa funzione è particolarmente adatta per l'opzione colore, ma puoi usarla completamente per altri scopi che desideri.

Passaggi:
Requisiti
- Sii tuo 4.0.0 o successiva
È necessario disattivare il supporto Nascondi altre varianti dopo aver selezionato una variante . Questa opzione è compatibile con il comportamento nativo di Shopify: associa una sola immagine a un valore di opzione.
In Be Yours, questa opzione è disponibile nelle seguenti sezioni:
- Sezione prodotti in evidenza
- Sezione informazioni sul prodotto (nelle pagine dei prodotti)
- Sezione informazioni sul prodotto (nella scheda prodotto)
Scegli un'opzione
Guarda il tuo prodotto nel tuo pannello di controllo e scegli un'opzione con cui desideri classificare le tue immagini. Nell'esempio seguente, ho deciso di scegliere Color . Il mio prodotto è disponibile nei colori Bianco , Grano e Nero e desidero mostrare le rispettive immagini solo quando un utente seleziona un valore di opzione.
Modifica il tag ALT delle immagini
È necessario modificare il tag alt per specificare il "nome dell'opzione e il valore dell'opzione" a cui appartiene l'immagine:
- Passa il mouse sull'immagine e fai clic sul pulsante a sei punti per aprire le informazioni dell'immagine
- Nella casella di testo Alt , digita il testo alternativo utilizzando il nome dell'opzione che hai scelto combinandolo con il valore dell'opzione . La sintassi è molto importante qui e deve essere nel seguente ordine:
#
(carattere hashtag)
option-name
(minuscolo, sostituisci tutti gli spazi con trattini)
_
(carattere di sottolineatura)
option-value
(minuscolo, sostituisci tutti gli spazi con trattini)Ad esempio, se scelgo l'opzione Colore e voglio associare un'immagine al colore Nero , il testo alternativo dovrebbe essere
#color_black
Note:
Dalla versione Be Yours 7.2.0 , supportiamo più lingue nella nostra funzione di immagini con opzioni multiple .
Dai un'occhiata a questo esempio qui sotto per inglese e francese. Il nome dell'opzione è "Color" in inglese e "Couleur" in francese, il valore dell'opzione è "Black" in inglese e "Noire" in francese.
Dopo aver fatto clic sull'immagine a cui desideri aggiungere il testo ALT, imposta il testo ALT:
#en:color_black,fr:couleur_noire
Ecco come farlo:
- Includi il codice della lingua : aggiungi il codice della lingua, seguito da due punti (:), prima del nome di ogni colore.
- Separa ciascuna coppia linguistica con una virgola: separa ciascuna coppia linguistica con una virgola (,). Ciò indicherà la fine di una coppia linguistica e l'inizio di quella successiva.
- Passa il mouse sull'immagine e fai clic sul pulsante a sei punti per aprire le informazioni dell'immagine
- Fare clic su Salva per salvare le modifiche
- Fai lo stesso procedimento per le altre immagini
Imposta (o mantieni) il mio testo alternativo
Cosa succede se voglio impostare (o mantenere) il mio alt utilizzato per scopi SEO? Basta aggiungere qualsiasi cosa nel campo alt prima del carattere # , in questo modo:
Sappiamo che la maggior parte dei clienti si preoccupa della SEO e sarai in grado di migliorare la tua efficienza SEO aggiungendo i tag alt a tutte le immagini secondo le istruzioni sopra.
SEO: Image Optimizer Page Speed di AVADA è un'app altamente consigliata per la SEO delle immagini per aiutarti a superare i tuoi concorrenti nei risultati di ricerca. Questa app sfrutta il tuo SEO a tuo agio con l'automazione:
- Ottimizzazione dell'ALT/meta tag/JSON-LD dell'immagine per essere compatibile con la ricerca di Google.
- Ottimizzazione delle dimensioni delle immagini senza perdita di qualità per velocizzare il tuo sito web.
>> Scopri di più sul SEO: Velocità della pagina dell'ottimizzatore di immagini oggi stesso!
* Le immagini vengono utilizzate esclusivamente a scopo dimostrativo del prodotto non commerciale e sono destinate esclusivamente all'uso nella documentazione di istruzioni del tema Be Yours.
Hai bisogno di ulteriore assistenza
Se riscontri problemi o hai bisogno di ulteriore aiuto con il tuo tema BeYours, contatta i nostri ragazzi dell'assistenza tramite il nostro sistema di ticket per assistenza entro 8 ore.
Scansiona il codice QR qui sotto per unirti alla nostra community WhatsApp per aggiornamenti, notizie e annunci.
Share:
Come impostare i campioni di colore in Be Yours 7.1.0 o versione successiva
Sfrutta la tua personalizzazione utilizzando origini dinamiche e metafield