Lär dig grunderna och välj rätt plats för ändringen, så att du kan anpassa butiken utan att oavsiktligt ändra resten av temat.
Guiden är för butiksadministratörer som vill börja arbeta med HTML och CSS. Abicart Go, Plus och Pro har stöd för egen HTML och CSS. Menyvägen för CSS nedan gäller Diversity-teman; TPL har en annan redigerare. Kontrollera först vilket tema som är aktivt.
1. Skilj på innehåll och utseende
HTML beskriver innehållets struktur, exempelvis rubriker, stycken och länkar. CSS styr hur innehållet visas, exempelvis färger, avstånd och layout. Ändra en produktbeskrivning i produktens textredigerare och en vanlig sidtext under Sidor. Använd temats egna inställningar när de redan löser uppgiften. CSS är inte en ersättning för att rätta felaktiga produktuppgifter eller priser.
Följ guiden för HTML-läge och egen CSS i Abicart när du ska välja redigeringsläge för produkttext eller lägga in en regel i temat.
2. Välj en lärresurs
W3Schools HTML Tutorial: börja med rubriker, stycken, länkar och korrekt nästlade element.
W3Schools CSS Tutorial: lär dig selektorer, egenskaper och hur regler kombineras.
CSS-Tricks: fördjupning och exempel på bland annat layout.
Codecademy HTML och CSS: övningar där du skriver kod själv. Kontrollera tjänstens aktuella villkor för kurserna.
Learn CSS på web.dev: en kurs i bland annat kaskaden, specificitet och responsiv layout.
MDN:s CSS-material: lärmaterial och referens för hur CSS fungerar.
Exempel på dessa webbplatser är allmänna. En selektor från ett kursexempel träffar inte automatiskt rätt element i ditt Abicart-tema.
3. Prova en avgränsad ändring
Spara en kopia av den HTML eller CSS du tänker ändra. Arbeta helst i en temakopia när ändringen påverkar layouten.
Öppna butikssidan och inspektera det aktuella elementet med webbläsarens utvecklarverktyg. Kontrollera vilken regel som faktiskt styr utseendet.
Prova en regel som bara träffar den avsedda delen. En provändring i utvecklarverktygen är tillfällig och sparas inte i Abicart.
I ett Diversity-tema öppnar du Utseende → Teman → Redigera för rätt tema och sedan Stil → Egen CSS. Lägg till din avgränsade regel utan att radera befintlig CSS.
Spara när du vill tillämpa ändringen. Kontrollera dator, mobil, butikens språk och andra sidor som använder samma element.
Om ändringen inte syns eller slår fel
Kontrollera att du redigerar temat som visas, att CSS:en är giltig och att selektorn finns på sidan. Inspektera vilka regler som vinner i kaskaden i stället för att lägga till !important överallt. Om en text verkar felaktig, kontrollera först produkttext, sidinnehåll och eventuella importer eller integrationer. Dölj inte viktig information med CSS för att slippa rätta uppgiften. Återställ din egen ändring från kopian om den påverkar fler delar än avsett.
Snabbstart
Lär dig enkel HTML och CSS med resurserna ovan.
Välj innehållsredigerare eller temainställning efter uppgiften.
Spara en kopia och prova en begränsad ändring.
Kontrollera resultatet på flera skärmar och språk.
Abonnemang och tema
Egen HTML och CSS finns i Go, Plus och Pro. Kodexempel behöver anpassas till butikens faktiska tema. En ändring i ett tema följer inte automatiskt med till ett annat tema när du byter.
