Pop

Et minimalistisk tema som er designet til å gjøre innholdet ditt tilgjengelig. Pop er ideelt for butikker med lagerbeholdninger som er små til middels. Pop er designet rundt et stort sidefelt for navigasjon som gjør innholdet ditt lett tilgjengelig.

Eksempel på nettbutikk som bruker Pop

Temaredaktør

Bruk temaredigering til å tilpasse temaet. Ved hjelp av redigeringsprogrammet for temaer kan du redigere innholdet som vises i butikken din ved å legge til og redigere temaseksjoner. Du kan også endre butikkens utseende, følelse og funksjonalitet ved hjelp av temainnstillinger.

Temainnhold bygges med seksjoner. Seksjoner er tilpasningsbare blokker med innhold som avgjør layouten og utseendet på ulike sider i nettbutikken. Du kan legge til, fjerne, redigere og tilpasse seksjoner med det oppdaterte temaredigeringsprogrammet.

Shopifys temaer har følgende seksjonstyper:

  • Statiske seksjoner: Seksjoner som vises på forhåndsbestemte plasseringer i nettbutikken. Disse seksjonene kan ikke fjernes eller flyttes. Statiske seksjoner kan være topptekster, bunntekster, navigasjonsseksjoner eller innholdsseksjoner på sider som produktsider og samlingssider. Produkt-seksjonen bestemmer for eksempel utseendet på hver enkelt produktside i nettbutikken.
  • Dynamiske seksjoner: Valgfrie seksjoner som du kan bruke til å tilpasse layouten på startsiden. På butikkens startside kan du legge til, sortere og fjerne dynamiske seksjoner for å skape sidelayouten. Du kan legge til opptil 25 dynamiske seksjoner på startsiden din.

Du kan lese mer om Pop sine unike utvalg av seksjoner og hvordan du tilpasser dem slik at de passer til virksomeheten din.

Pop inkluderer følgende statiske deler:

  • Logo og meny
  • Kunngjøringslinje
  • Bunntekst
  • Produktsider
  • Samlingsider
  • Samlingsliste-side
  • Artikkel

Dynamiske seksjoner

Du kan legge til, flytte og fjerne disse seksjonene for å tilpasse hjemmesidens oppsett. Hvert tema har et unikt sett med seksjoner du kan velge fra.

Pop inkluderer følgende dynamiske deler:

  • Blogginnlegg
  • Samlingsliste
  • Fremhevet samling
  • Bilde med tekst
  • Lysbildefremvisning
  • Utvalgt produkt
  • Nyhetsbrev
  • Kart
  • Rik tekst
  • Video
  • Tilpasset HTML

Produktsider

I Produktside-delen kan du legge til eller fjerne disse elementene:

  • Produktmerket eller leverandøren
  • Bildezoom
  • Relaterte produkter
  • En mengdevelger
  • En dynamisk knapp for å gå til kassen
  • Ikoner for deling på sosiale medier

Slik redigerer du innstillingene for produktsider:

  1. Fra rullegardinmenyen i den øverste linjen velger du Produktsider.

  2. Klikk på Seksjoner.

  3. Klikk på Produktside.

  4. Merk av for Vis produktleverandør for å vise produktmerket eller leverandøren. Du må legge til en selger til produktet for å vise en merkevare eller selger.

  5. For å la kunder zoome inn ved å holde musepekeren over et produktbilde merker du av for Aktiver bildezoom.

  6. Merk av for Vis relaterte produkter for å vise et utvalg av relaterte produkter nederst på siden. Samlingen som produktet tilhører, fastslår hvilke relaterte produkter som vises. For at relaterte produkter skal vises, må du opprette en samling for produktet eller legge det til i en eksisterende samling. Hvis produktet ikke er en del av en samling, vises ingen relaterte produkter.

  7. Merk av for Vis mengdevelger for å vise en mengdevelger.

  8. For å vise en dynamisk knapp for å gå til kassen merker du av for Vis dynamisk knapp for å gå til kassen.

  9. Merk av for Aktiver produktdeling for å vise ikoner for deling på sosiale medier.

  10. Klikk på Lagre.

Nyhetsbrev

Du kan legge til registrering for nyhetsbrev på hjemmesiden. På den måten kan du samle inn kunders e-postadresser for markedsføringskampanjer via e-post. Du kan lese mer om e-postmarkedsføring på Shopify-bloggen.

Slik legger du til registrering for nyhetsbrev på hjemmesiden:

  1. Klikk på Seksjoner.

  2. Klikk på Legg til seksjon > Nyhetsbrev.

  3. Skriv inn en overskrift for registrering for nyhetsbrevet ditt i Overskrift-feltet. Standardoverskriften er «Abonner på nyhetsbrevet vårt».

  4. Skriv inn en underoverskrift for registrering for nyhetsbrevet ditt i Undertekst-feltet. Standardteksten er «Kampanjer, nye produkter og salg. Direkte til innboksen din.»

  5. Angi bakgrunnsfargen for delen med registrering for nyhetsbrev ved å klikke på Bakgrunnsfarge-kartet og velge en farge.

  6. Klikk på Lagre.

Video

Du kan legge til en video fra YouTube eller Vimeo på startsiden din. Videoer kan engasjere kunder og skape interesse for forretningen din.

Slik legger du til en video på hjemmesiden din:

  1. Klikk på Seksjoner.

  2. Klikk på Legg til seksjon > Video.

  3. Skriv inn en overskrift for videoen din i Overskrift-feltet.

  4. Skriv inn delingskoblingen for videoen i Videokobling-feltet.

  5. Klikk på Lagre.

Tilpasset HTML

I Tilpasset HTML-seksjonen kan du bruke HTML-kode til å lage tilpasset innhold til hjemmesiden din. Du kan for eksempel bruke HTML til å formatere tekstblokker, opprette tabeller eller legge inn innhold fra et eksternt nettsted.

Legg til en egendefinert HTML-seksjon på startsiden

  1. Klikk på Legg til del.

  2. Klikk på Egendefinert HTML og klikk deretter på Velg.

  3. Klikk på Egendefinert HTML og angi HTML-koden du vil legge til hjemmesiden.

  4. Klikk på Lagre.

Du kan bruke temainnstillingene til å tilpasse fargene og typografien i nettbutikken. Du kan også sette opp koblinger til kontoer på sosiale medier, redigere handlekurvinnstillinger og legge til et favorittikon.

Pop inkluderer følgende temainnstillinger:

  • Farger

  • Typografi

  • Favorittikon

  • Handlekurvside

  • Sosiale medier

  • Butikkens kasse

Farger

Du kan velge farger for de ulike delene av nettbutikken.

Tilpass fargeinnstillingene

  1. Klikk på Temainnstillinger.
  2. Klikk på Farger.
  3. For å åpne fargevelgeren klikker du på fargekartet for innholdstypefargen du vil endre. Det Nylig valgte området viser farger som nylig har blitt valgt for temaet ditt. Området Brukes for øyeblikket viser farger du bruker nå i andre deler av temaet ditt.

    For å angi en bestemt hexfargekode klikker du på tekstfeltet for å angi fargen.

    For å angi fargen til gjennomsiktig, må du slette hex-kodeverdien fra tekstfeltet.

  4. Klikk på Lagre.

Typografi

Du kan angi skriftstil og størrelse for teksten i nettbutikken. Du kan velge en systemskrift eller en egendefinert skrifttype.

Det anbefales at du bruker systemskrifter i butikken. Ved å bruke systemskrifter unngås nedlasting av nye skrifttyper til kundens datamaskin, noe som kan påvirke innlastningshastigheten av butikken negativt. Skrifttypen som vises på kundens datamaskin avhenger av hvilket operativsystem de bruker. Finn ut mer om systemskrifter.

Tilpass typografiinnstillingene

  1. Klikk på Temainnstillinger.

  2. Klikk på Typografi.

  3. For hver type tekst klikker du på Endre for å bruke fargevelgeren.

  4. Utforske skrifttyper ved hjelp av søkefeltet eller ved å klikke på Last inn mer.

    Du finner alle tilgjengelige skrifttyper i Shopifys skrifttypebibliotek.

  5. Klikk på navnet til skrittypen du vil endre.

  6. Hvis du vil endre skrifttypen til en annen stil, klikker du på navnet til den gjeldende skriftstilen og velger en ny skriftstil fra rullegardinmenyen.

  7. Klikk på Velg.

  8. Klikk på Lagre.

Sosiale medier

Du kan legge til knapper for deling på sosiale medier på produktene og blogginnleggene dine og koblinger til kontoene dine på sosiale medier.

For å tilpasse innstillingene for sosiale medier:

  1. Klikk på Temainnstillinger.

  2. Klikk på Sosiale medier.

  3. For å laste opp et bilde for deling på sosiale medier, klikker du på Velg bilde eller Utforsk gratisbilder i Bilde for deling på sosiale medier-området.

  4. I Sosiale kontoer-området skriver du inn koblingene til kontoene i de oppgitte feltene for å legge til koblinger til kontoene dine på sosiale medier. Oppgi fullstendige koblinger, for eksempel https://instagram.com/shopify eller https://twitter.com/shopify.

  5. For å legge til knapper for deling på sosiale medier i produktene og blogginnleggene dine merker du av noen eller alle avmerkingsboksene i Alternativer for deling på sosiale medier-området.

- **Share on Facebook**
- **Tweet on Twitter**
- **Pin on Pinterest** (not available for blog post sharing)
  1. Klikk på Lagre.

Legg til undermenyer i sidefeltet

Du må opprette menyer i Navigasjon-siden din for å legge til rullegardinmenyer i hovedmenyen din. Denne artikkelen viser hvordan du gjør det.

En proporsjonalt kompakt logo ser best ut i Pop-temaet, siden temaet viser logoen i et sidefelt. Bannerlignende logoer med stor bredde og relativt liten høyde ser ikke bra ut i det temaet.

Maksimumsbredden for logoen er 450 piksler, og maksimumshøyden er 200 piksler. Størrelsen til den opplastede logofilen blir endret, slik at den passer disse begrensningene.

Det ideelle formatet er PNG.

Reduser mellomrom rundt logoen i sidefeltet

Før du fjerner fyll som er lagt til av Pop-temaet over og under logoen, er det ekstremt viktig å beskjære alt fyll som kan komme fra selve bildet. Du må beskjære den negative plassen eller gjennomsiktige pikslene som omgir logografikken, før du laster opp filen til Shopify.

Her ser du en logo med masse negativ plass:

Her er samme logo når den er beskjært – den negative plassen er blitt fjernet fra den:

Den ubeskjærte logoen vises nedenfor når den brukes i Pop-temaet:

Den beskjærte logoen vises nedenfor når den brukes i Pop-temaet:

Når du har lastet opp en beskjært logo til temaaktivaene dine, kan du justere bredden til sidefeltet ved å gå til redigeringsprogrammet for temaer. I Overskrift og navigasjon-delen redigerer du verdien «Størrelse > Menybredde for datamaskin" etter behovene dine.

Som et endelig, ustøttet tiltak kan du følge disse trinnene for å redusere fyll over og under logoen:

  1. Under Aktiva klikker du på timber.scss.liquid for å åpne stilarket for temaet i det nettbaserte redigeringsprogrammet for kode, eventuelt kan du gå til denne nettadressen.

  2. Nederst i filen legger du til dette:

{% 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. Lagre filen.

Rediger innstillingene for produktsiden

I Produktside-delen kan du legge til eller fjerne disse elementene:

  • Produktmerket eller leverandøren
  • Bildezoom
  • Relaterte produkter
  • En mengdevelger
  • En dynamisk knapp for å gå til kassen
  • Ikoner for deling på sosiale medier

Slik redigerer du innstillingene for produktsider:

  1. Fra rullegardinmenyen i den øverste linjen velger du Produktsider.

  2. Klikk på Seksjoner.

  3. Klikk på Produktside.

  4. Merk av for Vis produktleverandør for å vise produktmerket eller leverandøren. Du må legge til en selger til produktet for å vise en merkevare eller selger.

  5. For å la kunder zoome inn ved å holde musepekeren over et produktbilde merker du av for Aktiver bildezoom.

  6. Merk av for Vis relaterte produkter for å vise et utvalg av relaterte produkter nederst på siden. Samlingen som produktet tilhører, fastslår hvilke relaterte produkter som vises. For at relaterte produkter skal vises, må du opprette en samling for produktet eller legge det til i en eksisterende samling. Hvis produktet ikke er en del av en samling, vises ingen relaterte produkter.

  7. Merk av for Vis mengdevelger for å vise en mengdevelger.

  8. For å vise en dynamisk knapp for å gå til kassen merker du av for Vis dynamisk knapp for å gå til kassen.

  9. Merk av for Aktiver produktdeling for å vise ikoner for deling på sosiale medier.

  10. Klikk på Lagre.

Beste typer produktbilder for Pop

Bilder med høyere oppløsning ser bedre og mer profesjonelle ut i Pop-temaet. Derfor bør du gå for bilder som er minst 1024 x 1024 piksler. Bilder blir automatisk skalert ned når det er nødvendig, så du bør bruke høyest mulig bildekvalitet.

Bilder med høyere oppløsning er spesielt viktig hvis du bruker Bildezoom-funksjonen, som du kan aktivere i redigeringsprogrammet for temaer i Produktsider-delen.

Ideelt sett har de utvalgte bildene for alle produktene dine samme bredde-til-høyde-forhold, slik at de ser best mulig ut på samlingsider.

Er du klar til å begynne å selge med Shopify?

Prøv det gratis