Osta-painikkeen tai sulautetun ostoskorin muokkaaminen tai poistaminen

Tämä sivu on tulostettu Aug 10, 2022. Nykyinen versio on osoitteessa https://help.shopify.com/fi/manual/online-sales-channels/buy-button/legacy-edit-delete.

Osta-painikkeet ja ostoskorit luodaan upotuskoodista, jonka lisäät verkkosivusi HTML-lähdekoodiin. Jos haluat muuttaa painikkeen tai ostoskorin ulkoasua tai käyttäytymistä verkkosivulla, sinun on vaihdettava siihen liittyvä upotuskoodi.

Poista Osta-painike, sulautettu kokoelma tai sulautettu ostoskori

Jos haluat poistaa olemassa olevan Osta-painikkeen, kokoelman tai sulautetun ostoskorin:

  1. Avaa Osta-painikkeen, sulautetun kokoelman tai sulautetun ostoskorin sisältävän verkkosivun lähde-HTML.

  2. Poista koko upotuskoodi lähde-HTML:stä. Upotuskoodi näyttää seuraavalta Osta-painikkeen koodilta:

 

<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">Osta tuotteesi</a></noscript>
  1. Tallenna muutokset.

Muokkaa Osta-painiketta

Jos haluat muuttaa olemassa olevan Osta-painikkeen ulkoasua tai asetuksia, sinun on muokattava sen div-päätunnisteen sisältöä upotuskoodissa, joka näkyy lähde-HTML:ssä:

 

<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>

Sulautetun Osta-painikkeen jokaista ominaisuutta ohjaa erillinen ominaisuus div-päätunnisteessa. Voit lisätä, poistaa tai päivittää näitä ominaisuuksia suoraan lähde-HTML:ssä.

Jos esimerkiksi haluat aiemmin luodun Osta-painikkeen ohjaavan käyttäjän tuotesivulle kassasivun sijaan:

  1. Avaa muutettavan Osta-painikkeen sisältävän sivun HTML.

  2. Etsi data-redirect_to-ominaisuus Osta-painikkeen upotuskoodin div-päätunnisteesta: 

     data-redirect_to="checkout"

  3. Muuta ominaisuuden arvoksi product : 

     data-redirect_to ="product"

  4. Tallenna muutokset.

Osta-painikkeen div-päätunnisteella on monia muokattavia ominaisuuksia:

Osta-painikkeen muokattavat tunnisteominaisuudet
Ominaisuus Arvo Oletus
data-shop Painikkeelle yhdistetty myshopify-verkkotunnus (esim. kaupannimi.myshopify.com). Shopify-verkkotunnus
data-product_handle Esittelyssä olevan tuotteen nimitunnus, joka perustuu tuotteen nimeen. Jokaisella tuotteellasi on yksilöllinen nimitunnus Shopifyssa. Esittelyssä olevan tuotteen nimitunnus
data-embed_type Erottelee Osta-painikkeiden, sulautettujen kokoelmien ja sulautettujen ostoskorien upotuskoodin. Mahdolliset arvot ovat product (tuote), cart (ostoskori) ja collection (kokoelma). tuote
data-display_size Koko sulautuksen (ei painikkeen) enimmäisleveys. Voi olla compact (230 pikseliä) tai regular (450 pikseliä). Koskee vain yhtä tuotteen Osta-painiketta. kompakti
data-has_image Joko tuotteen täydellinen upotus (true) vai vain Osta-painike (false). tosi
data-redirect_to Minne Osta-painike vie. Vaihtoehtoja ovat checkout, product, tai cart. Jos haluat, että Osta-painike on yhteydessä samalla sivulla olevaan sulautettuun ostoskoriin, sen data-redirect_to on oltava cart. maksu kassalla
data-product_modal Avaa tuotteen ponnahdusikkunan, kun tuotetta klikataan. Jos arvo data-redirect_to on modal, tämän ominaisuuden on oltava true, muussa tapauksessa sen tulisi olla false . epätosi
data-buy_button_text Osta-painikkeessa näkyvä teksti. Osta nyt
data-button_background_color Osta-painikkeen värin heksakoodi ilman #-merkkiä. Voi sisältää kolme tai kuusi heksamerkkiä. 7db461
data-button_text_color Osta-painikkeen tekstin värin hex-koodi ilman #-merkkiä. Voi sisältää kolme tai kuusi heksamerkkiä. ffffff
data-background_color Osta-painiketta ympäröivän alueen väri. Väri voi olla heksakoodi (edellä mainittujen sääntöjen puitteissa) tai läpinäkyvä. Jos alue on läpinäkyvä, sulautuksen sisältöön ei lisätä täytettä. läpinäkyvä
data-show_product_price Ohitus sille, näytetäänkö tuotteen hinta. Voi olla true (tosi) tai false (epätosi) . Attribuutin data-has_image nykyinen arvo
data-show_product_title Ohitus sille, näytetäänkö tuotteen nimi. Voi olla true (tosi) tai false (epätosi) . Attribuutin data-has_image nykyinen arvo
data-buy_button_out_of_stock_text Teksti, joka näkyy, kun tuote on loppunut varastosta. Loppunut varastosta
data-buy_button_product_unavailable_text Teksti, joka tulee näkyviin, kun tuotetta ei ole saatavana. Ei käytettävissä
data-product_title_color Tuotenimen tekstin heksakoodi ilman #-merkkiä. Voi sisältää kolme tai kuusi heksamerkkiä. 000000

