Skip to main content

How to configure Popup Widget on frontend?

You aim to create an attractive and unique popup that is different from other stores' ones. One thing is sure, the AVADA FAQs app will not make you disappointed with a functional and eye-catching widget on the storefront.

Let's get this started!

1. Step 1: Theme​

Select 1 out of 6 available themes for the popup:

You are free to check the result before making a change at Preview.

2. Step 2: What to show​

Add the blocks you want to display on the popup widget.

  • Contact us: Enable to show the Contact us block at the frontend. The fields WhatsApp, Phone Call, Contact Form, and Message will also be on display if you enable their icon buttons.

    • WhatsApp: Enter the phone number to connect to your WhatsApp.

    • Phone Call: Fill in the phone number to make calls to your store.

    • Contact Form: Enter a link to a page you want shoppers to visit.

    • Message: Enter a link to make conversations easily, e.g. your Facebook account.

For instance, avada.io/ or https://avada.io/ link to the AVADA homepage.

  • Order Tracking: Enable to show the Order Tracking functionality on the store.

  • Featured Question: Show the Articles block that includes the questions marked Featured at FAQs.

  • Feature Categories: Display the Categories block that includes the categories marked Featured at FAQs.

Please note that Featured Categories shows 3 categories enabled Featured as default. If no category is allowed, the 3 default categories will be published.

3. Step 3: Heading​

Configure the heading's content for the popup widget.

  • Theme Color: Choose a color for your theme.

  • Text Color: Select a color for the texts.

  • Welcome Text: Fill in the content to be displayed on the top of the popup.

  • Description: Enter the content under the Welcome Text.

  • Text Font: Choose the font for Welcome Text and Description. You can select available fonts in the app or other fonts on your store.

4. Step 4: Widget Button​

Select the options to show the icon button:

  • Icon: Choose available icons or upload them from your device.

  • Background Color: Select the background color for the icon.

  • Alignment: Set up the button's position with 2 options (Bottom left and Bottom right).

5. Step 5: Preview on storefront​

  • Click on Go to storefront to visit your homepage.

  • Publish: After changing the Shopify theme, click the Publish button to display the popup widget on the frontend.

6. Advanced Settings​

  • Content’s Text Font: Select the font for the content on Widget, except Welcome Text and Description. You can select available fonts in the app or other fonts on your store.

  • Custom CSS: Enter a CSS code you want to edit.

  • Chat now: Contact us to get further support.