The Shiny Grid Widget is an amazing feature presented by BDthemes and is a part of the Ultimate Store Kit. It lets you show your products to catch the eyes of the visitors.
Let’s learn how to use the widget on your site.
Insert the Widget

First, you have to insert the widget. To do that, go to the widget menu, then search Shiny Grid, then drag-drop the widget in the text area on the page.
Content tab customization
Customize the Layout section

First, go to Content > Layout. Here, change the Style, then select the Content Gap by 30. You can change the other options if you want.
Edit Query

Next, go to Content > Query. Here, change the Source, then select the Product Limit, then edit the Show Product. You can enable the switchers shown in the lower portion as you wish.
Change the Additional settings

After that, go to Content > Additional. Here, you can see three modes i.e.: CONTENT, BADGE, and ACTION BTN. For the CONTENT mode, enable the switchers and fill up the fields.

Next, for the BADGE mode, enable the switchers and then fill the field by 30.

Now, for the ACTION BTN mode, enable the switchers and see the result.
Style tab customization
Modify the Items

Now, we are going to customize the Items using the Style tab. To do that, go to Style > Items. Here, you can see two modes i.e.: NORMAL and HOVER. For the NORMAL mode, set a thin Border, then set the Border Radius by 5.
Edit the Image

Next, go to Style > Image. Here, you can see two modes i.e.: NORMAL and HOVER. For the NORMAL mode, change the Border Color, then set the Border Radius, and see the result.
Change the Content settings

After that, go to Style > Content. There are two modes i.e.: NORMAL and HOVER in this section. For the NORMAL mode, change the Background Type, the change the Border Type, next set Border Radius and add some Padding.
Make changes to the Title

Next, go to Style > Title. Here, change the Color, then change the Hover Color, and see what happens.
Edit Category

After that, go to Style > Category. Here, you can see two modes i.e.: NORMAL and HOVER. For the NORMAL mode, change the Color, then set a thin Border, then change the Border Color, and see the result.
Set the Price tag

Now, go to Style > Price. Here, change the Regular Color, then change the Sale Color, and see the result.
Edit Rating option

After that, go to Style > Rating. Here, change the Color, then change the Active Color, and see what happens.
Replace the Button settings

Next, go to Style > Button. Here, you can see two modes i.e.: NORMAL and HOVER. For the NORMAL mode, change the Background Color and other options, and see the result.
Change the Badge options

After that, go to Style > Badge. Here, you can see five modes i.e.: SALE, DISCOUNT, STOCK, TRENDING, and NEW. For the SALE mode, change the Background Color, then set the Border Radius, and see the result. You can change the other options if you want.
Make changes to the Action Button

Finally, go to Style > Action Button. Here, you can see two modes i.e.: WISHLIST and QUICKVIEW. For the WISHLIST mode, change the Normal Background Color, then change the Hover Background Color, and see the result. You can change the other options as needed.
Video assist
If you want to know more about this widget, please watch this tutorial video. You can also see our demo page to learn more. Thank you.