Product update: Announcing Instant CSS
Sam Van Hees • 27 July 2022
At Instant Commerce we’ve built the largest library of pre-built conversion optimized eCommerce blocks. With the goal to help you create the best possible headless webshop in an easy and fast way.
Until now, customization of these blocks was possible with our no-code tools. While this offered the flexibility to build great stores, we decided to go one step further.
Announcing: Instant CSS. With Instant CSS every block becomes customizable to the pixel. Read on to find out how it works.
Step 1: Build your store
First things first, build the store you've always dreamed of by selecting and customizing our pre-built eCommerce blocks.
Step 2: Head into the CSS editor
Now that you have built your store, it's time to add an extra level of customization to various parts of your store. Head over to the 'Custom code' dashboard and click on 'Add CSS Snippet' to enter the CSS editor.
Step 3: Add custom CSS
Go to the page that needs customization, add your CSS code and get a live preview of the changes you make.
The code editor includes syntax validation and auto-completion.
Important: Only use the human-readable class names, don't use the generated hashed classes (more docs coming soon).
Step 4: Publish the changes
Hit save to automatically sync the changes to your headless CMS. When you go back to the 'Custom Code' dashboard you get a clear overview of the different CSS snippets you created.
Fun fact, we implemented the Monaco Editor, also used by VS code.
Become better at increasing conversion
All things headless commerce, eCommerce best-practices, and Instant Commerce updates.
We won’t put any spam in your mailbox, promised.