Egen CSS

Använd rutan Custom CSS när designreglagen inte räcker till.

Varje typ av nedräkning avslutar sina designinställningar med en ruta som heter Custom CSS (Developer Zone). Allt du skriver där tillämpas på den nedräkningen i din butik, ovanpå allt som de visuella reglagen har ställt in.

Rutan Custom CSS Developer Zone längst ned bland designinställningarna

Rutan Custom CSS, i slutet av designinställningarna.

När det verkligen är användbart

Finjustering av position – justera en nedräknings marginaler så att den sitter rätt i ett tema med ovanliga avstånd.
Responsiva justeringar – en media query för en brytpunkt som mobilinställningarna inte täcker.
Anpassa en temadetalj – en specifik kantradie eller skugga som ditt tema använder överallt och som reglagen inte kan återskapa exakt.
Dölja ett element – ta bort en del av nedräkningen som du inte kan stänga av på något annat sätt.

Så skriver du den

Rutan tar vanlig CSS – selektorer och regler, ingen <style>-tagg:

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

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

Nedräkningens egen behållare har klassen samita-countdown, och varje renderad nedräkning får ett ID som bygger på dess nedräknings-ID. Om du vill rikta in dig på något mer specifikt inspekterar du den renderade nedräkningen i webbläsarens utvecklarverktyg och använder klasserna du hittar där.

Håll den avgränsad

CSS i den här rutan är inte automatiskt begränsad till nedräkningen. En selektor som img { ... } träffar varje bild på sidan.

Sätt alltid ett prefix framför dina regler så att de bara når nedräkningen:

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

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

Testa den på en riktig sida

Förhandsvisningen i byggaren återger inte ditt tema, så CSS som får något att passa i förhandsvisningen kanske inte gör det på din produktsida. Spara, öppna en riktig sida och kontrollera, både på dator och på mobil.

Om du helst slipper skriva CSS

Supporten kan hjälpa till med temaspecifika justeringar. Appen har en knapp, Chat now!, bredvid rutan Custom CSS, som beskrivs som ”Chat with us to customize countdown in your theme.” Du kan också kontakta supporten med en länk till sidan och en beskrivning av vad du vill ändra.

Nästa steg

Var det här till hjälp?