Siti web esistenti - personalizzazione dei tuoi embed

Vedi qui per la nostra guida all'inserimento su un sito web esistente.

Shoprocket offre il totale controllo sull'aspetto dei tuoi codici di inserimento tramite il generatore di codici nel tuo dashboard.

Seleziona quale tipo di inserimento desideri (widget Prodotto singolo, Prodotto a piena pagina, più Prodotti o carrello) e poi abilita/disabilita gli elementi che desideri includere, oltre a personalizzare le dimensioni, gli stili e i comportamenti.

Una volta apportate modifiche al tuo codice di inserimento, dovrai copiarlo e incollarlo nel tuo sito web dove desideri che appaia. (se apporti future modifiche, dovrai copiare e incollare di nuovo il codice)

Puoi anche fare clic su "Salva come impostazioni predefinite" nel menu a sinistra per memorizzare le tue impostazioni di inserimento in modo che tutti i futuri codici di inserimento che generi inizino con le stesse impostazioni.

Opzioni

Le seguenti opzioni sono disponibili nella sezione "Opzioni" nel menu a sinistra:

1. Prodotti da visualizzare - Scegli di mostrare tutti i Prodotti o solo Prodotti di categorie specifiche
2. Dimensione del prodotto - Imposta la dimensione di visualizzazione degli articoli incorporati (piccolo, medio o grande)
3. Adattamento dell'immagine - Definisci se le immagini dei Prodotti devono essere ritagliate in base alla dimensione disponibile, o ridotte (il ritaglio manterrà tutte le immagini della stessa dimensione e più uniformi)
4. Stile del pulsante - scegli tra "Standard" (pulsanti rettangolari con testo) "Minimale" (pulsanti circolari con icone) o "Al passaggio del mouse" (pulsanti circolari con icone che appaiono solo al passaggio del mouse sul Prodotto)
5. Ordine di ordinamento predefinito - Definisci l'ordine di ordinamento con cui i Prodotti saranno elencati per impostazione predefinita (Predefinito, Nuovo per primo, Nome: A-Z, Nome: Z-A, Prezzo: Basso-Alto, Prezzo: Alto-Basso)
6. Prodotti per pagina - Specifica quanti Prodotti caricare nella visualizzazione
7. Nascondi Prodotti esauriti - Scegli se nascondere completamente i Prodotti esauriti, o mostrarli con un messaggio "Esaurito"

Include

Puoi anche specificare quali elementi includere, come il pulsante "Visualizza Prodotto" e i "Nastri"

Le seguenti inclusioni sono disponibili nella sezione "Include" nel menu a sinistra:

