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’

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

Directions:

  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. Add the following before the widget script

    <style>
    .grid-item.large--two-thirds.push--large--one-sixth {
    left: 0 !important;
    width: 100% !important;
    }
    </style>

  5. Now go to the script and add this piece of code after 'width='100%'
    style="height:1200px"
  6. Click Save and view the page

Example of My Script before changes:

<div id='diamondinstantinventory' data-apikey='4712d54f-baa0-426e-8296-e6400bed5092' height='100%' width='100%'></div> <script src='https://instantinventory-widgets-cl59s.s3.amazonaws.com/diamonds/1.0.0/widget.js'></script>

Example of My Script after changes:


<style>
.grid-item.large--two-thirds.push--large--one-sixth {
left: 0 !important;
width: 100% !important;
}
</style>

<div id='diamondinstantinventory' data-apikey='4712d54f-baa0-426e-8296-e6400bed5092' height='100%' width='100%' style="height:1200px"></div> <script src='https://instantinventory-widgets-cl59s.s3.amazonaws.com/diamonds/1.0.0/widget.js'></script>

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

Did this answer your question?