Modifica o eliminazione di un Buy Button o di un carrello incorporato

Attenzione

Questo è un tutorial avanzato e non è supportato da Shopify. Richiede la conoscenza di linguaggi di web design come HTML, CSS, Javascript e Liquid. Se hai bisogno di aiuto, puoi rivolgerti a un Partner di Shopify.

I Buy Button e i carrelli vengono generati dal codice di incorporamento aggiunto all’origine HTML della tua pagina web. Se vuoi cambiare l’aspetto o il comportamento di un pulsante o un carrello in una pagina web, devi modificare il codice di incorporamento associato.

Suggerimento

Il codice di incorporamento nell’origine HTML ha la precedenza sulle impostazioni scelte quando crei un pulsante o un carrello nel pannello di controllo Shopify. Se inserisci per errore un valore non valido nel codice di incorporamento, il valore errato viene sostituito automaticamente dal valore predefinito.

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

Per eliminare un Buy Button, una collezione o un carrello incorporati esistenti:

1. Apri l’origine HTML della pagina web che contiene il Buy Button, la collezione incorporata o il carrello incorporato.

2. Elimina l’intero codice di incorporamento dall’origine HTML. Il codice di incorporamento di un Buy Button ha un aspetto simile a questo:

 

<div data-embed_type="product" data-shop="yourstorename.myshopify.com" data-product_name="Product Name" data-product_handle="product-name" data-has_image="true" data-display_size="compact" data-redirect_to="checkout" data-buy_button_text="Buy now" data-buy_button_out_of_stock_text="Out of Stock" data-buy_button_product_unavailable_text="Unavailable" data-button_background_color="7db461" data-button_text_color="ffffff" data-product_modal="false" data-product_title_color="000000" data-next_page_button_text="Next page"></div>