Sivuston ostoskorin muokkaus

Jos haluat muuttaa sivustosi ostoskoristasi ulkoasua tai käyttäytymistä, sinun on lisättävä erillinen HTML-koodia koskeva koodinpätkä ja muokattava sen ominaisuuksia. Ominaisuuksilla ohjataan sitä, miltä ostoskori näyttää tai miten se toimii.

Jos haluat muokata sivustosi ostoskoria:

  1. Avaa sen sivun HTML, joka sisältää muokattavan ostoskorin.

  2. Liitä seuraava koodi:

<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. Korvaa your-shop-name.myshopify.com kauppasi myshopify.com-osoitteella.

  2. Lisää asianmukaiset ominaisuudet ostoskorin div-päätunnisteeseen ja muuta sitä niin, että se sisältää siihen haluamasi arvon. Jos esimerkiksi haluat muuttaa ostoskorisi yläosassa näkyvää tekstiä, sinun on lisättävä data-cart_title="your text" koodinpätkän div-päätunnisteeseen. Lopputulos näyttäisi seuraavalta:

<div data-sticky="true" data-embed_type="cart" data-shop="your-shop-name.myshopify.com" data-cart_title="your text">
  1. Kun olet valmis, tallenna muutokset.

Ostoskorin määritteet

Voit käyttää monia ominaisuuksia sivuston ostoskorin mukauttamiseen:

Ostoskorin mukautusominaisuudet
Ominaisuus Arvo Oletus
data-shop Asiaankuuluva myshopify-verkkotunnus (kuten kauppasi.myshopify.com ). Shopify-verkkotunnus
data-embed_type Erottelee Osta-painikkeiden, sulautettujen kokoelmien ja sulautettujen ostoskorien upotuskoodin. Mahdolliset arvot ovat product (tuote), cart (ostoskori) ja collection (kokoelma). ostoskori
data-checkout_button_text Teksti, joka näkyy painikkeessa, joka vie kassasivulle ostoskoristasi (ei ostoskoripainike). Kassa
data-button_text_color Ostoskoripainikkeen tekstin värin heksakoodi ilman #-merkkiä. Voi sisältää kolme tai kuusi heksamerkkiä. ffffff
data-button_background_color Ostoskoripainikkeen värin heksakoodi ilman #-merkkiä. Voi sisältää kolme tai kuusi heksamerkkiä. 7db461
data-background_color Sulautettua ostoskoria ympäröivän alueen taustaväri. Väri voi olla heksakoodi (edellä mainittujen sääntöjen puitteissa) tai läpinäkyvä. Jos alue on läpinäkyvä, sulautuksen sisältöön ei lisätä täytettä. läpinäkyvä
data-text_color Ostoskoripainikkeen tekstin värin heksakoodi ilman #-merkkiä. Voi sisältää kolme tai kuusi heksamerkkiä. 000000
data-accent_color Ostoskorin ympärillä näkyvän reunaviivan värin heksakoodi ilman #-merkkiä. Voi sisältää kolme tai kuusi heksamerkkiä. 000000
data-cart_title Teksti, joka näkyy sivulla avattuna olevan sulautetun ostoskorin yläosassa. Ostoskorisi
data-cart_total_text Teksti, joka näkyy sulautetun ostoskorin kokonaissumman vieressä. Yhteensä
data-discount_notice_text Sulautetussa ostoskorissa näkyvä alennusilmoitus. Lähetys- ja alennuskoodit lisätään kassalla.
data-sticky Ilmaisee, näkyykö painike paikassa, johon se on asetettu merkinnässä, vai pysyykö se sivun reunassa. Hiljattain luoduissa sulautetuissa ostoskoreissa arvoksi on upotuskoodissa määritetty true. epätosi
data-empty_cart_text Teksti, joka tulee näkyviin, jos ostoskori on tyhjä. Ostoskorisi on tyhjä
data-next_page_button_text Sulautetun kokoelman Seuraava sivu -painikkeessa näkyvä teksti. Seuraava sivu

Sulautetun kokoelman muokkaaminen

Sulautetun kokoelman upotuskoodi sisältää kaksi div-elementtiä. Ensimmäinen div sisältää sulautetun ostoskorin koodin ja toinen div sisältää sulautettujen Osta-painikkeiden koodin, joka muodostaa ponnahdusikkunanpainikkeen jokaista tuotetta varten.

Toinen div-elementti sisältää myös seuraavat ominaisuudet:

Osta-painikkeen koodin ominaisuuksien määritelmät
Ominaisuus Arvo Oletus
data-collection_handle Esittelyssä olevan kokoelman nimitunnus, joka perustuu kokoelman nimeen. Jokaisella kokoelmallasi on yksilöllinen nimitunnus Shopifyssa. Esittelyssä olevan kokoelman nimitunnus
data-embed_type Erottelee Osta-painikkeiden, sulautettujen kokoelmien ja sulautettujen ostoskorien upotuskoodin. Mahdolliset arvot ovat product (tuote), cart (ostoskori) ja collection (kokoelma). kokoelma

Valmiina aloittamaan Shopifyssa?

Kokeile ilmaiseksi