---
title: "Hoe kan ik de positie van de Loyalty knop op mobiele telefoon veranderen?"
url: https://support.mdware.org/nl/articles/4387265-hoe-kan-ik-de-positie-van-de-loyalty-knop-op-mobiele-telefoon-veranderen
collection: "Installatie & configuratie"
updated: 2025-06-23
language: nl
alternates: [en]
---

# Hoe kan ik de positie van de Loyalty knop op mobiele telefoon veranderen?

1.  Allereerst dient u Loyalty voor eCommerce op te zetten. Dit kan u doen aan de hand van [deze](https://support.mdware.org/nl/articles/3217509-hoe-installeer-je-loyalty-voor-ecommerce.md) gids.
    
2.  Kies voor 'Design' in Lightspeed eCommerce in de menu aan de linkerkant.
    
3.  Klik hier op 'Geavanceerd'.
    

![](https://staticfiles.gleap.io/helpcenter/685884581acbb1e7d98551b3/20250623212108_5073.png)

5\. Klik daarna op 'CSS aanpassen'.

![](https://staticfiles.gleap.io/helpcenter/685884581acbb1e7d98551b3/20250623212108_9764.png)

6\. In dit venster zal u onderstaande code snippet moeten plakken (mits een paar wijzigingen die u onder het kader vindt):

```javascript
@media only screen and (max-width: 768px) {
 .mdloyalty-launcher{
   ...
 }
}
```

In plaats van de 3 puntjes zal u een of meerdere lijn(en) code schrijven om de knop te verschuiven. U kan best zelf wat met de getallen uit onderstaande voorbeelden experimenteren tot de knop de gewenste positie bereikt heeft. Dit kan u doen door de getallen te verminderen of vermeerderen, sla de instellingen op. Herlaad uw website op uw mobiele telefoon en kijk wat de code doet.

-   Als de knop wat meer naar links moet, dan dient er rechts een marge ingevoegd te worden. Dat wordt gedaan door de lijn 'right: 20rem !important;' op de plaats van de 3 puntjes te zetten. Uw code zal er dan als volgt uitzien:
    

```javascript
@media only screen and (max-width: 768px) {
 .mdloyalty-launcher{
  right: 20rem !important;
 }
}
```

Dit zou een wijziging gelijkaardig aan die hieronder moeten veroorzaakt hebben:

![](https://staticfiles.gleap.io/helpcenter/685884581acbb1e7d98551b3/20250623212108_1709.png)

-   Als de knop wat meer naar rechts moet, dan dient er links een marge ingevoegd te worden. Dat wordt gedaan door de lijn 'left: 20rem !important;' op de plaats van de 3 puntjes te zetten. Uw code zal er dan als volgt uitzien:
    

```javascript
@media only screen and (max-width: 768px) {
 .mdloyalty-launcher{
   left: 20rem !important;
 }
}
```

Dit zou een wijziging gelijkaardig aan die hieronder moeten veroorzaakt hebben:

![](https://staticfiles.gleap.io/helpcenter/685884581acbb1e7d98551b3/20250623212108_8336.png)

-   Als de knop wat meer naar boven moet, dan dient er onderaan een marge ingevoegd te worden. Dat wordt gedaan door de lijn 'bottom: 5rem !important;' op de plaats van de 3 puntjes te zetten. Uw code zal er dan als volgt uitzien:
    

```javascript
@media only screen and (max-width: 768px) {
 .mdloyalty-launcher{
   bottom: 5rem !important;
 }
}
```

Dit zou een wijziging gelijkaardig aan die hieronder moeten veroorzaakt hebben:

![](https://staticfiles.gleap.io/helpcenter/685884581acbb1e7d98551b3/20250623212108_2091.png)

Het combineren van deze types marges is mogelijk. Moet uw knop bijvoorbeeld meer naar boven en meer naar links, dan kan u volgende code ingeven:

```javascript
@media only screen and (max-width: 768px) {
 .mdloyalty-launcher{
   bottom: 5rem !important;
   right: 20rem !important;
 }
}
```

Klaar!

Twijfel niet om ons te contacteren als dit niet werkt zoals gehoopt.