Why preview is not identical to storefront

The preview panel in the element form gives you a fast visual approximation while you configure an element. It is not pixel-identical to what shoppers see on your storefront. Small differences are expected and not a bug.

Why the difference exists

A few reasons:

• Admin context vs storefront context. The preview renders inside Shopify's admin iframe, in a controlled environment that uses LinkSpot's own styles and a placeholder image. The storefront renders inside your published theme, with all of the theme's CSS, fonts, and layout rules around each element.
• Theme and app styles bleed through on the storefront. On a real product page, LinkSpot elements can pick up CSS from your theme (font, line height, color, border radius) and sometimes from other Shopify apps that inject their own styles. The admin preview is isolated and does not see any of this.
• Gallery scaling differs. Each theme renders the product image gallery differently (fixed pixel sizes, responsive, cropped). The preview uses its own scaling, so an element that looks one size in the preview may render at a slightly different size in the actual gallery.

What to do about it

• Use the preview to design, then verify on the storefront. Save the element, view the product page, and adjust if needed.
• For annotations, the preview has a Scale elements option (in the gear icon menu) that helps you scale annotations in the preview to match the storefront. See Elements preview settings for details.
• Pick a preview aspect ratio that matches your store's photography so the preview frame is closer in proportion to the real image.

If the difference is dramatic (the element does not appear at all, or looks completely broken on the storefront), check the Setup guide and the troubleshooting article Elements are not showing on the storefront before assuming it is a preview-vs-storefront issue.