Issue with Previous and Next buttons display

Technical Q&A

Topic summary

Les boutons « Previous » et « Next » de la pagination s’affichaient sur une ligne séparée sous les numéros de page dans le thème Simple, sur une page de collection Shopify.

  • La cause identifiĂ©e est une règle CSS : span.current { display: block !important; }.
  • Cette règle ne venait pas directement du fichier principal du thème, mais d’un snippet ajoutĂ© par l’application mlveda currency switcher.

Une première vérification avait suggéré de supprimer display: block !important; si la règle était trouvée dans le thème. Après confirmation qu’elle n’y figurait pas, il a été précisé qu’elle était injectée par le snippet de l’app.

Correctif proposé et validé : ajouter dans theme.scss.liquid la surcharge CSS suivante :
.pagination .current { display: initial !important; }

Résultat : le correctif rapide fonctionne. La discussion est globalement résolue, avec une action restante possible : supprimer plus tard le snippet de l’application si elle n’est plus utilisée.

Summarized with AI on March 10. AI used: gpt-5.4.
1

Hi,

I am using the Simple theme and I have an issue with the Next and Previous buttons. They always appear on a line below the page numbers:

SauvageCraft_0-1612188362939.png
SauvageCraft_0-1612188362939.png403Ă—258 8.1 KB

The website: sauvage-craft.myshopify.com.

Any idea on how I can fix this?

Thank you,

Gautier

2

Hello,

Please share:

  • your store URL;
  • page URL with the issue you mention;
  • storefront password (if your store has one).

Kind regards,
Diego

3

Hello Gautier,

Seems you added a CSS in theme.liquid
Once check in it and search where you added this css

span.current {
    display: block !important;
    text-align: center !important;
}

Once you find it remove the this line

display: block !important;

Thanks

4

Hello,

Here it is: sauvage-craft.myshopify.com
Issue on the following collection page (the other collection pages only have 1 page):

Thanks Diego,

Gautier

5

Hello Guleria,

Thanks for your reply.

I checked the theme.liquid and theme.scss.liquid and can’t find any trace of the span.current code.

It probably comes from something else.

Gautier

6

@Guleria is right – this CSS rule is the problem. However, it’s not in your stylesheet, it’s a part of mlveda currency switcher and is added by a snippet, most probably in your theme.liquid layout. If you’re not using this app anymore, find where this snippet is included/rendered and remove this include/render.

However, you should be able to simply override this by adding the following rule to your theme.scss.liquid stylesheet:

.pagination .current {
    display: initial !important;
}
7

please sir give me ur URL..

8

Hi Tim,

Thanks a lot for the help. Indeed it works and I did install the snippet some time ago. I will dig into it to remove it later but the quick fix is perfect.

Thanks also @Guleria !

1 Like