Aggiungi CSS personalizzato

Le impostazioni di stile dell’app coprono la maggior parte delle esigenze dei negozi. Quando non bastano, ad esempio per un raggio dei bordi particolare o una modifica da applicare solo su mobile, puoi aggiungere CSS tuo.

Attenzione

Questa è l’unica pagina davvero tecnica di questa documentazione. Se non hai familiarità con il CSS, descrivi ciò che vuoi a [email protected]. Di solito il team può fornirti lo snippet esatto, e il CSS che non scrivi è un CSS che non può rompersi quando il tema si aggiorna.

Parti dalle impostazioni integrate

Quasi ogni modifica all’aspetto per cui si pensa al CSS è già un’impostazione in Quote settings > Customize. Controlla queste prima di scrivere qualsiasi cosa.

Dove	Cosa puoi impostare
Button & widget > Style	Button type (Filled / Outline / Text link), Size (Medium / Large / Full width), Text color, Background color e Font size.
Quote form > Style	Un preset di stile, più Match theme styling if possible.
Quote form > Customize text	Font style.
Quote form > Customize form color	Title bar color, Title bar background, Color, Background color, Border color e Quote popup primary color.
Quote cart page > Enable Quote Cart Widget	Text color e Background color: sono le uniche due che accetta il widget flottante.

Gran parte delle modifiche all’aspetto è già un’impostazione: parti da qui.

Nota

Match theme styling if possible fa già molto da solo: «Theme styling applies on your storefront and is not shown in this preview.» Attivalo e guarda la vetrina reale prima di decidere che il modulo ha bisogno di CSS. Vedi Adatta lo stile al tuo tema.

Attenzione

Un compito che non va mai affidato al CSS è nascondere un prezzo o un pulsante di acquisto. Advanced settings > Hide price ha impostazioni apposite, tra cui Hide Add To Cart button e Hide Buy Now button. Una regola CSS lascia il prezzo nella pagina, dove può comparire per un istante prima che il tuo foglio di stile venga caricato: vedi Nascondi Add to Cart e Buy now.

Dove conservare il tuo CSS

Ovunque tu conservi il CSS personalizzato, tienilo in un posto dove poterlo ritrovare e annullare. Il CSS conservato nel tuo tema ha un vantaggio: viene versionato insieme al tema, quindi duplicare il tema prima di modificarlo ti dà qualcosa a cui tornare.

Nota

Passa in rassegna le impostazioni integrate qui sopra prima di scrivere qualsiasi cosa. Se non sai se una modifica spetti a un’impostazione o al CSS, chiedi prima a [email protected]: ti risparmia di mantenere una regola che non ti serviva.

Trovare cosa selezionare

Clicca con il tasto destro sull’elemento nella vetrina e scegli Ispeziona. Ti mostra i nomi delle classi su cui scrivere le regole.

Ispeziona il pulsante del preventivo nella tua vetrina per trovare cosa selezionare.

Due cose da sapere prima di iniziare:

• Il pulsante del preventivo mostra il Button text che hai impostato, nel punto scelto in Button position: controlla quindi Product page button position prima di andare a cercarlo.
• Il widget flottante del preventivo, con etichetta Quote (n), si trova in un contenitore con la classe grfq-quote-widget-container.

Nota

Non trovi il pulsante in una pagina collezione per ispezionarlo? Passa il cursore su una scheda prodotto. Nei temi moderni l’app lo collega al controllo di aggiunta rapida del tema stesso, quindi ha opacità zero finché non passi sopra alla scheda e poi compare come una piccola icona invece di un pulsante con etichetta. È un comportamento del tema, non uno stile mancante: vedi Pulsante del preventivo nelle pagine collezione.

Alcune regole pratiche

Regola	Perché
Cambia una sola cosa alla volta	Quando qualcosa si rompe saprai quale regola l'ha causato.
Prova su mobile	La maggior parte delle richieste di preventivo arriva da telefono e una modifica pensata solo per desktop spesso lì si rompe.
Tieni una copia altrove	Incolla il tuo CSS anche in una nota, così puoi ripristinarlo se serve.
Evita !important quando puoi	Oggi ha la meglio e rende più difficile ogni modifica futura.
Commenta ogni regola	Tra sei mesi, un blocco di CSS senza spiegazioni è qualcosa che nessuno osa eliminare.

Dopo un cambio di tema

Parti dall’incorporamento app nel nuovo tema. Va abilitato nel tuo tema e, finché non lo è, nulla di ciò che fa l’app compare nella vetrina: vedi Abilita l’app nel tuo tema.

Poi controlla il tuo CSS. È scritto in base al markup del tuo tema, quindi dopo un cambio di tema o un aggiornamento importante guarda il pulsante del preventivo, il modulo e il widget flottante: le regole potrebbero richiedere modifiche.

Passaggi successivi

• Cambia testo e colori del pulsante: le impostazioni del pulsante da provare per prime
• Adatta lo stile al tuo tema: fai seguire il tema al modulo in automatico
• Contatta l’assistenza: chiedi uno snippet