{"id":29417,"date":"2020-11-28T03:09:02","date_gmt":"2020-11-28T03:09:02","guid":{"rendered":"https:\/\/codex-themes.com\/thegem\/?page_id=29417"},"modified":"2019-07-04T13:46:45","modified_gmt":"2019-07-04T13:46:45","slug":"product-grids","status":"publish","type":"page","link":"https:\/\/codex-themes.com\/thegem\/product-grids\/","title":{"rendered":"Product Grids"},"content":{"rendered":"

[vc_row][vc_column][vc_column_text]<\/p>\n

Grid Layouts <\/span><\/div>\n

[\/vc_column_text]

<\/div>
<\/div>[\/vc_column][\/vc_row][vc_row el_class=”custom-column”][vc_column width=”1\/4″ el_class=”custom-hover”]
<\/div>
<\/div>[vc_single_image image=”14323″ img_size=”full” alignment=”center” onclick=”custom_link” img_link_target=”_blank” link=”https:\/\/codex-themes.com\/thegem\/starting_page\/themes.php?page=justified-shop”]
<\/div>
<\/div>[vc_column_text]<\/p>\n
Justified<\/span><\/div>\n

[\/vc_column_text][vc_column_text]<\/p>\n

Various number of columns and a bunch of layout settings like gap sizes, highlighted projects etc.<\/p>\n

[\/vc_column_text]

Show Demo<\/a><\/div>
<\/div>
<\/div>[\/vc_column][vc_column width=”1\/4″ el_class=”custom-hover”]
<\/div>
<\/div>[vc_single_image image=”14317″ img_size=”full” alignment=”center” onclick=”custom_link” img_link_target=”_blank” link=”https:\/\/codex-themes.com\/thegem\/masonry-shop\/”]
<\/div>
<\/div>[vc_column_text]<\/p>\n
Masonry<\/div>\n

[\/vc_column_text][vc_column_text]<\/p>\n

Lovely masonry grid overview, perfect for different product image proportions. Flexible layout settings.<\/p>\n

[\/vc_column_text]

Show Demo<\/a><\/div>
<\/div>
<\/div>[\/vc_column][vc_column width=”1\/4″ el_class=”custom-hover”]
<\/div>
<\/div>[vc_single_image image=”14315″ img_size=”full” alignment=”center” onclick=”custom_link” img_link_target=”_blank” link=”https:\/\/codex-themes.com\/thegem\/starting_page\/themes.php?page=metro-style-shop”]
<\/div>
<\/div>[vc_column_text]<\/p>\n
Metro<\/div>\n

[\/vc_column_text][vc_column_text]<\/p>\n

Product overviews in metro style. Best option for showcasing your products in a modern way.<\/p>\n

[\/vc_column_text]

Show Demo<\/a><\/div>
<\/div>
<\/div>[\/vc_column][vc_column width=”1\/4″ el_class=”custom-hover”]
<\/div>
<\/div>[vc_single_image image=”29442″ img_size=”full” alignment=”center” onclick=”custom_link” img_link_target=”_blank” link=”https:\/\/codex-themes.com\/thegem\/creative-shop\/”]
<\/div>
<\/div>[vc_column_text]<\/p>\n
Carousel<\/span><\/div>\n

[\/vc_column_text][vc_column_text]<\/p>\n

Add product carousels on any page for cross-selling, up-selling, promotions etc. With autoscroll option.<\/p>\n

[\/vc_column_text]

Show Demo<\/a><\/div>
<\/div>
<\/div>[\/vc_column][\/vc_row][vc_row full_width=”stretch_row_content”][vc_column]
<\/div>
<\/div>[vc_text_separator title_light=”1″ title_level=”h3″ title=”Product grid width”]
<\/div>
<\/div>[\/vc_column][\/vc_row][vc_row][vc_column width=”1\/4″]
\"\"\/<\/div><\/div><\/div>
<\/div>
<\/div>[vc_column_text]<\/p>\n
100% Width<\/span><\/div>\n

[\/vc_column_text][vc_column_text]<\/p>\n

Product overviews, using 100% page width. You can use it in any of grid layouts above.<\/p>\n

[\/vc_column_text][\/vc_column][vc_column width=”1\/4″]

\"\"\/<\/div><\/div><\/div>
<\/div>
<\/div>[vc_column_text]<\/p>\n
Fullwidth<\/span><\/div>\n

[\/vc_column_text][vc_column_text]<\/p>\n

Post your products in fullwidth content area. Applicable for any grid layout types.<\/p>\n

[\/vc_column_text][\/vc_column][vc_column width=”1\/4″]

\"\"\/<\/div><\/div><\/div>
<\/div>
<\/div>[vc_column_text]<\/p>\n
With Sidebar<\/span><\/div>\n

[\/vc_column_text][vc_column_text]<\/p>\n

You can use any of grid layouts on pages with any sidebars: left or right or both.<\/p>\n

[\/vc_column_text][\/vc_column][vc_column width=”1\/4″]

\"\"\/<\/div><\/div><\/div>
<\/div>
<\/div>[vc_column_text]<\/p>\n
In Content<\/span><\/div>\n

[\/vc_column_text][vc_column_text]<\/p>\n

Mix your content with products. Place any product grid on any position in content you wish.<\/p>\n

[\/vc_column_text][\/vc_column][\/vc_row][vc_row full_width=”stretch_row_content”][vc_column]

<\/div>
<\/div>[vc_text_separator title_light=”1″ title_level=”h3″ title=”Grid Columns”]
<\/div>
<\/div>[\/vc_column][\/vc_row][vc_row el_class=”custom-column”][vc_column width=”1\/6″]
\"\"\/<\/div><\/div><\/div>
<\/div>
<\/div>[vc_column_text]<\/p>\n
2x<\/span><\/div>\n

[\/vc_column_text][\/vc_column][vc_column width=”1\/6″]

\"\"\/<\/div><\/div><\/div>
<\/div>
<\/div>[vc_column_text]<\/p>\n
3x<\/span><\/div>\n

[\/vc_column_text][\/vc_column][vc_column width=”1\/6″]

\"\"\/<\/div><\/div><\/div>
<\/div>
<\/div>[vc_column_text]<\/p>\n
4x<\/span><\/div>\n

[\/vc_column_text][\/vc_column][vc_column width=”1\/6″]

\"\"\/<\/div><\/div><\/div>
<\/div>
<\/div>[vc_column_text]<\/p>\n
5x<\/span><\/div>\n

[\/vc_column_text][\/vc_column][vc_column width=”1\/6″]

\"\"\/<\/div><\/div><\/div>
<\/div>
<\/div>[vc_column_text]<\/p>\n
6x<\/span><\/div>\n

[\/vc_column_text][\/vc_column][\/vc_row][vc_row full_width=”stretch_row_content”][vc_column]

<\/div>
<\/div>[vc_text_separator title_light=”1″ title_level=”h3″ title=”Display Product Details”]
<\/div>
<\/div>[\/vc_column][\/vc_row][vc_row][vc_column width=”1\/2″]
\"\"\/<\/div><\/div><\/div>
<\/div>
<\/div>[vc_column_text]<\/p>\n
Outside Image<\/span><\/div>\n

[\/vc_column_text][vc_column_text]<\/p>\n

Make any of your chosen product details like title, description, price & ratings always visible in product lists.<\/p>\n

[\/vc_column_text][\/vc_column][vc_column width=”1\/2″]

\"\"\/<\/div><\/div><\/div>
<\/div>
<\/div>[vc_column_text]<\/p>\n
On Image<\/span><\/div>\n

[\/vc_column_text][vc_column_text]<\/p>\n

Hide your chosen product details by default and display them on image hover.<\/p>\n

[\/vc_column_text][\/vc_column][\/vc_row][vc_row full_width=”stretch_row_content”][vc_column]

<\/div>
<\/div>[vc_text_separator title_light=”1″ title_level=”h3″ title=”Hover Types”]
<\/div>
<\/div>[\/vc_column][\/vc_row][vc_row][vc_column width=”1\/6″]
\"\"\/<\/div><\/div><\/div>[vc_column_text]<\/p>\n
Cyan Breeze<\/span><\/div>\n

[\/vc_column_text][\/vc_column][vc_column width=”1\/6″]

\"\"\/<\/div><\/div><\/div>[vc_column_text css=”.vc_custom_1458555745969{padding-right: 0px !important;padding-left: 0px !important;}”]<\/p>\n
Zooming White<\/span><\/div>\n

[\/vc_column_text][\/vc_column][vc_column width=”1\/6″ css=”.vc_custom_1458555504558{padding-right: 0px !important;padding-left: 0px !important;}”]

\"\"\/<\/div><\/div><\/div>[vc_column_text]<\/p>\n
Horizontal Sliding<\/span><\/div>\n

[\/vc_column_text][\/vc_column][vc_column width=”1\/6″]

\"\"\/<\/div><\/div><\/div>[vc_column_text]<\/p>\n
Vertical Sliding<\/span><\/div>\n

[\/vc_column_text][\/vc_column][vc_column width=”1\/6″]

\"\"\/<\/div><\/div><\/div>[vc_column_text]<\/p>\n
Gradient<\/span><\/div>\n

[\/vc_column_text][\/vc_column][vc_column width=”1\/6″ css=”.vc_custom_1458555522548{padding-right: 0px !important;padding-left: 0px !important;}”]

\"\"\/<\/div><\/div><\/div>[vc_column_text]<\/p>\n
Circular Overlay<\/span><\/div>\n

[\/vc_column_text][\/vc_column][\/vc_row][vc_row full_width=”stretch_row_content”][vc_column]

<\/div>
<\/div>[vc_text_separator title_light=”1″ title_level=”h3″ title=”Loading Mode & Pagination”]
<\/div>
<\/div>[\/vc_column][\/vc_row][vc_row][vc_column width=”1\/3″]
\"\"\/<\/div><\/div><\/div>
<\/div>
<\/div>[vc_column_text]<\/p>\n
\u201cLoad More\u201d Button<\/div>\n

[\/vc_column_text][\/vc_column][vc_column width=”1\/3″]

\"\"\/<\/div><\/div><\/div>
<\/div>
<\/div>[vc_column_text]<\/p>\n
Infinite Scroll<\/div>\n

[\/vc_column_text][\/vc_column][vc_column width=”1\/3″]

\"\"\/<\/div><\/div><\/div>
<\/div>
<\/div>[vc_column_text]<\/p>\n
Standard<\/div>\n

[\/vc_column_text][\/vc_column][\/vc_row][vc_row full_width=”stretch_row_content”][vc_column]

<\/div>
<\/div>[vc_text_separator title_light=”1″ title_level=”h3″ title=”Loading animation”]
<\/div>
<\/div>[\/vc_column][\/vc_row][vc_row][vc_column width=”1\/6″]
\"\"\/<\/div><\/div><\/div>
<\/div>
<\/div>[vc_column_text]<\/p>\n
Fade In<\/div>\n

[\/vc_column_text][\/vc_column][vc_column width=”1\/6″]

\"\"\/<\/div><\/div><\/div>
<\/div>
<\/div>[vc_column_text css=”.vc_custom_1458556199882{padding-right: 0px !important;padding-left: 0px !important;}”]<\/p>\n
Fall Perspective<\/div>\n

[\/vc_column_text][\/vc_column][vc_column width=”1\/6″ css=”.vc_custom_1458555504558{padding-right: 0px !important;padding-left: 0px !important;}”]

\"\"\/<\/div><\/div><\/div>
<\/div>
<\/div>[vc_column_text]<\/p>\n
Flip<\/div>\n

[\/vc_column_text][\/vc_column][vc_column width=”1\/6″]

\"\"\/<\/div><\/div><\/div>
<\/div>
<\/div>[vc_column_text]<\/p>\n
Scale<\/div>\n

[\/vc_column_text][\/vc_column][vc_column width=”1\/6″]

\"\"\/<\/div><\/div><\/div>
<\/div>
<\/div>[vc_column_text]<\/p>\n
Bounce<\/div>\n

[\/vc_column_text][\/vc_column][vc_column width=”1\/6″ css=”.vc_custom_1458555522548{padding-right: 0px !important;padding-left: 0px !important;}”]

\"\"\/<\/div><\/div><\/div>
<\/div>
<\/div>[vc_column_text]<\/p>\n
Move Up<\/div>\n

[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][\/vc_column][\/vc_row][vc_row css=”.vc_custom_1458556690578{margin-bottom: 0px !important;}”][vc_column]