Eigen CSS

Elk type aftelling eindigt zijn ontwerpinstellingen met een vak Custom CSS (Developer Zone). Alles wat je daar invoert, wordt in je webshop op die aftelling toegepast, bovenop alles wat de visuele opties hebben ingesteld.

Het vak Custom CSS, aan het einde van de ontwerpinstellingen.

Opgepast

Dit is een noodoplossing en geen eerste keuze. CSS die je hier schrijft, wordt niet gecontroleerd, wordt niet betrouwbaar in een voorbeeld getoond en blijft gelden ook als je thema eronder verandert. Probeer eerst de visuele opties, want die dekken het meeste af wat winkels nodig hebben.

Wanneer het echt nuttig is

• Fijne positionering: de marges van een aftelling bijstellen zodat hij goed zit in een thema met ongebruikelijke witruimte.
• Responsieve aanpassingen: een mediaquery voor een breekpunt dat de mobiele instellingen niet dekken.
• Een themadetail overnemen: een specifieke hoekafronding of schaduw die je thema overal gebruikt en die de opties niet exact kunnen nabootsen.
• Een element verbergen: een onderdeel van de aftelling weghalen dat je op geen andere manier kunt uitzetten.

Het schrijven

Het vak accepteert gewone CSS: selectors en regels, zonder <style>-tag:

.samita-countdown {
  margin-top: 24px;
}

@media (max-width: 749px) {
  .samita-countdown {
    margin-top: 12px;
  }
}

De container van de aftelling zelf heeft de klasse samita-countdown en elke weergegeven aftelling krijgt een ID dat is opgebouwd uit zijn aftelling-ID. Om iets specifiekers te targeten, inspecteer je de weergegeven aftelling in de ontwikkelaarstools van je browser en gebruik je de klassen die je daar vindt.

Opmerking

Klassenamen binnen de aftelling kunnen veranderen als de app wordt bijgewerkt. Als je je CSS beperkt tot .samita-countdown en je eigen overschrijvingen, in plaats van diepe interne selectors, is de kans veel kleiner dat het kapotgaat.

Houd het afgebakend

CSS in dit vak is niet automatisch beperkt tot de aftelling. Een selector zoals img { ... } raakt elke afbeelding op de pagina.

Zet voor je regels altijd een prefix zodat ze alleen de aftelling bereiken:

/* Good — scoped */
.samita-countdown img { border-radius: 4px; }

/* Risky — affects the whole page */
img { border-radius: 4px; }

Test het op een echte pagina

Het voorbeeld in de builder bootst je thema niet na. CSS die in het voorbeeld iets goed uitlijnt, doet dat op je productpagina misschien niet. Sla op, open een echte pagina en controleer het, op desktop en op een telefoon.

Als je liever geen CSS schrijft

De support kan helpen met themaspecifieke aanpassingen. De app heeft naast het vak Custom CSS een knop Chat now!, omschreven als “Chat with us to customize countdown in your theme.” Je kunt ook contact opnemen met de support met een link naar de pagina en een beschrijving van wat je gewijzigd wilt hebben.

Volgende stappen

• Een aftelling ontwerpen
• Weergavepositie
• Contact opnemen met de support
• Aftelling wordt niet getoond