Pop

Minimalistinen teema, joka on suunniteltu pitämään sisältö helposti käytettävissä. Pop-teema sopii erinomaisesti kauppoihin, joilla on pieni tai keskisuuri varasto. Pop-teemassa keskiössä on sivupalkkinavigointi, joka pitää sisällön helposti saatavilla.

Esimerkki verkkokaupasta, jossa käytetään Pop-teemaa

Teemaeditori

Voit muokata teemaa teemaeditorilla. Teemaeditorin avulla voit muokata kaupassa näkyvää sisältöä lisäämällä ja muokkaamalla teemaosia. Voit myös muuttaa kaupan ulkoasua, tuntumaa ja toiminnallisuutta käyttämällä teeman asetuksia.

Teeman sisältö rakennetaan osien avulla. Osat ovat muokattavia sisältölohkoja, jotka määrittävät verkkokauppasi eri sivujen pohjan ja ulkoasun.

Staattiset osat ovat osia, jotka näkyvät verkkokauppasi ennalta määritetyissä sijainneissa. Näitä osia ei voi poistaa tai järjestää uudelleen. Staattiset osat saattavat sisältää ylä- tai alatunnisteita, navigointiosia tai sivuilla, kuten tuotesivuilla ja kokoelmasivuilla, olevia sisältöosia. Esimerkiksi Tuote-osa määrittää verkkokauppasi kunkin tuotesivun ulkoasun.

Muuttuvat osat ovat valinnaisia osia, joiden avulla voit mukauttaa etusivusi pohjaa. Kauppasi etusivulla voit lisätä, järjestää uudelleen ja poistaa muuttuvia osia sivun pohjan luomiseksi. Etusivullasi voi olla enintään 25 muuttuvaa osaa.

Voit oppia Pop-teeman ainutlaatuisesta osioista ja siitä, miten voit mukauttaa niitä yrityksesi tarpeisiin.

Pop sisältää seuraavat staattiset osat:

  • Logo ja valikko
  • Ilmoituspalkki
  • Alatunniste
  • Tuotesivut
  • Kokoelman sivut
  • Kokoelmaluettelosivu
  • Artikkeli

Dynaamiset osat

Voit muokata kotisivusi ulkoasua lisäämällä, järjestämällä uudelleen ja poistamalla dynaamisia osia. Jokaisessa teemassa on ainutlaatuinen valikoima valittavissa olevia dynaamisia osia.

Pop sisältää seuraavat muuttuvat osat:

  • Blogiviestit
  • Kokoelmaluettelo
  • Esittelyssä oleva kokoelma
  • Kuva tekstillä
  • Diaesitys
  • Esittelyssä oleva tuote
  • Uutiskirje
  • Kartta
  • Rich text
  • Video
  • Mukautettu HTML

Tuotesivut

Tuotesivu-osassa voit lisätä tai poistaa seuraavia elementtejä:

  • Tuotemerkki tai myyjä
  • Kuvan zoomaus
  • Vastaavat tuotteet
  • Määrän valitsin
  • Dynaaminen kassapainike
  • Some-jakamiskuvakkeet

Voit muokata tuotesivujen asetuksia seuraavasti:

  1. Valitse yläpalkin pudotusvalikosta Tuotesivut.

  2. Klikkaa Osat.

  3. Valitse Tuotesivu.

  4. Voit näyttää tuotemerkin tai myyjän valitsemalla Näytä tuotteen myyjä. Jotta tuotemerkki tai myyjä voidaan näyttää, sinun on lisättävä tuotteelle myyjä.

  5. Jos haluat, että asiakkaat voivat lähentää tuotekuvaa viemällä hiiren kuvan päälle, valitse Ota kuvan lähennys käyttöön.

  6. Voit näyttää valikoituja vastaavia tuotteita sivun alaosassa valitsemalla Näytä vastaavat tuotteet. Kokoelma, johon tuote kuuluu, määrittää näytettävät vastaavat tuotteet. Jos haluat näyttää vastaavia tuotteita, sinun täytyy luoda kokoelma tuotteelle tai lisätä tuote olemassa olevaan kokoelmaan. Jos tuote ei kuulu kokoelmaan, vastaavia tuotteita ei näytetä.

  7. Voit näyttää määrän valitsimen valitsemalla Näytä määrän valitsin.

  8. Voit näyttää dynaamisen kassapainikkeen valitsemalla Näytä dynaaminen kassapainike.

  9. Voit näyttää some-jakamiskuvakkeet valitsemalla Ota tuotteen jakaminen käyttöön.

  10. Napauta Tallenna.

