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
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
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
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
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.
Next, for the BADGE mode, enable the switchers and fill up the field by 30.
After that, for the ACTION BTN mode, enable the switchers and see what happens.
Style Tab Customizations
Items Appearance Changing
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
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
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
Then, go to Style > Title. Here, change the Hover Color, Typography, and see the result.
Change the Pricing Colors
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
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
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
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
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.
