Pop

Een minimalistisch thema dat is ontworpen om je inhoud 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 inhoud eenvoudig toegankelijk houdt.

Voorbeeld van online winkel met Pop

Themabewerker

Gebruik de themabewerker om je thema aan te passen. De werkbalk van de themabewerker is opgedeeld in Secties en Thema-instellingen.

De werkbalk voor de themabewerker geeft de secties en thema-instellingen weer

Je kunt secties gebruiken om de inhoud en opmaak van de verschillende pagina's in je winkel te wijzigen. Je kunt de thema-instellingen gebruiken om de lettertypen en kleuren van je winkel aan te passen en wijzigingen aan te brengen in je koppelingen naar social media en in de kassa-instellingen.

Secties zijn blokken met inhoud die kunnen worden aangepast en de indeling van verschillende pagina's van je online winkel bepalen.

  • Home-secties bevatten functies, zoals een diavoorstelling of een aanmelding voor een nieuwsbrief, die je kunt toevoegen, herschikken of verwijderen. Je kunt maximaal 25 secties op je homepage plaatsen.

  • Elk type pagina bevat eigen secties. De sectie Productpagina's bepaalt bijvoorbeeld de opmaak van elke productpagina in je online winkel.

  • Paginasecties staan altijd op specifieke plaatsen in je online winkel. Je kunt ze aanpassen, maar je kunt ze niet herschikken of verwijderen.

  • Elk thema bevat vaste secties, zoals de kop- en voettekst, die op elke pagina van je online winkel worden weergegeven.

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 hoeveelheidskiezer
  • Een dynamische betaalknop
  • 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 Hoeveelheidskiezer weergeven in om een hoeveelheidskiezer weer te geven.

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

  9. Schakel Product delen inschakelen in om pictogrammen 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.

Het nieuwsbriefgedeelte op een website. Er is een veld voor klanten om een e-mailadres in te voeren en een knop met de tekst 'Abonneren'.

Een nieuwsbriefaanmelding toevoegen aan de homepage:

  1. Klik naast Pop op Aanpassen.

  2. Klik op Secties.

  3. Klik op Gedeelte toevoegen > Nieuwsbrief.

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

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

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

  7. 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 de homepage:

  1. Klik naast Pop op Aanpassen.

  2. Klik op Secties.

  3. Klik op*Sectie toevoegen* > Video.

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

  5. Voer in het veld Videolink een link voor het delen van 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 Vimeo Help Center-artikel leer je hoe je de link voor het delen van een Vimeo-video kopieert.

  6. Klik op Opslaan.

Aangepaste HTML

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

Om aangepaste HTML toe te voegen aan je homepage:

  1. Klik naast Pop op Aanpassen.

  2. Klik op Secties.

  3. Klik op Sectie toevoegen.

  4. Klik in Geavanceerde layout op Aangepaste HTML > Toevoegen.

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

  6. Klik op Opslaan.

Pop bevat de volgende thema-instellingen:

  • Kleuren
  • Typografie
  • Favicon
  • Winkelwagenpagina
  • Social media
  • Afrekenen

Kleuren

Je kunt de kleuren kiezen voor de verschillende delen van je online winkel.

Je kleurinstellingen aanpassen

  1. Klik naast Pop op Aanpassen.

  2. Klik op Thema-instellingen.

  3. Klick op Kleuren.

  4. Klik voor elk type inhoud op het kleurstaal om de kleurkiezer te gebruiken:

    De kleurkiezer in de themabewerker

- Het gedeelte Onlangs geselecteerd geeft de kleuren weer die je onlangs hebt geselecteerd voor je thema. - Het gedeelte Wordt momenteel gebruikt geeft de kleuren weer die je momenteel gebruikt in andere delen van je thema.

Als je de kleur transparant wilt maken, klik op Geen.

  1. Klik op Opslaan.

Typografie

Je kunt het lettertype en de lettergrootte instellen voor de tekst in je online winkel.

Je typografie-instellingen aanpassen

  1. Klik naast Pop op Aanpassen.

  2. Klik op Thema-instellingen.

  3. Klik op Typografie.

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

    De knop 'Wijzigen' in de lettertypekiezer

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

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

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

  7. Als je het lettertype wilt veranderen, bijvoorbeeld vet of cursief, klik op Normaal. Klik vervolgens op de stijl die je wilt gebruiken en klik dan op Selecteren:

    Een selectie van lettertdiktes die beschikbaar zijn in de lettertypekiezer

  8. Klik op Opslaan.

Social media

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

De instellingen voor social media aanpassen:

  1. Klik naast Pop op Aanpassen.

  2. Klik op Thema-instellingen.

  3. Klik op Sociale media.

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

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

    Links naar je social media-accounts worden in de voettekst van je online winkel weergegeven.

  6. 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 het delen van blogberichten)

  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.

Het logo groter maken op mobiele apparaten

Als je je logo groter wilt maken in een opmaak, is het ten eerste uiterst belangrijk om alle lege ruimte of transparante pixels rond je logo bij te snijden 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 alle 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:

Zodra je weet dat het logo niet kleiner wordt vanwege de lege ruimte die het bevat, kun je de hoogte van de mobiele koptekst zo aanpassen dat het logo kan worden uitgebreid. Op deze manier wordt je logo groter.

Ga naar de themabewerker en verhoog in de sectie Koptekst en navigatie de waarde van Grootte wijzigen > Hoogte mobiel menu.

Het logo groter maken op de zijbalk

Als je je logo groter wilt maken in een opmaak, is het ten eerste uiterst belangrijk om alle lege ruimte of transparante pixels rond je logo bij te snijden 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 alle lege ruimte is weggehaald:

Het logo met de lege ruimte wordt hieronder weergegeven wanneer het wordt geüpload naar het Pop-thema:

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

Zodra je weet dat het logo niet kleiner wordt vanwege de lege ruimte die het bevat, kun je de breedte van de zijbalk zo aanpassen dat het logo kan worden uitgebreid. Op deze manier wordt je logo groter.

Ga naar de themabewerker en verhoog in het gedeelte Koptekst en navigatie de waarde van Grootte wijzigen > Breedte desktopmenu.

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 hoeveelheidskiezer
  • Een dynamische betaalknop
  • 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 Hoeveelheidskiezer weergeven in om een hoeveelheidskiezer weer te geven.

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

  9. Schakel Product delen inschakelen in om pictogrammen 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