Uutiskirje

Voit lisätä kotisivulle uutiskirjeen tilaustoiminnon. Toiminnon avulla voit kerätä sähköpostiosoitteita sähköpostilla toteutettavia markkinointikampanjoita varten. Lisätietoja sähköpostimarkkinoinnista on Shopify-blogissa.

Voit lisätä kotisivullesi uutiskirjeen tilauksen seuraavasti:

  1. Klikkaa Osat.

  2. Valitse Lisää osa > Uutiskirje.

  3. Kirjoita Otsikko-kenttään uutiskirjeen tilauksen otsikko. Oletusotsikko on "Tilaa uutiskirje".

  4. Kirjoita uutiskirjeen tilauksen alaotsikko Alateksti-kenttään. Oletusteksti on "Kampanjat, tuoteuutuudet ja alennusmyynnit. Suoraan postilaatikkoosi."

  5. Määritä uutiskirjeen tilaus -osan taustaväri napauttamalla Taustaväri-väriruutua ja valitsemalla väri.

  6. Napauta Tallenna.

Video

Voit lisätä kotisivulle YouTube- tai Vimeo-videon. Videot voivat houkutella asiakkaita ja herättää kiinnostusta yritykseesi.

Voit lisätä kotisivulle videon seuraavasti:

  1. Klikkaa Osat.

  2. Valitse Lisää osa > Video.

  3. Syötä videon otsikko Otsikko-kenttään.

  4. Syötä videon jakamislinkki Videon linkki -kenttään.

    YouTuben jakamislinkki näyttää tältä: https://youtu.be/OTJXAUZY9t0. Lisätietoja YouTube-videon jakamislinkin kopioimisesta on tässä YouTube-ohjeartikkelissa.

    Vimeo-jakamislinkki näyttää tältä: https://vimeo.com/281332510. Lisätietoja Vimeo-videon jakamislinkin kopioimisesta on tässä Vimeo-ohjekeskuksen artikkelissa.

  5. Napauta Tallenna.

Mukautettu HTML

Mukautettu HTML -osiossa voit luoda HTML-koodin mukautetun sisällön liittämiseksi kotisivullesi. HTML-koodilla voit esimerkiksi muotoilla tekstilohkoja, luoda taulukoita tai upottaa sisältöä kolmannen osapuolen verkkosivustosta.

Mukautetun HTML-osan lisääminen kotisivulle

  1. Klikkaa Lisää osio.

  2. Napauta Mukautettu HTMLja valitse sitten Valitse.

  3. Klikkaa Mukautettu HTML ja kirjoita HTML-koodi, jonka haluat lisätä kotisivullesi.

  4. Napauta Tallenna.

Teeman asetuksilla voit mukauttaa verkkokaupan värejä ja typografiaa. Voit myös määrittää linkkejä sosiaalisen median tileihin, muokata ostoskorin asetuksia ja lisätä favicon-kuvakkeen.

Pop sisältää seuraavat teeman asetukset:

  • Värit
  • Typografia
  • Favicon
  • Ostoskorisivu
  • Sosiaalinen media
  • Maksu kassalla

Värit

Voit valita värit verkkokauppasi eri osia varten.

Mukauta väriasetuksiasi

  1. Klikkaa Teeman asetukset.
  2. Klikkaa Värit.
  3. Klikkaa muutettavan sisältötyypin väriruutua avataksesi värivalitsimen. Äskettäin valittu ‑kohdassa näet värit, jotka olet äskettäin valinnut teemaan. Tällä hetkellä käytössä ‑kohta näyttää värit, joita käytät tällä hetkellä teeman muissa osissa.

    Jos haluat asettaa tietyn HEX-värikoodin, syötä väri klikkaamalla tekstikenttää.

    Jos haluat asettaa värin läpinäkyväksi, poista HEX-koodin arvo tekstikentästä.

  4. Napauta Tallenna.

