Gravity Software - Swatcher - Variant Theme Code

Shopify Discussion
,
1

The problem is that our theme comes with its own swatches and each time a variant is changed the theme’s code updates the form (it removes and adds back the swatches rendered with the theme). Gravity Software fixed the issue by hiding the swatches that come from the theme and adding back our swatches. However there is a little delay and for a second the swatches are invisible. The Dawn Theme code removes the swatches and they need to be added back whenever the option is changed.

2

Try using CSS to keep the theme swatches visible but hidden behind your custom swatches instead of removing them. For example, set the theme swatches container to visibility: hidden or opacity: 0 rather than removing it. This avoids the flicker from DOM removal and re-adding. If the theme’s JS forces removal, you might debounce your swatch re-render to run immediately after DOM updates.

3

Why have you switched from the old swatches – they looked prery much the same as the new ones?

Probably reach out to Gravity for better implementation – Dawn is not some obscure theme, proper support for Dawn is essential…

There are several ways to perform these transitions faster.
The way Gravity operates would never match the theme speed.

Maybe consider combined approach – Gravity on collection pages, old solution on product pages?

Alternatively, you can add some CSS to minimize layout shifts and make your size buttons “emerge” similarly to color swatches – to make it look like this behaviour is “native”.

In my browser, CSS like this does it on your site, but maybe it needs more refinement.

You can try it in “Custom CSS” of the product info section.


fieldset+.product-form__input--pill { 
  /* reserve space above size buttons while swatches not loaded yet */
  margin-top: 90px;
}

fieldset+.product-form__input--pill label { 
  /* make size buttons animate from invisible to opaque when swatches div is inserted */
  opacity: 0.02;
  transition: opacity 0.3s linear;
}
5

Hello there @BuoyandBoat
Thanks for the update. This is more like a theme conflict that has to do with rendering rather than the swatches themselves. Because Dawn rerenders the variant picker when options are changed, any custom swatches that are injected afterwards can briefly disappear on refresh. A possible solution however that would additionally allow the swatch output to maintain through re-renders (as opposed to be hidden and re-added with JS) would be to output the swatches in the theme variant picker template itself. This will usually remove the flicker and create a better experience.