Vaihe 1: Hae Photta-widget-avaimesi
Kirjaudu sisään Photta Business-hallintapaneeliin osoitteessa business.photta.app. Siirry kohtaan Settings → API Keys ja etsi julkinen avaimesi (publishable key) — se alkaa merkeillä pk_live_ ja näyttää tältä: pk_live_xxxxxxxxxxxxxxxxxxxxxxxx. Klikkaa kopiointikuvaketta avaimen vieressä. Tämä on ainoa tunnus, jota tarvitset Shopify-integraatioon; älä koskaan liitä salaista sk_live_-avaintasi mihinkään julkiseen koodiin.
Jos sinulla ei vielä ole tiliä, klikkaa 'Start free trial' Photta Business-sivulla. Kokeilujakso antaa sinulle 50 ilmaista sovitusta ilman luottokorttia. pk_live_-avaimesi on saatavilla heti, kun olet vahvistanut sähköpostiosoitteesi ja rekisteröinyt kauppasi verkkotunnuksen kohdassa Settings → Allowed Domains.
Vaihe 2: Avaa Shopify-teemasi koodi
Mene Shopify-hallintapaneelissasi kohtaan Online Store → Themes. Klikkaa aktiivisen teemasi vieressä olevaa kolmen pisteen valikkoa ja valitse Edit code. Koodieditori avaa tiedostorakenteen vasemmalle. Avaa Layout-kansio ja klikkaa theme.liquid — tämä on päämalli, joka kietoo sisäänsä kauppasi jokaisen sivun.
Käytä selaimen sisäänrakennettua hakua (Cmd+F tai Ctrl+F) koodieditorissa ja etsi </body>. Sinun pitäisi löytää tasan yksi osuma tiedoston loppupäästä, juuri ennen </html>-tunnistetta. Aseta kohdistin riville juuri ennen </body>-tunnistetta. Kaikki tähän liittämäsi latautuu kauppasi jokaisella sivulla, mikä on juuri se, mitä tarvitset.
Vaihe 3: Liitä Photta-skriptinpätkä
Liitä seuraava pätkä riville juuri ennen </body>-tunnistetta ja korvaa pk_live_... vaiheessa 1 kopioidulla avaimellasi: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." defer></script>. Defer-attribuutti on tärkeä — se estää skriptiä estämästä sivun renderöintiä varmistaen samalla, että widget alustetaan DOM-rakenteen ollessa valmis.
Klikkaa Save koodieditorin oikeasta yläkulmasta. Shopify tallentaa tiedoston ja näyttää vihreän vahvistusviestin. Sinun ei tarvitse julkaista uutta teemaversiota tai tehdä muuta — muutos on live-tilassa aktiivisessa teemassasi heti, kun klikkaat tallenna.
Vaihe 4: Varmista, että widget latautui oikein
Avaa mikä tahansa tuotesivu kaupassasi uuteen selaimen välilehteen (käytä yksityistä ikkunaa välttääksesi kirjautuneen käyttäjän välimuistiongelmat). Rullaa alas tuoteosioon — sinun pitäisi nähdä 'Try it on' -painike lähellä Add to Cart -painiketta. Klikkaa sitä, lataa testikuva ja varmista, että sovitustulos tulee näkyviin. Jos näet painikkeen, asennus on valmis.
Jos painiketta ei näy, avaa selaimen kehittäjäkonsoli (F12 → Console-välilehti) ja etsi virheilmoituksia phottalta tai sdk.js-tiedostosta. Yleisin ongelma on verkkotunnuksen täsmäämättömyys: kauppasi verkkotunnuksen on oltava listattuna Business Dashboardin kohdassa Settings → Allowed Domains. Lisää se sinne, odota 30 sekuntia ja lataa tuotesivu uudelleen.
Vaihe 5: Mukauta widgetin värit brändisi mukaisiksi
Oletuksena widget käyttää Photta-palvelun neutraalia tummaa palettia. Täsmätäksesi sen brändiisi, lisää data-attribuutteja samaan skriptitunnisteeseen: data-color-primary toimintopainikkeen värille (hex-arvo, esim. #D4AF37) ja data-color-surface modaali-ikkunan taustalle. Esimerkki: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." data-color-primary="#D4AF37" defer></script>. Tallenna theme.liquid uudelleen näiden lisäysten jälkeen.
Täydellistä CSS-tason ohitusta varten Photta-widget tarjoaa CSS-muuttujia --photta-*-nimiavaruudessa, joita voit muokata teemasi perus-CSS-tiedostosta. Growth-paketti ja sitä ylemmät tasot mahdollistavat myös 'Powered by Photta' -merkin piilottamisen Business Dashboardin kautta kohdasta Customize → Branding. Muutokset tulevat voimaan reaaliajassa tallennuksen jälkeen — uudelleenjulkaisua tai widgetin päivitystä ei tarvita.