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 muokkaustyökalurivi on jaettu osioihin ja teeman asetuksiin.

Teemaeditorin muokkaustyökalurivi, joka näyttää osiot ja teemojen asetukset

Osioiden kautta voit muokata kaupan eri sivujen sisältöä ja asettelua. Teemojen asetusten avulla voit muokata kaupan fontteja ja värejä ja tehdä muutoksia sosiaalisen median linkkeihin ja kassalla maksuun.

Osiot ovat muokattavia sisällön lohkoja, jotka määrittävät verkkokaupassasi olevien sivujen ulkoasun.

  • Koti-osioissa on ominaisuuksia, kuten diaesitys ja rekisteröinti uutiskirjeen vastaanottoa varten, joita voit lisätä, järjestää uudelleen tai poistaa. Kotisivullasi voi olla enintään 25 osiota.

  • Jokaisella sivutyypillä on omat osionsa. Esimerkiksi tuotesivu-osiossa määritetään kunkin verkkokaupan tuotesivun asettelu.

  • Sivun osiot ovat aina tietyissä paikoissa verkkokaupassa. Voit muokata niitä, mutta et voi järjestää niitä uudelleen tai poistaa niitä.

  • Jokainen teema sisältää kiinteät osiot, kuten otsikko ja alatunniste, jotka näkyvät verkkokaupan jokaisella sivulla.

Voit oppia -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 lähennys ja loitonnus
  • Vastaavat tuotteet
  • Määrän valitsin
  • Dynaaminen kassapainike
  • Sosiaalisen median jakamiskuvakkeet

Voit muokata tuotesivujen asetuksia seuraavasti:

  1. Valitse yläpalkin pudotusvalikosta Tuotesivut.

  2. Napauta 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ää sosiaalisen median jakamiskuvakkeet valitsemalla Ota tuotteen jakaminen käyttöön.

  10. Valitse 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.

Verkkosivun uutiskirje-osa. Näkyvissä on asiakkaille tarkoitettu kenttä, johon he voivat syöttää sähköpostiosoitteensa, sekä painike, jossa lukee

Voit lisätä kotisivulle uutiskirjeen tilauksen seuraavasti:

  1. Etsi Pop ja napauta Mukauta.

  2. Napauta Osat.

  3. Valitse Lisää osa > Uutiskirje.

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

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

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

  7. Valitse 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. Etsi Pop ja napauta Mukauta.

  2. Napauta Osat.

  3. Valitse Lisää osa > Video.

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

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

  6. Valitse 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.

Lisää mukautettu HTML-koodi kotisivullesi seuraavasti:

  1. Etsi Pop ja napauta Mukauta.

  2. Napauta Osiot.

  3. Napauta Lisää osio.

  4. Valitse Laajennettu ulkoasu -kohdassa Mukautettu HTML > Lisää.

  5. Napauta Mukautettu HTML ja kirjoita HTML-koodi, jonka haluat lisätä kotisivullesi.

  6. Napauta Tallenna.

Teeman asetukset 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 kassalle

Värit

Voit valita värit verkkokauppasi eri osia varten.

Mukauta väriasetuksiasi

  1. Napauta **-kohdan vieressä **Mukauta.

  2. Napauta Teeman asetukset.

  3. Napauta Värit.

  4. Napauta jokaisen sisältötyypin kohdalla värimallia, niin saat värivalitsimen käyttöön:

    Teemaeditorin värivalitsin

- Ä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 värin läpinäkyväksi, napauta Ei mitään.

  1. Napauta Tallenna.

Typografia

Voit asettaa verkkokauppasi fontin ja fonttikoon.

Muokkaa typografia-asetuksia

  1. Napauta **-kohdan vieressä **Mukauta.

  2. Napauta Teeman asetukset.

  3. Napauta Typografia.

  4. Käytä fontinvalitsinta napsauttamalla kunkin tekstityypin kohdalla Muuta:

    Fontinvalitsimen

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

    Jos haluat nähdä kaikki käytettävissä olevat fontit, katso Shopifyn fonttikirjastoa.

  6. Napauta sen fontin nimeä, jota haluat käyttää.

  7. Jos haluat vaihtaa fontin tyyliä, kuten valita lihavoinnin tai kursivoinnin, napauta Normaali. Napauta seuraavaksi tyyliä, jota haluat käyttää, ja napauta sen jälkeen Valitse-painiketta:

    Fontinvalitsimessa valittavana olevat fontin korostukset

  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. Etsi Pop ja napauta Mukauta.

  2. Napauta Teeman asetukset.

  3. Valitse Sosiaalinen media.

  4. Jos haluat lähettää sosiaalisen median jakamiskuvan, valitse Sosiaalisen median jakamiskuva -kohdassa Valitse kuva tai Tutustu ilmaisiin kuviin.

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

  6. 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 Facebookiin - Twiittaa Twitterissä - Pinnaa Pinterestissä (ei voi käyttää blogijulkaisujen jakamiseen)

  1. Valitse 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.

Suurenna logoa mobiililaitteissa

Jotta logoa voi suurentaa missä tahansa asettelussa, on äärimmäisen tärkeää, että poistat kaikki tyhjät tilat tai läpinäkyvät pikselit logokuvan ympäriltä ennen kuin lähetät logotiedoston Shopify-alustaan.

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

Tässä on sama logo siistittynä - kun kaikki 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 tiedät, että logo ei pienenny sen sisältämän tyhjän tilan takia, voit säätää mobiililaitteilla näkyvän ylätunnisteen korkeutta niin, että logolle jää enemmän tilaa. Tämän seurauksena logo suurentuu.

Siirry teemaeditoriin ja valitse Ylätunniste ja navigointi -osassa "Koko > Valikon korkeus mobiililaitteella" ja muuta arvoa suuremmaksi.

Suurenna logoa sivupalkissa

Jotta logoa voi suurentaa missä tahansa asettelussa, on äärimmäisen tärkeää, että poistat kaikki tyhjät tilat tai läpinäkyvät pikselit logokuvan ympäriltä ennen kuin lähetät logotiedoston Shopify-alustaan.

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

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

Alla näkyy Pop-teemaan lähetetty logo, jossa on tyhjää tilaa:

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

Kun tiedät, että logo ei pienenny sen sisältämän tyhjän tilan takia, voit säätää sivupalkin leveyttä niin, että logolle jää enemmän tilaa. Tämän seurauksena logo suurentuu.

Siirry teemaeditoriin ja valitse Ylätunniste ja navigointi- osassa "Koko > Valikon leveys tietokoneella" ja muuta arvoa suuremmaksi.

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 lähetät 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. Napauta 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 lähennys ja loitonnus
  • Vastaavat tuotteet
  • Määrän valitsin
  • Dynaaminen kassapainike
  • Sosiaalisen median jakamiskuvakkeet

Voit muokata tuotesivujen asetuksia seuraavasti:

  1. Valitse yläpalkin pudotusvalikosta Tuotesivut.

  2. Napauta 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ää sosiaalisen median jakamiskuvakkeet valitsemalla Ota tuotteen jakaminen käyttöön.

  10. Valitse 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 Shopify-palvelussa?

Kokeile sitä ilmaiseksi