Pop

Een minimalistisch thema dat is ontworpen om je content toegankelijk te houden. Pop is ideaal voor winkels met kleine tot middelgrote voorraden Het thema is ontworpen rond navigatie via een grote zijbalk die je content eenvoudig toegankelijk houdt.

Voorbeeld van onlinewinkel met Pop

Themabewerker

Gebruik de themabewerker om je thema aan te passen. Met behulp van de themabewerker kun je de content bewerken die in je winkel wordt weergegeven door themasecties toe te voegen en te bewerken. Je kunt het uiterlijk en de functionaliteit van de winkel ook wijzigen met behulp van de thema-instellingen.

Thema-content is gebouwd met secties. Secties zijn aanpasbare blokken met content die de opmaak en het uiterlijk van verschillende pagina's van je onlinewinkel bepalen.

Statische secties zijn secties die worden weergegeven op vooraf bepaalde locaties in je onlinewinkel. Deze secties kunnen niet worden verwijderd of herschikt. Statische secties kunnen kop-en voetteksten, navigatie secties of contentsecties bevatten op pagina's zoals productpagina's en collectiepagina's. De sectie Product bepaalt bijvoorbeeld het uiterlijk van elke productpagina in je onlinewinkel.

Dynamische secties zijn optionele secties die je kunt gebruiken om de indeling van je homepage aan te passen. Op de homepage van je winkel, kun je dynamische secties toevoegen, verplaatsenen verwijderen om de pagina-indeling te maken. Je kunt maximaal 25 dynamische secties op je homepage hebben.

Je kunt meer leren over de unieke selectie secties van Pop en hoe je ze kunt aanpassen aan je behoeftes.

Pop bevat de volgende statische secties:

  • Logo en menu
  • Aankondigingsbalk
  • Voettekst
  • Productpagina's
  • Collectiepagina's
  • Pagina collectielijst
  • Artikel

Dynamische secties

Je kunt dynamische secties toevoegen, verplaatsen en verwijderen en zo de indeling van je homepage aanpassen. Elk thema heeft een unieke reeks dynamische secties om uit te kiezen.

Pop bevat de volgende dynamische secties:

  • Blogberichten
  • Collectielijst
  • Uitgelichte collectie
  • Afbeelding met tekst
  • Diavoorstelling
  • Uitgelicht product
  • Nieuwsbrief
  • Kaart
  • Tekst met opmaak
  • Video
  • Aangepaste HTML

Productpagina's

In de sectie Productpagina's kun je de volgende elementen toevoegen of verwijderen:

  • Het productmerk of de leverancier
  • Inzoomen op afbeelding
  • Gerelateerde producten
  • Een hoeveelheidselector
  • Een dynamische checkoutknop
  • Pictogrammen voor sociaal delen

De instellingen voor productpagina's bewerken:

  1. Selecteer Productpagina's in het vervolgkeuzemenu op de bovenste balk.

  2. Klik op Secties.

  3. Klik op Productpagina's.

  4. Schakel Productleverancier weergeven in om het productmerk of de leverancier weer te geven. Als je een merk of leverancier wilt weergeven, moet je een leverancier aan het product toevoegen.

  5. Schakel Inzoomen op afbeeldingen inschakelen in om het mogelijk te maken dat klanten op de productafbeelding inzoomen door de muisaanwijzer erop te plaatsen.

  6. Schakel Gerelateerde producten weergeven in als je een selectie van gerelateerde producten onderaan de pagina wilt weergeven. De collectie waartoe het product behoort, bepaalt de gerelateerde producten die worden weergegeven. Als je gerelateerde producten wilt weergeven, moet je een collectie maken voor het product of het product aan een bestaande collectie toevoegen. Als het product geen deel uitmaakt van een collectie, worden er geen gerelateerde producten weergegeven.

  7. Schakel Hoeveelheidselector weergeven in om een hoeveelheidselector weer te geven.

  8. Schakel Dynamische checkoutknop weergeven in als je een dynamische checkoutknop wilt weergeven.

  9. Schakel Product delen inschakelen in om knoppen voor sociaal delen weer te geven.

  10. Klik op Opslaan.

Nieuwsbrief

Je kunt een nieuwsbriefaanmelding toevoegen aan de homepage. Met een nieuwsbriefaanmelding kun je e-mailadressen van klanten verzamelen voor campagnes met e-mailmarketing. In de Shopify-blog vind je meer informatie over e-mailmarketing.

Een nieuwsbriefaanmelding toevoegen aan je homepage:

  1. Klik op Secties.

  2. Klik op Sectie toevoegen > Nieuwsbrief.

  3. Voer in het veld Kop een kop voor de aanmelding voor een nieuwsbrief in. De standaardkop is 'Abonneren op onze nieuwsbrief'.

  4. Voer in het veld Subtekst een subkop voor de nieuwsbriefaanmelding in. De standaardtekst is 'Promoties, nieuwe producten en uitverkoop. Rechtstreeks in je postvak'.

  5. Stel de achtergrondkleur in voor de sectie Nieuwsbriefaanmelding door op de staal Achtergrondkleur te klikken en een kleur te kiezen.

  6. Klik op Opslaan.

