Customize Inventory Widget

I would like to customize the inventory widget by having the thumbnail at the top and then the quantity to input below and the inventory remaining below that, all in a vertical format. Then I would like to be able to have multiple of these on a row, so it looks more like a shopping page. Is this possible?

Hey there,

I'm looking into this for you and will get back to you shortly.

Thanks

Hey there,

Thanks for the wait.

Please follow the instructions as shown in the screenshots below to achieve the desired results.

Select the inventory widget and click on settings. Then change its width to 250 and click on the Advanced tab.

On the advanced tab turn on the shrink button.

Now you'll be able to see that the inventory widget is half the size. As soon as you apply same changes on the next inventory widget it will move up in the same row as the first widget.

But before you do that you'll also have to add the following CSS code in each widget's CSS section to align the image, dropdown menu, and title vertically.

Please copy the following CSS code in the widget CSS section as shown above.

.checklist input[type=number], .checklist select.item {

    margin-right: 58vw;   

}

.checklist img {

    width: 40px;

    height: 40px;

}

.checklist label {

    padding-right: 4em;

}

Hope this helps. Let us know if you need further assistance.

Thanks.

Missed one thing. Here is your cloned form link in which I've made changes. In case if you need to check it you can clone it:

https://form.jotform.com/201681524243954

Please use the following link to see how you can clone a form using a URL.

https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

Thanks