How do I preview my draft before putting it into service?

Short answer: Save the draft, then click the dark green button in the action bar — the one whose icon is a circle made of two arrows. It generates the draft's site, which you then open at its address: you see exactly what your visitors will see, without having published anything.

Steps

On a draft, save your changes. The generate button only appears once the draft is saved, and only while the site has not already been generated.
In the action bar at the top right of the shop, click the dark green button whose icon is a circle made of two arrows. The button carries no text: hovering it shows a tooltip reading “Create the website of this draft shop to see all changes”.
Confirm in the “Create a temporary hidden shop to see all changes” window. Wait while it is generated: the first time takes longer, the system says so and announces a duration.
Open the draft's address in a new tab and browse the shop the way a visitor would.
If everything suits you, put the draft into service.

What to look at

The real rendering shows what the dashboard cannot:

the colors in context, text included — see How do I choose my shop's two colors;
the order of the collections and of the products, as they are browsed;
the version shown by default for each multi-version product — see What is a multi-version product;
the rendering of a text personalization, by simulating one on a product.

Look at the shop on a phone. That is where most of your visitors will open it, and a title that is too long or an image that is too busy shows up immediately.

Going further

What is a draft shop

You'll know it worked when: The draft's site opens at its address and shows your changes as they will be online.