Osta-painikkeen tai sulautetun ostoskorin muokkaaminen tai poistaminen
Osta-painikkeet ja ostoskorit luodaan koodikatkelmista, jotka kopioit Shopify Administa ja liität verkkosivusi HTML-lähdekoodiin. Näitä koodikatkelmia kutsutaan upotuskoodiksi. Jos haluat muuttaa painikkeen tai ostoskorin ulkoasua tai käyttäytymistä, sinun on muokattava siihen liittyvää upotuskoodia.
Tällä sivulla
Poista Osta-painike, sulautettu kokoelma tai sulautettu ostoskori
Tee näin:
- Avaa Osta-painikkeen, sulautetun kokoelman tai sulautetun ostoskorin sisältävän verkkosivun lähde-HTML.
- Poista lähde-HTML:stä koko upotuskoodi, joka alkaa
<script data-shopify-buy-ui>
ja päättyy</script>
. Osta-painikkeen upotuskoodi näyttää seuraavalta:
- Tallenna muutokset.
Osta-painike, sulautettu kokoelma tai sulautettu ostoskori ei enää näy verkkosivulla.
Muokkaa Osta-painiketta
Jos haluat muuttaa olemassa olevan Osta-painikkeen ulkoasua tai asetuksia, sinun on muokattava lähde-HTML:ään lisäämääsi upotuskoodia.
Jokainen Osta-painike on koostettu erillisistä upotuskoodin komponenteista. Jos esimerkiksi lisäät verkkosivullesi tuotteen ostoskorin kanssa, upotuskoodi luo product
-komponentin, cart
-komponentin ja ostoskorin toggle
-komponentin:
Jos haluat, että tuotekomponentti avaa ponnahdusikkunan, jossa on tuotetietoja, upotuskoodi luo modal
-komponentin modalProduct
-komponentin:
Seuraavassa koodinpätkässä on erilliset product
- ja cart
-komponentit:
Nämä komponentit määritetään erikseen upotuskoodin määritysobjektien kautta. Voit muuttaa ostopainikkeiden ulkoasua tai käyttäytymistä muokkaamalla upotuskoodin määritysobjekteja.
Jokaisella komponentilla on monia muokattavia ominaisuuksia. Täydellinen luettelo muokattavissa vaihtoehdoista on kehittäjädokumentaatiossa. Jos haluat määrittää vaihtoehdon, jota ei vielä ole upotuskoodissa, sinun on lisättävä asianmukainen avain asianmukaiseen objektiin (katso esimerkki).
Komponentin tyylin muokkaaminen
Jokaisella komponentilla on sisäkkäinen styles
-määritysobjekti, jota voit muokata tai jonka voit lisätä muuttaaksesi komponentin ulkoasua. Näitä tyylejä muotoillaan samalla tavalla kuin CSS:ää. Jokainen styles
-objektin ylätason avain edustaa komponentin elementtiä, kuten otsikkoa tai painiketta. Tämän objektin sisällä kukin avain on CSS-ominaisuus (esimerkiksi "taustaväri" tai "reunus"), ja arvo on CSS-arvo.
Kelvollinen CSS-ominaisuus voidaan lisätä styles
-objektiin. Huomaa, että viivoja sisältävien ominaisuusnimien on oltava lainausmerkkien sisällä.
Lisätietoja CSS:n mukautuksesta saat kehittäjädokumentaatiosta.
Esimerkki: Ostokoriin johtavan linkin vaihtaminen tuotetietoja sisältävään ponnahdusikkunaan
Tässä esimerkissä voit muuttaa nykyistä upotuskoodia niin, että ohjaat asiakkaasi tuotetietoja sisältävään ponnahdusikkunaan tuotetietojen sijaan:
- Avaa muutettavan tuotesulautuksen sisältävän sivun HTML.
- Etsi
product
-määritysobjekti. - Etsi objektista
buttonDestination
-avain:
- Muuta kyseisen avaimen arvoksi
'modal'
(varmista, että sisällytät lainausmerkit):
- Tallenna muutokset.
Esimerkki: tuotesulautuksen asettelun muuttaminen
Tässä esimerkissä voit muuttaa tuotteen sulautuksen asettelua niin, että kuva näkyy yläosan sijasta sivulla:
- Avaa muutettavan tuotesulautuksen sisältävän sivun HTML.
- Etsi
product
-määritysobjekti. - Lisää
layout
-avain ja aseta arvoksi'horizontal'
:
- Tallenna muutokset.
Sivuston ostoskorin muokkaaminen
Jos haluat muuttaa sivustosi ostoskorin ulkoasua tai käyttäytymistä, sinun on muokattava upotuskoodin cart
-määritysobjektia.
Tee näin:
- Avaa sen sivun HTML, joka sisältää muokattavan ostoskorin.
- Etsi upotuskoodin
cart
-määritysobjekti:
- Muokkaa ominaisuutta, jota haluat muuttaa, tai lisää se. Täydellinen luettelo määritettävissä olevista ominaisuuksista on kehittäjädokumentaatiossa.
- Tallenna muutokset.
Sulautetun kokoelman muokkaaminen
Sulautetun kokoelman muokkaaminen muistuttaa tuotteen tai ostoskorin muokkaamista. Jos haluat muokata kokoelman tuotteiden ominaisuuksia (esimerkiksi kunkin tuotteen asettelua), sinun täytyy etsiä product
-määritysobjekti ja muokata sitä samalla tavalla kuin muokkaisit tuotteen sulautusta. Jos sen sijaan haluat muokata itse kokoelman ominaisuuksia (esimerkiksi Seuraava sivu -painikkeen tekstiä), muokkaa productSet
-avainta.
Jotkin ominaisuudet, kuten komponentin teksti, määritetään sisäkkäisillä objekteilla, jotka ovat muiden objektien sisällä olevia objekteja. Esimerkiksi Seuraava sivu -painikkeen teksti näkyy productSet
-komponentin text
-objektissa: