This article is for the last few details a theme cannot reach, written as your own styles.
Use it sparingly: everything the panels offer is safer than a rule you have to keep up yourself.
Before you start
- Custom CSS is not on every plan. If yours does not include it, the panel shows how to upgrade instead.
- Editing needs the Customize Store Appearance permission.
- Your styles apply to every page of your storefront, so check them before you publish.
Step 1. Open the panel
In the Global group choose Custom CSS. The heading carries a Pro badge, and the line under it shows how much of the 10 KB you have used.
Step 2. If you see a padlock instead
If your plan does not include it, you see a card with a padlock and the line This feature is not available on your current plan. Upgrade to unlock it. Your current plan is named under it.
Press Upgrade Now to go to your subscription page. The box appears here once your plan includes Custom CSS.
Step 3. Write your styles
Type in the box and the shop on the page repaints as you go, so you can judge a rule straight away instead of publishing to find out.
Step 4. Check both languages and a phone
Switch the page between English and Arabic, then between the desktop, tablet and phone views. A rule that looks right in one often needs a partner rule for the other.
Step 5. Publish
Your styles stay in your draft like everything else here, so press Publish when you are happy with what you see.
Result
Your own styles sit on top of the theme on every page of the shop, and you saw exactly what they did before any customer did.