1. Casella di ricerca - Visualizza il campo "cerca" sopra l'inserimento dei tuoi Prodotti (disponibile solo per l'inserimento di più Prodotti)
2. Casella di ordinamento - Visualizza il menu a discesa dell'ordine di ordinamento (disponibile solo per l'inserimento di più Prodotti)
3. Casella di limitatore per pagina - Visualizza il menu a discesa degli articoli per pagina (disponibile solo per l'inserimento di più Prodotti)
4. Casella di valuta - Visualizza il menu a discesa della valuta affinché i clienti possano visualizzare i prezzi nella loro valuta preferita (le valute devono essere abilitate prima nelle impostazioni del tuo negozio)
5. Casella di lingua - Visualizza il menu a discesa della lingua affinché i clienti possano cambiare lingua (i testi del negozio devono essere impostati prima nelle tue impostazioni)
6. Casella di categoria - Visualizza il menu a discesa delle categorie, permettendo ai clienti di filtrare i Prodotti per categoria (disponibile solo per l'inserimento di più Prodotti)
7. Nome del prodotto - Visualizza il nome del Prodotto
8. Prezzo del prodotto - Visualizza il prezzo del Prodotto
9. Immagine del prodotto - Visualizza l'immagine principale del Prodotto
10. Riassunto del prodotto - Visualizza il testo riassuntivo del Prodotto
11. Pulsante Visualizza Prodotto - Visualizza il pulsante per aprire i dettagli completi del Prodotto in un modale
12. Pulsante Aggiungi al carrello - Visualizza il pulsante per aggiungere l'articolo al carrello (le opzioni appariranno sopra al passaggio del mouse, i Prodotti che richiedono opzioni/varianti più avanzate apriranno il modale di visualizzazione del prodotto al clic)
13. Quantità minima/massima di ordine - Visualizza le quantità minime e massime disponibili, se impostate nel tuo Prodotto
14. Nastro di spedizione gratuita - Visualizza il nastro "Spedizione Gratuita" sul tuo Prodotto se la spedizione gratuita è applicabile
15. Nastro Nuovo Prodotto - Visualizza il nastro "Nuovo" sui Prodotti aggiunti negli ultimi 20 giorni
16. Nastro download digitale - Visualizza il nastro "Download Digitale" sui Prodotti che includono un file scaricabile all'acquisto

Popup Visualizza Prodotto

Per i Prodotti che hanno l'opzione "visualizza Prodotto" abilitata, puoi personalizzare quali dei seguenti elementi visualizzare nel modale:

1. Nome prodotto - Visualizza il nome del Prodotto
2. Prezzo del prodotto - Visualizza il prezzo del Prodotto
3. Selezione quantità - Visualizza il campo di selezione quantità (se disabilitato, solo 1 può essere aggiunto al carrello alla volta)
4. Immagine del prodotto - Visualizza la galleria delle immagini del Prodotto
5. Miniature delle immagini - Visualizza le miniature della galleria delle immagini
6. Recensioni del prodotto - Visualizza le recensioni del Prodotto
7. Riassunto del prodotto - Visualizza il testo riassuntivo del Prodotto
8. Descrizione del prodotto - Visualizza la descrizione del Prodotto
9. SKU del prodotto - Visualizza l'unità di gestione delle scorte del Prodotto (SKU)
10. Categorie del prodotto - Visualizza le categorie a cui il Prodotto è collegato
11. Icone di condivisione sociale - Visualizza pulsanti che consentono la condivisione del Prodotto sui social media con un solo clic
12. Prodotti correlati - Visualizza i Prodotti correlati
13. Quantità minima/massima di ordine - Visualizza le quantità minime e massime disponibili, se impostate nel tuo Prodotto

Puoi anche scegliere tra le seguenti opzioni:

1. Adattamento dell'immagine - Definisci se le immagini dei Prodotti devono essere ritagliate in base alla dimensione disponibile, o ridotte (il ritaglio manterrà tutte le immagini della stessa dimensione e più uniformi)
2. Larghezza immagine - Imposta la larghezza delle immagini
3. Altezza immagine - Imposta l'altezza delle immagini
4. Layout miniature - Posiziona le miniature della galleria delle immagini orizzontalmente sotto la galleria delle immagini, o verticalmente a sinistra
5. Stile delle varianti - Scegli tra menu standard "a discesa" o menu "testo" semplice
   (in fase di sviluppo)

Stili

Puoi personalizzare i seguenti colori tramite il generatore:

• Titolo del Prodotto
• Prezzo del Prodotto
• Riassunto del Prodotto
• Colore di sfondo del pulsante Acquista
• Testo/icone del pulsante Acquista
• Colore di sfondo del pulsante Visualizza Prodotto
• Testo/icone del pulsante Visualizza
• Colore di sfondo del pulsante Visualizza carrello
• Testo del pulsante Visualizza carrello
• Colore del widget del carrello
• Colore di sfondo del carrello
• Colore del testo del carrello
• Colore di sfondo dell'articolo del Prodotto

Per chi ha abilità di coding, puoi naturalmente utilizzare le tue regole CSS per stilizzare gli embed quanto vuoi, non utilizziamo i iFrame quindi tutto il contenuto renderizzato nella tua pagina fa parte del DOM e può essere stilizzato con il tuo CSS.

Basta assicurarti che le tue regole CSS siano più specifiche delle nostre.

Ad esempio, abbiamo questa regola:

.sr-filters-wrap {
   background: #fff;
}

Per sovrascrivere quella, crea la tua regola CSS con un elemento padre preceduto, come:

body .sr-filters-wrap { 
   background: #000; 
}

Poiché hai aggiunto l'elemento "body" prima della nostra regola, sarà più mirato della nostra e avrà la precedenza. 

Puoi anche apportare modifiche direttamente nel generatore di codici di inserimento se sei più a tuo agio con quello.