Video

Je kunt aan de homepage een video toevoegen die wordt gehost op YouTube of Vimeo. Video's kunnen klanten aantrekken en interesse in je bedrijf wekken.

Een video toevoegen aan je homepage:

  1. Klik op Secties.

  2. Klik op Sectie toevoegen > Video.

  3. Voer in het veld Kop een kop voor de video in.

  4. Voer in het veld Videolink een link voor delen voor de video in.

    Een YouTube-link voor delen ziet er als volgt uit: https://youtu.be/OTJXAUZY9t0. In dit YouTube Help-artikel leer je hoe je de link voor het delen van een YouTube-video kopieert.

    Een Vimeo-link voor delen ziet er als volgt uit: https://vimeo.com/281332510. In dit artikel van het Vimeo-helpcentrum leer je hoe je de link voor het delen van een Vimeo-video kopieert.

  5. Klik op Opslaan.

Aangepaste HTML

In de sectie Aangepaste HTML kun je HTML-code gebruiken om aangepaste content voor je homepage te maken. Je kunt bijvoorbeeld HTML gebruiken om tekstblokken op te maken, tabellen te maken of content van een externe website op te nemen.

Een aangepaste HTML-sectie toevoegen aan je homepage

  1. Klik op Sectie toevoegen.

  2. Klik op Aangepaste HTML en klik vervolgens op Selecteren.

  3. Klik op Aangepaste HTML en voer de HTML-code in die je aan je homepage wilt toevoegen.

  4. Klik op Opslaan.

Je kunt thema-instellingen gebruiken om de kleuren en typografie van je onlinewinkel aan te passen. Je kunt ook links instellen op je sociale media-accounts, je winkelwageninstellingen bewerken en een favicon toevoegen.

Pop bevat de volgende thema-instellingen:

  • Kleuren
  • Typografie
  • Favicon
  • Winkelwagenpagina
  • Social media
  • Checkout

Kleuren

Je kunt de kleuren kiezen voor de verschillende delen van je onlinewinkel.

Je kleurinstellingen aanpassen

  1. Klik op Thema-instellingen.
  2. Klick op Kleuren.
  3. Om de kleur van het content type te wijzigen, klik je op het kleurstaal om zo de kleurkiezer te openen. Het onlangs geselecteerde gebied toont kleuren die je onlangs hebt geselecteerd voor je thema. Het gebied dat momenteel wordt gebruikt, toont kleuren die je momenteel gebruikt in andere delen van je thema.

    Om een specifieke hex-kleurcode in te stellen, klik je op het tekstveld om de kleur in te voeren.

    Om de kleur in te stellen op transparant, verwijder je de hex-codewaarde uit het tekstveld.

  4. Klik op Opslaan.

Typografie

Je kunt de tekenstijl en -grootte voor de tekst in je online winkel instellen. Je kunt een systeemlettertype of een aangepast lettertype kiezen.

Het wordt aanbevolen om systeemlettertypen in je winkel te gebruiken. Door systeemlettertypen te gebruiken, hoef je geen nieuwe lettertypen naar de computer van de klant te downloaden, wat een negatieve invloed kan hebben op de laadsnelheid van je winkel. Het lettertype dat op de computer van de klant wordt weergegeven, is afhankelijk van hun besturingssysteem. Meer informatie over systeemlettertypen.

Je typografie-instellingen aanpassen

  1. Klik op Thema-instellingen.

  2. Klik op Typografie.

  3. Klik voor elk type tekst op Wijzigen om de lettertypekiezer te gebruiken.

  4. Verken lettertypen met het zoekveld of door te klikken op Meer laden.

    Ga naar de lettertypenbibliotheek van Shopify om alle beschikbare lettertypen te bekijken.

  5. Klik op de naam van het lettertype dat je wilt gebruiken.

  6. Als je het lettertype wilt wijzigen in een andere stijl, klik je op de naam van de huidige tekenstijl en selecteer je vervolgens een nieuwe tekenstijl in het vervolgkeuzemenu.

  7. Klik op Selecteren.

  8. Klik op Opslaan.

Social media

Je kunt knoppen voor sociaal delen voor je producten en blogposts, en links naar je sociale media-accounts toevoegen.

De instellingen voor social media aanpassen:

  1. Klik op thema-instellingen.

  2. Klik op Social media.

  3. Klik in het gebied Afbeelding voor sociaal delen op Afbeelding selecteren of Gratis afbeeldingen ontdekken als je een afbeelding voor sociaal delen wilt uploaden.

  4. Geef in het gebied Socialmedia-accounts in de desbetreffende velden de links naar je accounts op als je links naar je socialmedia-accounts wilt toevoegen. Voer volledige links in, zoals https://instagram.com/shopify of https://twitter.com/shopify.

    Links naar je sociale media-accounts worden in de voettekst van je onlinewinkel weergegeven.

  5. Je kunt knoppen voor sociaal delen aan je producten en blogberichten toevoegen door in het gebied Opties voor sociaal delen een of meer selectievakjes aan te vinken.

    Je kunt de volgende knoppen voor delen toevoegen:

- Delen op Facebook - Twitteren op Twitter - Pinnen op Pinterest (niet beschikbaar voor delen van blogposts)

  1. Klik op Opslaan.

Als je vervolgkeuzelijsten aan het hoofdmenu wilt toevoegen, moet je menu's maken op je navigatiepagina. In dit artikel lees je hoe je dit doet.

Een proportioneel compact logo ziet er het beste uit in het thema Pop, omdat je logo hiermee op een zijbalk wordt weergegeven. Banner-achtige logo's, die breed en relatief laag zijn, zien er niet goed uit in dit thema.

De maximale breedte voor je logo is 450 pixels en de maximale hoogte is 200 pixels. De grootte van het geüploade logobestand wordt zo aangepast dat dit binnen deze beperkingen valt.

De ideale indeling is PNG.

Verklein de witruimte rond het logo op de zijbalk

Voordat je opvulling verwijdert die via het Pop-thema boven en onder het logo is toegevoegd, is het uitermate belangrijk om eventuele opvulling die uit de afbeelding zelf kan komen, bij te knippen. Je moet de lege ruimte of transparante pixels rond de logoafbeelding bijsnijden voordat je het bestand uploadt naar Shopify.

Hier zie je een logo met veel lege ruimte eromheen:

Hier zie je hetzelfde logo nadat het is bijgesneden en de lege ruimte is weggehaald:

Het logo dat niet is bijgesneden, wordt hieronder weergegeven wanneer het wordt gebruikt in het Pop-thema:

Het bijgesneden logo wordt hieronder weergegeven wanneer dit wordt gebruikt in het Pop-thema:

Wanneer je een bijgesneden logo hebt geüpload naar je thema-assets, kun je de breedte van de zijbalk aanpassen door naar de themabewerker te gaan. Stel in de sectie Koptekst en navigatie de waarde Grootte wijzigen > Breedte desktopmenu in op de gewenste waarde.

Ten slotte kun je de volgende, niet-ondersteunde stappen uitvoeren als je de opvulling boven en onder het logo wilt verminderen:

  1. Klik onder Assets op timber.scss.liquid om je themastijlblad te openen in de onlinecodebewerker of ga naar deze URL.

  2. Voeg het volgende toe aan het einde van het bestand:

```sass {% comment %} Met de volgende mediaqueryfunctie wordt het volgende gegenereerd: @media screen and (min-width: 1025px) { ... }. De zijbalk wordt alleen weergegeven als de breedte > 1025 pixels is. {% 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. Sla het bestand op.

De instellingen voor de productpagina bewerken

In de sectie Productpagina's kun je de volgende elementen toevoegen of verwijderen:

  • Het productmerk of de leverancier
  • Inzoomen op afbeelding
  • Gerelateerde producten
  • Een hoeveelheidselector
  • Een dynamische checkoutknop
  • Pictogrammen voor sociaal delen

De instellingen voor productpagina's bewerken:

  1. Selecteer Productpagina's in het vervolgkeuzemenu op de bovenste balk.

  2. Klik op Secties.

  3. Klik op Productpagina's.

  4. Schakel Productleverancier weergeven in om het productmerk of de leverancier weer te geven. Als je een merk of leverancier wilt weergeven, moet je een leverancier aan het product toevoegen.

  5. Schakel Inzoomen op afbeeldingen inschakelen in om het mogelijk te maken dat klanten op de productafbeelding inzoomen door de muisaanwijzer erop te plaatsen.

  6. Schakel Gerelateerde producten weergeven in als je een selectie van gerelateerde producten onderaan de pagina wilt weergeven. De collectie waartoe het product behoort, bepaalt de gerelateerde producten die worden weergegeven. Als je gerelateerde producten wilt weergeven, moet je een collectie maken voor het product of deze aan een bestaande collectie toevoegen. Als het product geen deel uitmaakt van een collectie, worden er geen gerelateerde producten weergegeven.

  7. Schakel Hoeveelheidselector weergeven in om een hoeveelheidselector weer te geven.

  8. Schakel Dynamische checkoutknop weergeven in als je een dynamische checkoutknop wilt weergeven.

  9. Schakel Product delen inschakelen in om knoppen voor sociaal delen weer te geven.

  10. Klik op Opslaan.

Beste typen productafbeeldingen voor Pop

Foto's met een hoge resolutie zien er stijlvoller en professioneler uit in het Pop-thema. Daarom raden we je afbeeldingen van minimaal 1024 x 1024 px aan. Afbeeldingen worden waar nodig automatisch verkleind, dus hoe hoger de kwaliteit, hoe beter.

Foto's met hoge resolutie zijn met name belangrijk als je de functie Inzoomen op afbeelding gebruikt, die je kunt inschakelen in de themabewerker in de sectie Productpagina's:

Idealiter hebben de weergegeven afbeeldingen van je producten allemaal dezelfde breedte-/hoogteverhouding zodat deze er optimaal uitzien op collectiepagina's.

Klaar om te beginnen met verkopen met Shopify?

Probeer het gratis