Pop

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

Voorbeeld van online winkel met Pop

Themabewerker

Gebruik de themabewerker om je thema aan te passen. De werkbalk van de thema-editor 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 lay-out 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 sociale media en in de kassa-instellingen.

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

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

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

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

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

U kunt meer leren over de unieke selectie secties van en hoe u ze kunt aanpassen aan uw behoeftes.

Pop bevat de volgende statische secties:

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

Dynamische secties

U kunt dynamische secties toevoegen, verplaatsen en verwijderen en zo de indeling van uw startpagina 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
  • Rich text
  • Video
  • Aangepaste HTML

Productpagina's

In de sectie Productpagina's kunt u de volgende elementen toevoegen of verwijderen:

  • Het productmerk of de leverancier
  • Inzoomen op afbeelding
  • Gerelateerde producten
  • Een hoeveelheidskiezer
  • Een dynamische checkout knop
  • 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 u een merk of leverancier wilt weergeven, moet u 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. Als u een selectie van gerelateerde producten onderaan de pagina wilt weergeven, schakelt u Gerelateerde producten weergeven in. De collectie waartoe het product behoort, bepaalt de gerelateerde producten die worden weergegeven. Als u gerelateerde producten wilt weergeven, moet u 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. Als u een dynamische checkout knop wilt weergeven, schakelt u Dynamische checkout knop weergeven in.

  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 startpagina. Met een nieuwsbriefaanmelding kunt u e-mailadressen van klanten verzamelen voor campagnes met e-mailmarketing. In de Shopify-blog vindt u 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 startpagina:

  1. Zoek Pop en klik 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 uw 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 startpagina een video toevoegen die wordt gehost op YouTube of Vimeo. Video's kunnen klanten aantrekken en interesse in uw bedrijf wekken.

Een video toevoegen aan de startpagina:

  1. Zoek Pop en klik 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 leert u hoe u 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 leert u hoe u de link voor het delen van een Vimeo-video kopieert.

  6. Klik op Opslaan.

Aangepaste HTML

In de sectie Aangepaste HTML kunt u HTML-code gebruiken om aangepaste inhoud voor je startpagina 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 uw startpagina:

  1. Zoek Pop en klik 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 startpagina wilt toevoegen.

  6. Klik op Opslaan.

Pop bevat de volgende thema-instellingen:

  • Kleuren
  • Typografie
  • Favicon
  • Winkelwagenpagina
  • Sociale media
  • Afrekenen

Kleuren

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

Uw kleurinstellingen aanpassen

  1. Klik naast **** 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 heeft geselecteerd voor je thema. - Het gedeelte Wordt momenteel gebruikt geeft de kleuren weer die u momenteel gebruikt in andere delen van uw thema.

Als u de kleur transparant wilt maken, klikt u op Geen.

  1. Klik op Opslaan.

Typografie

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

Uw typografie-instellingen aanpassen

  1. Klik naast **** 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 de 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 u wilt gebruiken.

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

    Een selectie van lettertdiktes die beschikbaar zijn in de lettertypekiezer

  8. Klik op Opslaan.

Sociale media

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

De instellingen voor sociale media aanpassen:

  1. Zoek Pop en klik op Aanpassen.

  2. Klik op Thema-instellingen.

  3. Klik op Sociale media.

  4. Als u een afbeelding voor sociaal delen wilt uploaden, klikt u in het gebied Afbeelding voor sociaal delen op Afbeelding selecteren of Gratis afbeeldingen ontdekken.

  5. Als u links naar uw sociale media-accounts wilt toevoegen, geeft u in het gebied Sociale accounts in de desbetreffende velden de links naar uw accounts op. Voer volledige links in, zoals https://instagram.com/shopify of https://twitter.com/shopify.

    Links naar uw sociale media-accounts worden in de voettekst van uw online winkel weergegeven.

  6. Je kunt knoppen voor sociaal delen aan uw producten en blogberichten toevoegen door in het gebied Opties voor sociaal delen een of meer selectievakjes in te schakelen.

    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 u vervolgkeuzemenu's aan het hoofdmenu wilt toevoegen, moet u menu's maken op uw navigatiepagina. In dit artikel leest u hoe u dit doet.

Een proportioneel compact logo ziet er het beste uit in het thema Pop, omdat uw 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 uw 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 u uw logo groter wilt maken in een lay-out, is het ten eerste uiterst belangrijk om alle lege ruimte of transparante pixels rond uw logo bij te snijden voordat u het bestand uploadt naar Shopify.

Hier ziet u een logo met veel lege ruimte eromheen:

Hier ziet u 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 u weet dat het logo niet kleiner wordt vanwege de lege ruimte die het bevat, kunt u de hoogte van de mobiele koptekst zo aanpassen dat het logo kan worden uitgebreid. Op deze manier wordt uw 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 u uw logo groter wilt maken in een lay-out, is het ten eerste uiterst belangrijk om alle lege ruimte of transparante pixels rond uw logo bij te snijden voordat u het bestand uploadt naar Shopify.

Hier ziet u een logo met veel lege ruimte eromheen:

Hier ziet u 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 u weet dat het logo niet kleiner wordt vanwege de lege ruimte die het bevat, kunt u de breedte van de zijbalk zo aanpassen dat het logo kan worden uitgebreid. Op deze manier wordt uw 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 u 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. U moet de lege ruimte of transparante pixels rond de logoafbeelding bijsnijden voordat u het bestand uploadt naar Shopify.

Hier ziet u een logo met veel lege ruimte eromheen:

Hier ziet u 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 u een bijgesneden logo hebt geüpload naar uw thema-assets, kunt u 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 kunt u de volgende, niet-ondersteunde stappen uitvoeren als u 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 kunt u de volgende elementen toevoegen of verwijderen:

  • Het productmerk of de leverancier
  • Inzoomen op afbeelding
  • Gerelateerde producten
  • Een hoeveelheidskiezer
  • Een dynamische checkout knop
  • 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 u een merk of leverancier wilt weergeven, moet u 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. Als u een selectie van gerelateerde producten onderaan de pagina wilt weergeven, schakelt u Gerelateerde producten weergeven in. De collectie waartoe het product behoort, bepaalt de gerelateerde producten die worden weergegeven. Als u gerelateerde producten wilt weergeven, moet u 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. Als u een dynamische checkout knop wilt weergeven, schakelt u Dynamische checkout knop weergeven in.

  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 thema-editor in de sectie Productpagina's:

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

Klaar om te beginnen met verkopen met Shopify?

Probeer het gratis