Guida
Accedi

Personalizzazione o rimozione di un Buy Button, di una collezione incorporata o di un carrello incorporato

Puoi modificare l’aspetto o il comportamento di un Buy Button, di una collezione incorporata o di un carrello incorporato modificandone il codice di incorporamento nell’HTML di origine della pagina web. Inoltre, puoi eliminare un incorporamento rimuovendo il codice dalla pagina web.

Un Buy Button mostra un prodotto con un pulsante di acquisto. Una collezione incorporata mostra più prodotti. Un carrello incorporato mostra un carrello indipendente che i clienti possono usare su diverse pagine.

Il codice di incorporamento è il frammento di codice che hai copiato dal pannello di controllo Shopify e incollato nell’HTML della pagina web quando hai creato il Buy Button o il carrello. Il codice di incorporamento è scritto in JavaScript, il linguaggio di programmazione usato per aggiungere funzionalità interattive alle pagine web.

In questa pagina

Informazioni sul codice di incorporamento del Buy Button

Ogni Buy Button è costituito da parti separate chiamate componenti. Un componente è una sezione denominata del codice di incorporamento che controlla una parte dell’esperienza del Buy Button. Ad esempio, quando aggiungi un prodotto con un carrello alla pagina web, il codice di incorporamento genera i seguenti componenti:

  • un componente product, che mostra le informazioni sul prodotto e il pulsante di acquisto
  • un componente cart, che mostra i contenuti del carrello
  • un componente toggle del carrello, che mostra l’icona che apre il carrello

Se il componente del prodotto apre una finestra pop-up con i dettagli del prodotto, il codice di incorporamento genera due componenti aggiuntivi: un componente modal per il pop-up stesso e un componente modalProduct per le informazioni sul prodotto al suo interno.

Nel seguente frammento di codice sono presenti componenti distinti per product e cart:

ShopifyBuy.UI.onReady(client).then(function (ui) {
  ui.createComponent('product', {
    id: 12345,
    options: {
      product: {
        buttonDestination: 'cart',
        contents: {
          description: true
        },
        text: {
          button: 'Add to Cart'
        },
        styles: {
          button: {
            'background-color': 'blue'
          }
        }
      },
      cart: {
        styles: {
          button: {
            'background-color': 'orange'
          }
        }
      }
    }
  });
});

Ogni componente è configurato tramite un oggetto di configurazione nel codice di incorporamento. Un oggetto è un gruppo strutturato di impostazioni, formattato come elenco di coppie chiave-valore:

  • Una chiave è il nome di un’impostazione, ad esempio buttonDestination.
  • Un valore è il contenuto assegnato all’impostazione, ad esempio 'cart'.

Un oggetto è simile a un foglio di calcolo: ogni chiave corrisponde al nome di una colonna, mentre ogni valore corrisponde al contenuto di una cella. Per cambiare l’aspetto o il comportamento dei Buy Button, modifica le chiavi e i valori all’interno degli oggetti di configurazione.

Ogni componente ha molte chiavi modificabili. Per un elenco completo delle chiavi modificabili, visualizza la documentazione per gli sviluppatori. Per configurare una chiave che non è già presente nel codice di incorporamento, aggiungila all’oggetto appropriato. Per un esempio, consulta Modifica il layout di un incorporamento di prodotto.

Personalizza gli stili dei componenti

Ogni componente ha un oggetto di configurazione styles annidato, che ne controlla l’aspetto. Un oggetto annidato è un oggetto posizionato all’interno di un altro oggetto.

L’oggetto styles utilizza il CSS, il linguaggio usato per descrivere lo stile visivo degli elementi della pagina web. Ogni chiave di primo livello nell’oggetto styles rappresenta un elemento nel componente, ad esempio il titolo o il pulsante. All’interno di tale chiave, ogni chiave annidata è una proprietà CSS (ad esempio background-color o border) e il valore è un valore CSS.

options: {
  product: {
    styles: {
      button: {
        'background-color': 'red',
        'border-radius': '5px'
      }
    }
  }
}

A styles è possibile aggiungere qualsiasi proprietà CSS valida. Assicurati che i nomi delle proprietà contenenti trattini siano racchiusi tra virgolette.

Per maggiori informazioni sulla personalizzazione CSS, consulta la documentazione per sviluppatori.

Componenti della collezione incorporata

