Guides Theme & Design

Automatische selectie uitschakelen voor productvarianten op een Shopify-productpagina

· Updated
4 min leestijd
Automatische selectie uitschakelen voor productvarianten op een Shopify-productpagina
Inhoudsopgave

TL;DR

To turn automatic selection off for product variants on a Shopify product page, you usually need to edit your theme and remove the code that pre-selects the first variant. For modern themes like Dawn, that means removing checked or selected states, setting selected_variant to null until the customer chooses, and disabling add to cart until a valid option is picked. Some premium themes include a built-in setting, and apps can help if you want a no-code or more advanced product options setup.

Automatische selectie uitschakelen voor productvarianten op een Shopify-productpagina

Als je een Shopify-merchant bent die meerdere varianten van een product verkoopt, selecteert Shopify automatisch een variant zodra een klant op je productpagina landt. Een voorbeeld hiervan is wanneer je sokken verkoopt. Je kunt verschillende kleuren aanbieden waaruit klanten kunnen kiezen, zoals geel, blauw, rood, groen enz.

Let op: Shopify breidt de variantlimiet uit naar 2.048 varianten per product, met algemene beschikbaarheid gepland voor eind 2025. Op dit moment hebben de meeste winkels nog de limiet van 100 varianten, al kunnen Shopify Plus-winkels en development stores mogelijk al vroeg toegang hebben tot de hogere limiet.

Shopify product variants

Wanneer een klant op je productpagina landt, wordt automatisch de eerste variant van dat product geselecteerd. Als je de automatische selectie voor een product wilt uitschakelen, kan dat.

Automatische selectie uitschakelen voor productvarianten

automatic selection off

Om automatische selectie voor productvarianten uit te schakelen, moet je prompts toevoegen aan het dropdownmenu. Zo doe je dat:

  • Ga naar de map Snippets en klik op Add a new snippet
  • Laat de naam staan op ‘pick-an-option’
  • Plak deze code in het nieuwe snippet-bestand en sla het op
  • Ga naar de map Layout en selecteer theme.liquid
  • Zoek naar de tag </body> aan het einde van het bestand
  • Plak deze code {% render ‘pick-an-option’ %} op een regel boven deze tag
  • Klik op Save
  • Zoek vervolgens het bestand met het formulier voor ‘add to cart.’ Het action -attribuut in dit bestand is /cart/add
  • Zodra je het bestand hebt gevonden, zoek je naar één van de volgende codes 
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

Of… 

<option {% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>
  • Vervang dit door de volgende code 
<option {% if forloop.length <= 1 and variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>
  • Klik tot slot op Save

Methode voor moderne Shopify-thema’s (Dawn & Online Store 2.0-thema’s)

Voor nieuwere Shopify-thema’s met de Online Store 2.0-architectuur (zoals Dawn) werkt het anders:

  • Zoek in je themabestanden naar product-variant-options.liquid
  • Zoek de code met {% if value.selected %} checked {% endif %}
  • Verwijder of pas deze code aan om automatische selectie te voorkomen
  • Voeg JavaScript-validatie toe zodat klanten een variant moeten kiezen voordat ze aan de winkelwagen kunnen toevoegen

Let op: deze methode vereist technische kennis en kan invloed hebben op de functionaliteit van je thema. Maak altijd een back-up voordat je wijzigingen doorvoert.

Thema-specifieke instellingen voor automatische selectie

Als je Empire of vergelijkbare premium thema’s gebruikt, kun je automatische selectie uitschakelen zonder code te bewerken:

  • Ga naar Online Store > Themes > Customize
  • Navigeer naar Products > Form
  • Schakel de optie Auto-select first available variant uit

Check de documentatie van je thema om te zien of deze functie beschikbaar is in je thema-instellingen.

CSS-methode om Add to Cart te verbergen tot er een keuze is gemaakt

Voeg deze CSS toe in je theme.liquid-bestand om de Add to Cart-knop te verbergen totdat er een selectie is gemaakt:

<style>
body:has(.disabled-option:checked) .product-form__buttons button {
display: none !important;
}
</style>

Alternatieve oplossing: gebruik apps

In plaats van code te bewerken, kun je deze apps voor variantbeheer gebruiken (stand van zaken in 2025):

Deze apps schakelen automatische selectie voor je uit en bieden extra functies zoals kleurstalen, conditionele logica en onbeperkte productopties.

Instellingen voor add to cart aanpassen

Je kunt deze instellingen aanpassen zodat producten niet als niet beschikbaar worden weergegeven voordat de klant een keuze maakt.

  • Ga naar Online Store en Themes
  • Selecteer het thema dat je wilt bewerken en kies Actions
  • Selecteer Edit Language en ga naar het vak Filter items
  • Typ ‘unavailable.’ Dan zie je de vertaling
  • Verander Unavailable in Maak een keuze

Best practices voor variantbeheer

  • Gebruik kleurstalen in plaats van dropdowns voor een betere gebruikerservaring en hogere conversie
  • Gebruik variant-specifieke afbeeldingen die automatisch worden getoond wanneer klanten opties selecteren
  • Stel meldingen in bij lage voorraad en verberg automatisch uitverkochte varianten om je voorraad effectief te beheren
  • Test variantkiezers op mobiel – overweeg knopgroepen in plaats van dropdowns voor betere touchscreen-bediening
  • Voeg validatieberichten toe zoals “Selecteer eerst een optie” om verwarring bij klanten te voorkomen

Als je bepaalde productvarianten wilt verbergen zonder ze te verwijderen, kan dat ook.

Deel dit artikel

Gerelateerde artikelen