Learn the basics and choose the right place for each change so you can customise your shop without unintentionally changing the rest of the theme.
This guide is for shop administrators starting with HTML and CSS. Abicart Go, Plus and Pro support custom HTML and CSS. The CSS menu path below applies to Diversity themes; TPL has a different editor. First check which theme is active.
1. Distinguish content from presentation
HTML describes content structure, such as headings, paragraphs and links. CSS controls presentation, such as colours, spacing and layout. Edit a product description in the product's text editor and an ordinary page under Pages. Use the theme's own settings when they already cover the task. CSS is not a substitute for correcting inaccurate product details or prices.
Follow the guide to HTML mode and custom CSS in Abicart when choosing a product text editing mode or adding a theme rule.
2. Choose a learning resource
W3Schools HTML Tutorial: start with headings, paragraphs, links and correctly nested elements.
W3Schools CSS Tutorial: learn selectors, properties and how rules combine.
CSS-Tricks: further explanations and examples, including layout.
Codecademy HTML and CSS: exercises where you write code yourself. Check the service's current course terms.
Learn CSS on web.dev: a course covering the cascade, specificity and responsive layout.
MDN CSS material: learning material and a reference for how CSS works.
Examples on these websites are general. A selector from a course example does not automatically target the correct element in your Abicart theme.
3. Try a limited change
Keep a copy of the HTML or CSS you intend to change. Prefer a theme copy for changes affecting layout.
Open the shop page and inspect the element using your browser's developer tools. Check which rule actually controls its appearance.
Try a rule targeting only the intended area. Changes in developer tools are temporary and are not saved in Abicart.
In a Diversity theme, open Appearance → Themes → Edit for the correct theme, then Style → Custom CSS. Add the limited rule without deleting existing CSS.
Save when you intend to apply the change. Check desktop, mobile, the shop's languages and other pages using the same element.
If the change does not appear or has unintended effects
Check that you are editing the theme being displayed, that the CSS is valid and that the selector exists on the page. Inspect which rules win in the cascade rather than adding !important everywhere. If text seems inaccurate, first check product text, page content and any imports or integrations. Do not hide important information with CSS instead of correcting it. Restore your own change from the saved copy if it affects more than intended.
Quick start
Learn basic HTML and CSS using the resources above.
Choose the content editor or theme setting for the task.
Keep a copy and try a limited change.
Check the result on different screens and languages.
Subscription and theme
Custom HTML and CSS are available in Go, Plus and Pro. Adapt code examples to the shop's actual theme. A change in one theme does not automatically carry over when you switch to another.
