Aggiunta di CSS personalizzato al widget

Bundlex offre un editor visuale completo per lo stile del widget, ma a volte devi raggiungere un dettaglio che l'editor non espone oppure sovrascrivere qualcosa che il tema applica al widget. Il CSS personalizzato è la soluzione avanzata ideale proprio per questi casi. Questo articolo illustra i due punti in cui puoi aggiungerlo e come indirizzare il widget in modo affidabile.

Due punti in cui aggiungere CSS personalizzato

Esistono due campi separati per il CSS personalizzato, con ambiti diversi.

Il campo CSS personalizzato del bundle

Ogni bundle ha una propria sezione CSS personalizzato, disponibile nella scheda Stile. Il CSS incollato qui viene salvato con quel bundle, quindi è la scelta giusta quando una modifica deve essere applicata solo nel punto in cui viene mostrato quel bundle specifico.

1. Apri il bundle nella dashboard di Bundlex.
2. Apri la scheda Stile ed espandi CSS personalizzato, l'ultimo elemento nella sezione Stile del widget.
3. Incolla le regole nell'editor del codice. Il campo suggerisce il formato con un segnaposto: .bx-widget-container {margin-bottom: 10px;}.
4. Salva il bundle.

Il campo CSS personalizzato dell'incorporamento dell'app

Anche l'incorporamento dell'app Bundlex, ovvero l'estensione dell'app del tema che abiliti nell'editor del tema Shopify nella sezione Incorporamenti app, dispone di un campo CSS personalizzato, visibile quando è abilitato Mostra impostazioni avanzate. Il CSS inserito qui viene applicato ovunque venga visualizzato l'incorporamento, quindi usalo per modifiche a livello di tema che devono valere per ogni pagina prodotto in cui compare il widget.

1. Nell'amministrazione Shopify, apri Negozio online e fai clic su Modifica tema.
2. Apri Incorporamenti dell'app e trova Bundlex Bundles.
3. Abilita Mostra impostazioni avanzate e incolla le regole nel campo CSS personalizzato.
4. Salva il tema.

Come regola generale: usa il campo del bundle per le modifiche relative a un singolo bundle e il campo dell'incorporamento dell'app per le modifiche che vuoi applicare ovunque venga mostrato il widget.

Come indirizzare il widget

Il markup di Bundlex usa classi bx-. Sono selettori utili nel widget attuale:

• .bx-widget-container - il contenitore del widget.
• .bx-widget - il contenuto del widget.
• .bx-offer-wrap - un contenitore dell'offerta.
• .bx-offer - la scheda dell'offerta all'interno di quel contenitore.
• .bx-active .bx-offer - la scheda dell'offerta selezionata; la classe active si trova sul relativo contenitore.
• .bx-offer-title e .bx-offer-subtitle - il testo dell'offerta.
• .bx-original-price e .bx-discounted-price - il testo del prezzo originale e scontato.

Limita le regole al contenitore del widget. Ad esempio:

.bx-widget-container .bx-offer-title {
  font-weight: 700;
}

Ispeziona l'elemento nella pagina prodotto prima di applicare lo stile. Il markup dipende dalle funzionalità abilitate e un selettore copiato da una versione precedente del widget potrebbe non corrispondere più.

Sovrascrittura degli stili del tema con !important

Usa prima i controlli integrati. Per la larghezza del widget, prova Stile > Stile del widget > Contenitore > Larghezza massima > Larghezza completa (100%). Se una regola del tema continua a sovrascrivere il risultato, ispeziona l'elemento interessato e usa !important solo sulle dichiarazioni che ne hanno bisogno. Ad esempio:

.bx-widget-container {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

Questo esempio riempie il contenitore principale disponibile, ma non può rendere più larga una colonna stretta del tema. Se una regola non ha effetto, verifica che il selettore corrisponda a un elemento visualizzato, che il foglio di stile sia caricato e che la dichiarazione sia valida. Poi controlla quale regola in conflitto prevale. Un selettore più specifico può essere sufficiente senza !important.

Quando chiedere aiuto all'assistenza

Entrambi i campi CSS personalizzato indicano che puoi contattare l'assistenza Bundlex se hai bisogno di aiuto, e l'offerta è reale. Se non riesci a individuare il selettore corretto o un tema personalizzato contrasta con le tue sovrascritture in un modo che !important non risolve, invia all'assistenza un link alla pagina prodotto e una descrizione della modifica desiderata. Potrà fornirti un selettore verificato da incollare.

Lo stesso vale per i campi dei selettori mostrati dall'opzione Mostra impostazioni avanzate dell'incorporamento, per il posizionamento personalizzato, il pulsante Aggiungi al carrello, il modulo prodotto e i blocchi della quantità o della variante. Anche questi sono selettori CSS e l'assistenza può aiutarti a compilarli per i temi personalizzati che non vengono rilevati automaticamente.

Il CSS non modifica le regole dello sconto, ma può nascondere prezzi, opzioni o pulsanti e impedire ai clienti di usare il widget. Dopo aver applicato una regola, verifica tutti gli stati delle offerte, le scelte delle varianti e Aggiungi al carrello su desktop e dispositivi mobili.