Widget window is too small on my website

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

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

• Help with a Wix website

• Help with a Shopify website

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 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. Make 2 changes to the script:
   a. Add this code before the Instant Inventory script:
   <style>
   .grid-item.large--two-thirds.push--large--one-sixth {
   left: 0 !important;
   width: 100% !important;
   }
   </style>
   b. 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 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, you may need to dig deeper in code:

1. Goto 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 see what you are looking for

5. Select html code

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

   2. Go to Styles tab and play with the css code in 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

   

Developer/Tech resources: https://technet.rapaport.com/Info/RapLink/RapNetInventoryLink.aspx