Skip to content

Customize the try-on in your store

In this tutorial you make the try-on match your store: apply a style kit, adjust the button on the product page and its animation, set up the invitation (pop-up) and publish. Everything changes in the live preview first, and your store only gets the changes in the last step.

In the side menu, click Experiência na loja (In-store experience). The four areas, Estilo (Style), Elementos (Elements), Regras (Rules) and Marca (Brand), are on the left. The live preview of a product page is on the right.

The Experiência na loja editor with the Estilo, Elementos, Regras and Marca areas on the left and the live preview on the right

At the top of the preview, choose Computador (Computer) or Celular (Phone). Check both screens as you go.

  1. Open Estilo.

  2. Under Kits prontos (Ready-made kits), look at the thumbnails. The first ones match your store type and carry a tag such as Para moda (For fashion), Para óticas (For eyewear) or Para casa (For home).

  3. Click Aplicar (Apply) on the kit that best fits your store. The preview changes right away.

  4. Under Ajustes globais (Global settings), change the Cor da marca (Brand color) to your store’s color and, if you like, the Cantos (Corners), Sombra (Shadow) and Fonte (Font). These settings apply to the button, invitation, window and links together.

See every option in Store style, kits and global settings.

  1. Open Elementos › Botão na página (Elements › Button on the page). Another way: click the button in the preview, on Editar botão (Edit button).

  2. Under Onde aparece (Where it appears), choose Junto ao botão de comprar (Next to the buy button, recommended), Flutuante no canto (Floating in the corner) or Sobre a foto do produto (On the product photo). For the first and last, click Escolher na minha página (Pick on my page) and mark the spot on a real page of your store.

  3. Under Conteúdo (Content), write a short, direct Texto do botão (Button text) and choose the Ícone (Icon).

  4. Under Aparência (Appearance), keep Padrão (Default) to use the try-on’s look, or change any setting so the button switches to Personalizado (Custom).

On the same tab, under Animação (Animation), choose the Movimento do botão (Button motion): Nenhuma (None), Pulsar (Pulse), Brilho (Shine) or Balançar (Wobble). The preview shows the motion.

The Animação section with the Nenhuma, Pulsar, Brilho and Balançar options

The motion stops when the customer hovers over the button, and people who asked their device for less motion see a still button. With the button Sobre a foto do produto, there’s no animation. See Button on the product page.

The invitation reminds customers to try on, a few seconds after they land on the product page.

  1. Open Elementos › Convite (pop-up) (Elements › Invitation) and turn on Mostrar convite (Show invitation).

  2. Under Conteúdo (Content), write the Título (Title), the Mensagem (Message) and the Texto do botão (Button text), and choose the Imagem (Image).

  3. Under Layout, choose Cartão (Card), Barra (Bar) or Bolha (Bubble), and the Animação de entrada (Entrance animation).

  4. Under Quando aparece (When it appears), set Aparece depois de (seg.) (Appears after, in seconds), No máximo em (seg.) (At most after, in seconds) and Com que frequência (How often). Uma vez por visita (Once per visit) avoids showing the invitation again to someone who has seen it.

  5. Under Onde aparece (Where it appears), choose the Canto (Corner) and the No celular (On phones) behavior.

  6. In the preview, choose the Convite (Invitation) moment and click Ver de novo (See again) to watch the entrance.

The Layout section with the Cartão, Barra and Bolha options and the Animação de entrada

The details of each option are in Pop-up invite to try on.

  • In Elementos › Janela do provador (Elements › Try-on window), choose how the window opens in your store. In the preview, use the Provador aberto (Try-on open) moment. See Try-on window.
  • In Marca (Brand), check the logo and the name shown in the try-on. See Your store’s brand in the try-on.
  1. In the bottom bar, check how many changes are left to publish. Areas with changes have a colored dot.

  2. Click Publicar alterações (Publish changes). When it finishes, the bar shows Tudo publicado (All published).

  3. Open a product page of your store in a private window and check the button, the animation and the invitation. Reload the page if it was already open.

If a part isn’t published, the notice shows Corrigir em … (Fix in …) and takes you straight to the field with the problem. If your store still looks the same, see Published changes not showing in the store.

Frequently asked questions

Do changes go to my store while I edit?

No. Everything shows in the preview first. Your store only changes when you click Publicar alterações (Publish changes).

Can I go back to what I had before?

Before publishing, click Descartar (Discard) to return to what's published. After publishing, use Restaurar padrão (Restore default) on each setting or apply a kit again.

I can't find a setting. Where is it?

Use the Procurar ajuste… (Search settings) box at the top of the editor. It opens the right area and highlights the setting.