Le collezioni incorporate utilizzano gli stessi oggetti di configurazione dei Buy Button. Per modificare il layout o altre proprietà dei prodotti all’interno della collezione, trova l’oggetto di configurazione product e modificalo nello stesso modo in cui modificheresti un incorporamento di prodotto. Per modificare le proprietà della collezione stessa, come il testo del pulsante Pagina successiva, modifica invece l’oggetto di configurazione productSet.

Alcune chiavi, come il testo di un componente, sono configurate tramite oggetti annidati. Ad esempio, il testo del pulsante Pagina successiva si trova all’interno dell’oggetto text del componente productSet:

options: {
  productSet: {
    text: {
      nextPageButton: 'Continue'
    }
  }
}

Un modale per i dettagli del prodotto è una finestra pop-up che mostra le informazioni sul prodotto. Per indirizzare il cliente a un modale per i dettagli del prodotto invece che al carrello, modifica il codice di incorporamento del Buy Button nell’HTML di origine della pagina web.

Passaggi:

  1. Apri il codice HTML della pagina che contiene l’incorporamento del prodotto che desideri modificare.
  2. Trova l’oggetto di configurazione product.
  3. Trova la chiave buttonDestination nell’oggetto:
options: {
      product: {
        buttonDestination: 'cart'
      }
}
  1. Modifica il valore di tale chiave in 'modal', incluse le virgolette:
options: {
      product: {
        buttonDestination: 'modal'
      }
}
  1. Salva le modifiche.

Modifica il layout di un incorporamento di prodotto

Un layout orizzontale per l’incorporamento del prodotto posiziona l’immagine di fianco ai dettagli del prodotto anziché sopra di essi. Per passare a questo layout, modifica il codice di incorporamento del Buy Button nell’HTML di origine della pagina web.

Passaggi:

  1. Apri il codice HTML della pagina che contiene l’incorporamento del prodotto che desideri modificare.
  2. Trova l’oggetto di configurazione product.
  3. Aggiungi una chiave layout e imposta il valore su 'horizontal'. Assicurati che il valore includa le virgolette e che la riga precedente termini con una virgola:
options: {
      product: {
        buttonDestination: 'modal',
        layout: 'horizontal'
      }
}
  1. Salva le modifiche.

Modifica l’aspetto e il comportamento di un carrello incorporato

Per modificare l’aspetto o il comportamento di un carrello, modifica l’oggetto di configurazione cart nel codice di incorporamento.

Passaggi:

  1. Apri il codice HTML della pagina che contiene il carrello che desideri modificare.
  2. Trova l’oggetto di configurazione cart nel codice di incorporamento:
options: {
      cart: {
        startOpen: false
      }
}
  1. Modifica una chiave esistente, o aggiungine una nuova, per cambiare l’aspetto o il comportamento del carrello. Per un elenco completo delle chiavi configurabili, visualizza la documentazione per gli sviluppatori.
  2. Salva le modifiche.

Eliminare un Buy Button, una collezione incorporata o un carrello incorporato

Per rimuovere un Buy Button, una collezione incorporata o un carrello incorporato dalla pagina web, eliminane il codice di incorporamento dall’HTML di origine.

Passaggi:

  1. Apri il codice sorgente HTML della pagina web che contiene il Buy Button, la collezione incorporata o il carrello incorporato.
  2. Elimina l’intero codice di incorporamento dall’HTML di origine, iniziando con <script data-shopify-buy-ui> e terminando con </script>. Di seguito è riportato un esempio di codice di incorporamento del Buy Button:
<script data-shopify-buy-ui>
   var scriptURL = "https://cndurl.com/buy-button-storefront.js";
    if (window.ShopifyBuy && window.ShopifyBuy.UI) {
      ShopifyBuyInit();
    } else {
      var script = document.createElement('script');
      script.async = true;
      script.src = scriptURL;
      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
      script.onload = ShopifyBuyInit;
    }

    function ShopifyBuyInit() {
      var client = ShopifyBuy.buildClient({
        apiKey: 'your-api-key',
        domain: 'your-store.myshopify.com',
        appId: '6'
      });

      ShopifyBuy.UI.onReady(client).then(function (ui) {
        ui.createComponent('product', {
          id: 12345,
          options: {
            product: {
              buttonDestination: 'cart',
              contents: {
                description: true
              },
              text: {
                button: 'Add to Cart'
              },
              styles: {
                button: {
                  'background-color': 'blue'
                }
              }
            },
            cart: {
              styles: {
                button: {
                  'background-color': 'orange'
                }
              }
            }
          }
        });
      });
    }
</script>
  1. Salva le modifiche.