The widget looks different from the preview
Why your store's BOGOX widget can look different from the editor preview, and what to check for fonts, theme styles, caching, variants and swatches.
Written by Miguel Zamora
On this page
The Preview in the offer editor is built to match your store, but your theme and browser can still change a few details. Go through these checks before you contact us.
Fonts and text
The preview uses your published theme’s body font, the same font the widget takes from your theme in the store.
Some Shopify fonts are licensed, for example Futura or Avenir Next, and can’t load outside your store. The preview then uses the closest free font, so widths and line breaks can be slightly different.
The font is read once per browser session. If you just changed your theme’s font, open the app in a new browser tab.
If you’re checking an unpublished theme, remember the preview always uses the published theme’s font.
Theme styles, screen size and cached pages
Your theme’s own styles can reach the widget, such as letter spacing, uppercase text or button styles. The preview doesn’t include them.
The preview shows the widget at the width of the editor’s preview column. On a phone the widget is often narrower, so text can wrap onto more lines.
Compare at 100% browser zoom and a similar window width. Click Open product in storefront to open the same product in your store.
After you save or publish, reload the product page. If you still see the old version, wait a minute and try a private browser window.
There’s no app embed version to update: BOGOX updates reach your store automatically. Just make sure Bogox Upsell, Cross-sell is on under App embeds in the theme you’re looking at.
Variants or swatches don’t look right
Option names. A swatch style is linked to the exact option name. Capital letters and spaces at the start or end don’t matter, but spelling does: “Color”, “Colour” and “Main color” are three different options.
Color names. The color of each value is set in Edit color options and is matched by the value’s name. If you renamed a value in Shopify, for example “Navy” to “Navy blue”, set its color again.
Images on variants. Product image swatches and the Product image dropdown use each variant’s image. Variants without an image in Shopify show no picture.
Sold-out variants. With Hide sold-out variants on, they disappear from the offer. With it off, they show as unavailable.
Theme picker. Hide the theme’s variant picker only works when Let customers choose a variant for each item and Show variant picker on the 1-item tier are both on. If your theme’s picker still shows, tell us your theme name.
To set these options up from scratch, see “Variants and swatches”.
Still looks different?
Contact our support team and include:
Your store address and the offer name.
A link to the product page.
Screenshots of the preview and of your store, on desktop and on a phone.
Your theme name and the browser you used.