ℹ️ Note: Questo articolo è stato tradotto automaticamente utilizzando AI e può contenere imprecisioni. Se qualcosa sembra sbagliato, si prega di contattare il nostro team di supporto.

La scheda Design ti dà il pieno controllo su come il tuo Upsell & Cross Sell widget guarda e si sente sul tuo negozio. Dai colori di sfondo e spaziando alla tipografia e allo styling dei pulsanti — ogni parte visiva del widget può essere personalizzata per abbinare il tuo marchio.

Ogni configurazione del upsell (pagina del prodotto, pagina del carrello, cassetto del carrello o posizione personalizzata) ha il suo impostazioni di progettazione indipendenti, in modo da poter definire un widget carrello cassetto in modo diverso da un widget di pagina di prodotto ✨

La maggior parte delle impostazioni relative al colore includono:

• Una visuale Picker di colore
• A Codice Hex ingresso

Questo rende facile se si preferisce scegliere colori visivamente o incollare i colori del marchio esatto.

⚠️ Prima di iniziare

Per configurare le impostazioni di progettazione:

→ Aprire un esistente Upsell & Cross Sell installazione → O creare una nuova configurazione prima

Allora apri il Design scheda nella parte superiore della pagina di configurazione.

ℹ️ Le impostazioni di progettazione cambiano solo come il widget GuardaCiò che il widget dice (titolo, testo del pulsante) è configurato nella scheda Contenuto e può essere tradotto in Traduzione.

👀 Anteprima dal vivo

Mentre lavori nella scheda Design, un anteprima live è mostrato accanto alle impostazioni. Ogni cambiamento che fai si riflette nell'anteprima immediatamente — nessun risparmio necessario per vedere come le cose guardano.

• Anteprima Desktop – Mostra come appare il widget sugli schermi desktop.
• Anteprima mobile – Mostra il widget all'interno di una cornice mobile, in modo da poter verificare la leggibilità su dispositivi più piccoli.

💡 L'anteprima utilizza i vostri prodotti reali di upsell, il titolo e il testo del pulsante, quindi quello che vedete è molto vicino a quello che i clienti vedranno sul vostro negozio.

🖼️ Contesto

• Cosa fa: Controlla l'aspetto di sfondo della sezione widget upsell.
• Opzioni disponibili:
• • Colore singolo – Applicare un colore di sfondo solido.
  • Gradiente – Mescolare due colori insieme senza intoppi.

🎨 Colore singolo

• Scegli un colore usando Picker di colore o inserire manualmente un Codice Hex.

🌈 Gradiente

• Gradiente grado di angolo: Controlla la direzione del gradiente (0–360°).
• Selettori di colore iniziali e finali: Selezionare i due colori utilizzati nel gradiente.

💡 Un sottile gradiente può aiutare la sezione di upsell distinguersi dal resto della pagina senza stringere con il vostro tema.

📏 Spaziatura

Questa sezione controlla la spaziatura sia all'interno che all'esterno del widget upsell.

• In alto / in basso: Aggiunge spaziatura interna tra il contenuto del widget e i bordi della sezione.
• Piano esterno / fondo: Aggiunge spaziando fuori dalla sezione per separarlo dagli elementi di pagina circostanti.

Tutti i valori sono impostati pixel (px).

💡 Uso Fuori spaziare per creare spazio respiratorio tra il widget e gli elementi come il pulsante Aggiungi al carrello, e Dentro spaziatura per mantenere il contenuto dal toccare i bordi della sezione.

🔤 Tipografia

Questa sezione controlla come tutti gli elementi di testo appaiono all'interno del widget upsell.

🏷️ Titolo successivo

• Formato del titolo: Controlla la dimensione della voce della sezione upsell (ad es. “Frequently comprato insieme”).
• Colore del titolo: Cambia il colore della rubrica.

ℹ️ Il testo del titolo di upsell stesso è modificato nel Contenuto tab, non qui.

📦 Titolo del prodotto

• Dimensione del titolo del prodotto: Controlla la dimensione di ogni nome del prodotto all'interno del widget.
• Colore del titolo: Cambia il colore del titolo del prodotto.

💰 Prezzo

• Dimensione del prezzo: Controlla la dimensione del testo del prezzo del prodotto.
• Colore del prezzo: Cambia il colore del prezzo del prodotto.

➡️ Arrow

