All Collections
Instant Inventory
Troubleshooting
The widget window is too small on my website
The widget window is too small on my website

What to do when your widget does not display fully on your Wix or Shopify website

Philippa Corrick avatar
Written by Philippa Corrick
Updated over a week ago

Sometimes your widget does not display fully on your Wix or Shopify website.

Read on to find out how to fix it, or jump to a section with these links:


Wix Website

If you use the standard Wix widget, you might get a small widget. That's because the web page is putting the widget in a small ‘container’

You fix this by changing the height from 100% to 1200px. This updates the code to a bigger size.

How to fix on Wix:

  1. Go to your Instant Inventory > Actions > Publish to My Website > Script > Copy Script

  2. Go back to your Wix Editor > Site Action > Edit Site > Click on the website name

  3. Find the HTML box and click 'edit code' to open the box with your widget script

  4. Within the script, add style="height:1200px" after 'width='100%'

  5. Click Save and view the page

Note: You must change the API key for your customer account. Read this article to learn how.


Shopify Website

If you use the standard Shopify widget, you might get a small widget. That's because the web page is putting the widget in a small ‘container’.

Read on to learn how to fix the height and adjust the width.

Fix the height on Shopify:

You can fix this by changing the height from 100% to 1200px. This updates the code to a bigger size.

  1. Go to your Instant Inventory > Actions > Publish to My Website > Script > Copy Script

  2. Go back to your Shopify website > click on Pages > Your website editor opens up

  3. Click on the show HTML button (this button <>)

  4. Within the script, add style="height:1200px" after 'width='100%'

  5. Click Save and view the page

Note: You must change the API key for your customer account. Read this article to learn how.

Adjust the width on Shopify:

This can be tricky as all themes are different. To fix it, you may need to dig deeper into the code:

  1. Go to the website

  2. Open Inspect element > make sure you see styles

  3. Hover over the code in Elements Tab > you may need to expand the code

  4. Expand the HTML code until seeing what you are looking for

  5. Select HTML code

    1. When you hover over the code and check your site at the same time, the highlighted shows the full container that holds the widget.

    2. Go to the Styles tab and play with the CSS code in the styles block

    3. In our case > container == narrow

  6. Navigate to the themes.css file in Shopify

  7. Find that particular CSS Value

  8. Modify Value and click save

  9. Check your Website


WordPress or old widget

If you cannot see the diamond inquiry form does not fully display or is cut off, you will need to adjust the height of the popup box with a CSS override:


Did this answer your question?