<script type="text/javascript">
document.getElementById(&#39;ShopifyEmbedScript&#39;) || document.write(&#39;<script type="text/javascript" src="https://widgets.shopifyapps.com/assets/widgets/embed/client.js" id="ShopifyEmbedScript">&lt;\/script&gt;&#39;);
</script><noscript><a href="https://yourstorename.myshopify.com/cart/1590898625:1" target="_blank">Acquista il tuo prodotto</a></noscript> 

1. Salva le modifiche.

Modifica un Buy Button

Per modificare l’aspetto o le impostazioni di un Buy Button esistente, devi modificare il contenuto del tag div principale nel codice di incorporamento presente nell’origine HTML:

 

<div data-embed_type="product" data-shop="yourstorename.myshopify.com" data-product_name="Product Name" data-product_handle="product-name" data-has_image="true" data-display_size="compact" data-redirect_to="checkout" data-buy_button_text="Buy now" data-buy_button_out_of_stock_text="Out of Stock" data-buy_button_product_unavailable_text="Unavailable" data-button_background_color="7db461" data-button_text_color="ffffff" data-product_modal="false" data-product_title_color="000000" data-next_page_button_text="Next page"></div>

 

Ogni caratteristica del Buy Button incorporato è controllata da un attributo separato nel tag div principale. Puoi aggiungere, rimuovere o aggiornare questi attributi direttamente nell’origine HTML.

Ad esempio, se vuoi che un Buy Button esistente porti l’utente alla pagina del prodotto anziché alla pagina del check-out:

1. Apri l’origine HTML della pagina contenente il Buy Button che intendi modificare.

2. Trova l’attributo data-redirect_to all’interno del tag div principale del codice di incorporamento del Buy Button:

   data-redirect_to="checkout"

3. Cambia il valore dell'attributo in product:

   data-redirect_to="product"

4. Salva le modifiche.

Il tag div principale di un Buy Button ha diversi attributi che puoi modificare:

Attributi modificabili del tag Buy Button

Attributo	Valore	Default
data-shop	Il dominio myshopify (ad esempio nomenegozio.myshopify.com) collegato al pulsante.	Il tuo dominio Shopify
data-product_handle	L’handle del prodotto in primo piano, basato sul titolo del prodotto. Ognuno dei tuoi prodotti ha un handle univoco in Shopify.	L’handle del prodotto in primo piano
data-embed_type	Distingue tra codice di incorporamento per Buy Button, collezioni incorporate e carrelli incorporati. I valori possibili sono product, cart e collection.	prodotto
data-display_size	La larghezza massima dell’intero codice di incorporamento (non del pulsante). Può essere compact (230 px) o regular (450 px). Si applica solo a un Buy Button per un singolo prodotto.	compact
data-has_image	Indica se si tratta di un incorporamento completo del prodotto (true) o solo del Buy Button (false).	true
data-redirect_to	La destinazione del link del Buy Button. Può essere checkout, product o cart. Se vuoi che il Buy Button si colleghi a un carrello incorporato nella stessa pagina, data-redirect_to deve essere cart.	check-out
data-product_modal	Attiva la visualizzazione della finestra modale del prodotto quando si fa clic su un prodotto. Se il valore di data-redirect_to è modal, questo attributo deve essere true, altrimenti deve essere false.	false
data-buy_button_text	Il testo visualizzato sul Buy Button.	Acquista ora
data-button_background_color	Il codice esadecimale del colore del Buy Button, senza il carattere #. Può contenere tre o sei caratteri esadecimali.	7db461
data-button_text_color	Il codice esadecimale del colore del testo del Buy Button, senza il carattere #. Può contenere tre o sei caratteri esadecimali.	ffffff
data-background_color	Il colore di sfondo dell’area che circonda il Buy Button. Può essere un codice esadecimale (che seguirà le regole sopra citate) o transparent. Se è transparent, non viene applicata alcuna spaziatura al contenuto dell’incorporamento.	transparent
data-show_product_price	Impostazione sostitutiva di visualizzazione del prezzo del prodotto. Può essere true o false.	Il valore corrente di data-has_image
data-show_product_title	Impostazione sostitutiva di visualizzazione del titolo del prodotto. Può essere true o false.	Il valore corrente di data-has_image
data-buy_button_out_of_stock_text	Il testo che appare quando un prodotto è esaurito.	Esaurito
data-buy_button_product_unavailable_text	Il testo che appare quando un prodotto non è disponibile.	Non disponibili
data-product_title_color	Il codice esadecimale del colore del testo del titolo del prodotto, senza il carattere #. Può contenere tre o sei caratteri esadecimali.	000000

Modifica il carrello del tuo sito web

Se vuoi cambiare l’aspetto o il comportamento del carrello del tuo sito web, devi aggiungere un frammento separato di codice HTML e quindi modificarne gli attributi. Ogni attributo controlla una diversa impostazione dell’aspetto o del funzionamento del carrello.

Per modificare il carrello del tuo sito web:

1. Apri l’origine HTML della pagina contenente il carrello che desideri modificare.

2. Incolla il seguente codice:

<div data-sticky="true" data-embed_type="cart" data-shop="your-shop-name.myshopify.com"></div>
<script type="text/javascript">document.getElementById('ShopifyEmbedScript') || document.write('<script type="text/javascript" src="https://widgets.shopifyapps.com/assets/widgets/embed/client.js" id="ShopifyEmbedScript"><\/script>');</script>

1. Sostituisci your-shop-name.myshopify.com con l'indirizzo myshopify.com del tuo negozio.

2. Aggiungi gli attributi rilevanti al tag div principale del carrello e modificali includendo il valore che desideri. Ad esempio, se desideri modificare il testo visualizzato nella parte superiore del carrello, devi aggiungere data-cart_title="your text" al tag div principale nello frammento di codice. Il risultato sarà simile a questo:

<div data-sticky="true" data-embed_type="cart" data-shop="your-shop-name.myshopify.com" data-cart_title="your text">

1. Al termine, salva le modifiche.

Attributi del carrello

Nota

Assicurati che gli attributi del carrello che aggiungi o modifichi siano inclusi nello stesso tag <div> contenente l'attributo data-embed_type="cart" e non nel tag <div> contenente l'attributo data-embed_type="product".

Esistono molti attributi che puoi usare per personalizzare il carrello del tuo sito web:

Attributi di personalizzazione del carrello

Attributo	Valore	Default
data-shop	Il dominio myshopify pertinente (ad esempio nomenegozio.myshopify.com).	Il tuo dominio Shopify
data-embed_type	Distingue tra codice di incorporamento per Buy Button, collezioni incorporate e carrelli incorporati. I valori possibili sono product, cart e collection.	carrello
data-checkout_button_text	Il testo visualizzato sul pulsante che porta alla pagina di check-out dal carrello (non il pulsante del carrello).	Check-out
data-button_text_color	Il codice esadecimale del colore del testo del pulsante del carrello, senza il carattere #. Può contenere tre o sei caratteri esadecimali.	ffffff
data-button_background_color	Il codice esadecimale del colore del pulsante del carrello, senza il carattere #. Può contenere tre o sei caratteri esadecimali.	7db461
data-background_color	Il colore di sfondo dell’area che circonda il carrello incorporato. Può essere un codice esadecimale (che seguirà le regole sopra citate) o transparent. Se è transparent, non viene applicata alcuna spaziatura al contenuto dell’incorporamento.	transparent
data-text_color	Il codice esadecimale del colore del testo del pulsante del carrello, senza il carattere #. Può contenere tre o sei caratteri esadecimali.	000000
data-accent_color	Il codice esadecimale del colore del bordo attorno al carrello, senza il carattere #. Può contenere tre o sei caratteri esadecimali.	000000
data-cart_title	Il testo che appare nella parte superiore del carrello incorporato quando è aperto in una pagina.	Il tuo carrello
data-cart_total_text	Il testo che appare accanto all’importo totale nel carrello incorporato.	Totale
data-discount_notice_text	L’indicazione di sconto che appare nel carrello incorporato.	Spedizione e codici di sconto aggiunti al check-out.
data-sticky	Indica se il pulsante viene visualizzato nel punto in cui è inserito nel codice o se è allineato al lato della pagina. I carrelli incorporati creati di recente hanno questa impostazione su true nel codice di incorporamento generato.	false
data-empty_cart_text	Il testo che appare se il carrello è vuoto.	Il tuo carrello è vuoto
data-next_page_button_text	Il testo che appare sul pulsante Pagina successiva all’interno di una collezione incorporata.	Pagina successiva

Modifica una collezione incorporata

Il codice di incorporamento per una collezione incorporata include due elementi div. Il primo div contiene il codice per un carrello incorporato e il secondo div contiene il codice per i Buy Button incorporati, che assumono la forma di un pulsante con finestra modale per ogni prodotto della collezione.

Nota

Il codice per il carrello incorporato e il Buy Button può essere modificato come descritto sopra, ma l’attributo data-redirect_to deve essere impostato su modal e data-product_modal deve essere true.

Il secondo elemento div contiene anche i seguenti attributi:

Definizione degli attributi nel codice per un Buy Button

Attributo	Valore	Default
data-collection_handle	L’handle della collezione in primo piano, basato sul titolo della collezione. Ognuna delle tue collezioni ha un handle univoco in Shopify.	Handle della collezione in evidenza
data-embed_type	Distingue tra codice di incorporamento per Buy Button, collezioni incorporate e carrelli incorporati. I valori possibili sono product, cart e collection.	collezione