Table Of Contents

glossy grid widget

How To Use Glossy Grid Widget in Easy Way by Ultimate Store Kit

The Glossy Grid Widget is a product grid layout planner 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.

Inserting Widget

glossy grid widget

To insert the widget, go to the widget menu, search Glossy Grid, then drag-drop it in the text area on the page.

Content Tab Customizations

Customize the Grid Layout

Glossy Grid Doc 2 - BdThemes

First, we are going to customize the Layout section under the Content tab. To do that, go to Content > Layout. Here, change the Style of the Layout, then select the number of the Columns, then change the Columns Gap by 30.

Use Query to Control What’s on Display

Glossy Grid Doc 3 - BdThemes

Next, go to Content > Query. Here, change the Source, then change the Product Limit. After that, for the INCLUDE mode, fill up the Include By field. Then change the options of this mode.

Additional Settings for Precise Layout Modifications

Glossy Grid Doc 4 - BdThemes

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 select options from the drop-down menu.

Glossy Grid Doc 5 - BdThemes

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

Glossy Grid Doc 6 - BdThemes

After that, for the ACTION BTN mode, enable the switchers and see what happens.

Style Tab Customizations

Items Appearance Changing

Glossy Grid Doc 7 - BdThemes

Now, we are going to customize the Items section under the Style tab. Go to Style > Items. Here, in the Items section, set a border, then change the Border Color, then change the Box Shadow, and see the result on the page.

Change Colors of Content Part

Glossy Grid Doc 8 - BdThemes

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

Product Image Parameters

Glossy Grid Doc 9 - BdThemes

After that, go to Style > Image. Here, you can see two modes i.e.: NORMAL and HOVER. For the NORMAL mode, change the Background Color, Then set Border Radius, and see the result.

Grid Title Customizations

Glossy Grid Doc 10 - BdThemes

Then, go to Style > Title. Here, change the Hover Color, Typography, and see the result.

Change the Pricing Colors

Glossy Grid Doc 11 - BdThemes

Now, go to Style > Price. Here, change the Regular Color and Sale Color, remember to set different colors for each and see the result.

Setup Personalized Rating Color Code

Glossy Grid Doc 12 - BdThemes

Next, go to Style > Rating. Here, change the Color and Active Color; select separate colors for each, and see the result on the page.

Product Badge Customizations

Glossy Grid Doc 13 - BdThemes

After that, go to Style > Badge. Here, you can see 5 modes i.e.: SALE, DISCOUNT, STOCK, TRENDING, and NEW. For the SALE mode, change the options; following this, change the options for the following modes, and see the result.

Action Buttons Modifications

Glossy Grid Doc 14 - BdThemes

Finally, go to Style > Action Button. Here, you can see three modes i.e.: WISHLIST, QUICKVIEW, and CART. For the WISHLIST mode, change the options shown here; following this change the option of other modes, and see the result.

Final Result

Glossy Grid Doc 15 - BdThemes

All done! Now sit back and watch the result.

Video Assist

To know more about this, please watch the attached tutorial video. You can also see our demo page to know more. Thanks.

Need any assistance? Call Us: +880 1700 55 95 95 | © Copyright 2022 All Rights Reserved by BdThemes
Be cool in Summer with up to 40% OFF on our products | Coupon: SUMMERSALE

Ready to buy our Products?

Don’t miss Powerful Elementor plugins; the Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit and over 2000+ ready templates for professional web design.

Changed your Mind?

Please Suggest us how to improve

Up to 40% OFF

Grab the best summer deal and enjoy awesome Elementor web design tools in your hands now! This is a limited-time offer so get it before time runs out.