Typografia

Voit määrittää verkkokaupassasi olevan tekstin fonttityylin ja -koon. Voit valita järjestelmän fontin tai mukautetun fontin.

On suositeltavaa, että käytät kaupassa järjestelmän fonttia. Järjestelmän fonttien käyttäminen estää uusien fonttien lataamisen asiakkaan tietokoneelle, mikä voi heikentää kaupan latausnopeutta. Asiakkaan tietokoneella näkyvä fontti riippuu asiakkaan käyttöjärjestelmästä. Lisätietoja järjestelmän fonteista.

Muokkaa typografia-asetuksia

  1. Klikkaa Teeman asetukset.

  2. Klikkaa Typografia.

  3. Käytä fontinvalitsinta napsauttamalla kunkin tekstityypin kohdalla Muuta.

  4. Selaa fontteja käyttämällä hakukenttää tai napauttamalla Lataa lisää.

    Katso kaikki käytettävissä olevat fontit Shopifyn fonttikirjastosta.

  5. Klikkaa sen fontin nimeä, jota haluat käyttää.

  6. Jos haluat vaihtaa fontin tyyliä, klikkaa nykyisen fonttityylin nimeä ja valitse sitten pudotusvalikosta uusi fonttityyli.

  7. Klikkaa Valitse.

  8. Napauta Tallenna.

Sosiaalinen media

Voit lisätä tuotteisiin ja blogijulkaisuihin sosiaalisen median jakamispainikkeita, ja voit myös lisätä linkkejä sosiaalisen median tileillesi.

Voit muokata sosiaalisen median asetuksia seuraavasti:

  1. Napauta teeman asetuksia.

  2. Klikkaa Sosiaalinen media.

  3. Jos haluat ladata some-jakamiskuvan, klikkaa Some-jakamiskuva ‑kohdassa Valitse kuva tai Tutustu ilmaisiin kuviin.

  4. Jos haluat lisätä linkkejä sosiaalisen median tileihin, syötä tilien linkit niille tarkoitettuihin kenttiin Sosiaalisen median tilit -kohdassa. Syötä täydelliset linkit, kuten https://instagram.com/shopify tai https://twitter.com/shopify.

    Linkit sosiaalisen median tileihin näkyvät verkkokaupan alatunnisteessa.

  5. Jos haluat lisätä tuotteisiin ja blogijulkaisuihin sosiaalisen median jakamispainikkeita, valitse Sosiaalisen median jakamisasetukset -kohdassa haluamasi tai kaikki valintaruudut.

    Voit lisätä seuraavat jakamispainikkeet:

- Jaa Facebookissa - Twiittaa Twitterissä - Pinnaa Pinterestissä (ei voi käyttää blogijulkaisujen jakamiseen)

  1. Napauta Tallenna.

Lisää alavalikkoja sivupalkkiin

Jos haluat lisätä päävalikkoon pudotusvalikkoja, sinun on luotava valikot Navigointi-sivulla. Tässä artikkelissa kuvataan tätä prosessia tarkemmin.

Optimaalinen kaupan logon koko

Suhteellisen pienikokoinen logo näyttää parhaalta Pop-teemassa, koska logo näytetään sivupalkissa. Bannerimaiset logot, joilla on suuri leveys ja suhteellisen pieni korkeus, eivät näytä hyvältä tässä teemassa.

Logon enimmäisleveys on 450 pikseliä ja enimmäiskorkeus 200 pikseliä. Lähettämäsi logotiedoston koko muutetaan niin, että se sopii näihin rajoituksiin.

Ihanteellinen tiedostomuoto on PNG.

Vähennä tyhjää tilaa sivupalkissa olevan logon ympäriltä

Ennen kuin poistat Pop-teemassa lisättyjä täytteitä logon ylä- ja alapuolelta, on äärimmäisen tärkeää, että siistit kaikki täytteet, jotka ovat peräisin itse kuvasta. Sinun täytyy poistaa tyhjät tilat tai läpinäkyvät pikselit logokuvan ympäriltä ennen kuin lataat logotiedoston Shopify-alustaan.

Tässä on logo, jonka ympärillä on runsaasti tyhjää tilaa:

Tässä on sama logo siistittynä - kun tyhjä tila on rajattu pois kuvasta:

Alla näkyy siistimätön logo, jota käytetään Pop-teemassa:

Alla näkyy siistitty logo, jota käytetään Pop-teemassa:

Kun olet lähettänyt siistityn logon teemasisältöön, voit säätää sivupalkin leveyttä siirtymällä teemaeditoriin. Valitse Ylätunniste ja navigointi -osassa "Koko > Valikon leveys tietokoneella" ja muuta arvo sopivaksi.

Viimeisenä tukemattomana toimenpiteenä on täytteen vähentäminen logon ylä- ja alapuolelta. Jos haluat vähentää täytettä, toimi seuraavasti:

  1. klikkaa Sisällöt-kohdassa timber.scss.liquid, jos haluat avata teeman tyyliohjeen verkkopohjaisessa koodieditorissa, tai siirry tähän URL-osoitteeseen.

  2. Lisää tiedoston loppuun tämä:

```sass {% comment %} The following media query function produces this: @media screen and (min-width: 1025px) { ... } Sidebar is only shown when width > 1025 pixels. {% endcomment %}

@include at-query ($min, $large) { .header-logo { margin-bottom: 30px /* original is 60px */; }

.site-header {
   padding-top: 30px /* original is 90px */;

   .hr--small {
     margin: 0 auto 10px /* original is 15px auto 30px */;
   }
 }

} ```

  1. Tallenna tiedosto.

Muokkaa tuotesivun asetuksia

Tuotesivu-osassa voit lisätä tai poistaa seuraavia elementtejä:

  • Tuotemerkki tai myyjä
  • Kuvan zoomaus
  • Vastaavat tuotteet
  • Määrän valitsin
  • Dynaaminen kassapainike
  • Some-jakamiskuvakkeet

Voit muokata tuotesivujen asetuksia seuraavasti:

  1. Valitse yläpalkin pudotusvalikosta Tuotesivut.

  2. Klikkaa Osat.

  3. Valitse Tuotesivu.

  4. Voit näyttää tuotemerkin tai myyjän valitsemalla Näytä tuotteen myyjä. Jotta tuotemerkki tai myyjä voidaan näyttää, sinun on lisättävä tuotteelle myyjä.

  5. Jos haluat, että asiakkaat voivat lähentää tuotekuvaa viemällä hiiren kuvan päälle, valitse Ota kuvan lähennys käyttöön.

  6. Voit näyttää valikoituja vastaavia tuotteita sivun alaosassa valitsemalla Näytä vastaavat tuotteet. Kokoelma, johon tuote kuuluu, määrittää näytettävät vastaavat tuotteet. Jos haluat näyttää vastaavia tuotteita, sinun täytyy luoda kokoelma tuotteelle tai lisätä se olemassa olevaan kokoelmaan. Jos tuote ei kuulu kokoelmaan, vastaavia tuotteita ei näytetä.

  7. Voit näyttää määrän valitsimen valitsemalla Näytä määrän valitsin.

  8. Voit näyttää dynaamisen kassapainikkeen valitsemalla Näytä dynaaminen kassapainike.

  9. Voit näyttää some-jakamiskuvakkeet valitsemalla Ota tuotteen jakaminen käyttöön.

  10. Napauta Tallenna.

Parhaat tuotekuvatyypit Pop-teemassa

Korkeamman resoluution valokuvat näyttävät Pop-teemassa viimeistellyiltä ja ammattimaisemmilta, joten suosittelemme, että pyrit käyttämään kuvia, joiden leveys on vähintään 1024 pikseliä ja korkeus vähintään 1024 pikseliä. Tarvittaessa kuvat pienennetään automaattisesti, joten laatu kannattaa aina pitää mahdollisimman hyvänä.

Korkeamman resoluution valokuvat ovat erityisen tärkeitä, jos käytät Kuvan lähennys ja loitonnus -toimintoa, jonka voit ottaa käyttöön teemaeditorin Tuotesivut-osassa.

Ihannetapauksessa tuotteiden esittelykuvilla on sama leveys-korkeussuhde, jolloin ne näyttävät parhaalta kokoelmasivuilla.

Oletko valmis aloittamaan myynnin Shopifyssa?

Kokeile ilmaiseksi