• Dimensione della freccia: Controlla la dimensione delle frecce di navigazione cursore.
• Colore freccia: Cambia il colore della freccia.

ℹ️ Le frecce di navigazione appaiono solo quando il widget contiene più di un prodotto per scivolare attraverso.

🔘 Pulsante

Questa sezione personalizza il pulsante upsell call-to-action (ad es. “Add to Cart”) indicato per ogni prodotto.

🎨 Colore del pulsante

• Cambia il colore di sfondo del pulsante. Il bordo del pulsante utilizza automaticamente lo stesso colore.

🔤 Taglie di testo del pulsante & colore

• Controlla la dimensione e il colore del testo all'interno del pulsante.

⭕ Corner Radius & Button Style

• raggio d'angolo: Imposta come arrotondato gli angoli del pulsante appaiono, in pixel.
• Stile pulsante: Interruttore rapido tra Piazza♪ _Arrotondato_e Completamente arrotondato.

ℹ️ Queste due impostazioni rimangono in sincronizzazione automaticamente:

• Scegliere un Stile pulsante applica un raggio d'angolo corrispondente.
• Scrivere un raggio d'angolo valore aggiorna lo stile — i valori bassi diventano Piazza, i valori medi diventano Arrotondato, e i valori elevati diventano Completamente arrotondato.

💪 Font Peso

• Controlla come in grassetto o luce appare il testo del pulsante.
• Seleziona Inherit per seguire il peso del carattere esistente del vostro tema, o scegliere un peso specifico da 100 (pensabile) a 900 (il più forte).

✍️ Stile del carattere

• Toggle tra:
• • Normale
  • Italica
  • Sottolineo

💾 Salvare e pubblicare il tuo disegno

I cambiamenti di progettazione non sono vivi finché non vengono salvati.

1. Fai i tuoi cambiamenti nel Design scheda — l'anteprima dal vivo aggiorna istantaneamente.
2. Fare clic Salva nella barra di salvataggio in cima alla pagina.
3. Assicurarsi che il upsell è Pubblicato così il design aggiornato appare sul tuo negozio.

⚠️ Nota: I valori di colore inseriti come codici esagonali sono convalidati su salva. Se un codice esagonale è invalido (per esempio, manca il # o contenente caratteri non validi), il salvataggio sarà bloccato e un messaggio di errore metterà in evidenza il campo che ha bisogno di fissaggio.

ℹ️ Se il tuo design viene salvato e pubblicato, ma il widget stesso non è visibile sul negozio, la causa è di solito legata a app embeds, posizionamento, o targeting — vedi Upsell & Cross Sell non mostra sul mio negozio [Fixed].

🛍️ Come il design cambia riflettere sul negozio

Quando si salva una configurazione pubblicata, l'app aggiorna automaticamente il negozio. Il widget storefront legge le impostazioni di Design e li applica ovunque il widget rende:

• Contesto → Compila la sezione widget con il tuo unico colore o gradiente.
• Spaziatura → Riguarda l'imbottitura interna e i margini esterni intorno al widget.
• Tipografia → Stili il titolo upsell, titoli di prodotto, prezzi e frecce di navigazione.
• Pulsante → Stili ogni prodotto Add to Cart pulsante, tra cui raggio d'angolo, il peso del carattere e lo stile del carattere.

Poiché ogni tipo di configurazione (pagina del prodotto, pagina del carrello, cassetto del carrello, posizione personalizzata) memorizza il proprio design, cambiando una configurazione non influisce mai sull'aspetto degli altri.

🚀 Risultato finale

Una volta configurato con successo, il Design & Styling le impostazioni aiutano i commercianti a creare un'esperienza di shopping più visivamente coinvolgente, professionale e orientata alla conversione.

Con una corretta personalizzazione dello styling in atto:

✅ Il widget upsell si sente allineato con il vostro negozio di marca
✅ Le raccomandazioni del prodotto diventano più evidenti e coinvolgenti
✅ I prezzi e i titoli dei prodotti rimangono leggibili sia sul desktop che sul mobile
✅ I pulsanti CTA diventano più visivamente attraenti
✅ Ogni posizionamento può portare il proprio sguardo e sentire
✅ I clienti sperimentano un'interfaccia più lucida e affidabile

Utilizzando queste opzioni di progettazione e stile in modo efficace può migliorare notevolmente l'impegno del cliente, la presentazione del negozio, e il potenziale di conversione generale ✨

Aggiornato il: 15/09/2026