Product Grids – TheGem

[vc_row][vc_column][vc_column_text]

Grid Layouts

[/vc_column_text][gem_divider margin_top=”35″][/vc_column][/vc_row][vc_row el_class=”custom-column”][vc_column width=”1/4″ el_class=”custom-hover”][gem_divider margin_top=”45″][vc_single_image image=”14323″ img_size=”full” alignment=”center” onclick=”custom_link” img_link_target=”_blank” link=”https://codex-themes.com/thegem-elementor/starting_page/themes.php?page=justified-shop”][gem_divider][vc_column_text]

Justified

[/vc_column_text][vc_column_text]

Various number of columns and a bunch of layout settings like gap sizes, highlighted projects etc.

[/vc_column_text][gem_button position=”center” style=”outline” size=”tiny” corner=”3″ border=”2″ icon_pack=”elegant” text=”Show Demo” link=”url:https%3A%2F%2Fcodex-themes.com%2Fthegem%2Fstarting_page%2Fthemes.php%3Fpage%3Djustified-shop||target:%20_blank|”][gem_divider margin_top=”40″][/vc_column][vc_column width=”1/4″ el_class=”custom-hover”][gem_divider margin_top=”45″][vc_single_image image=”14317″ img_size=”full” alignment=”center” onclick=”custom_link” img_link_target=”_blank” link=”https://codex-themes.com/thegem-elementor/masonry-shop/”][gem_divider][vc_column_text]

Masonry

[/vc_column_text][vc_column_text]

Lovely masonry grid overview, perfect for different product image proportions. Flexible layout settings.

[/vc_column_text][gem_button position=”center” style=”outline” size=”tiny” corner=”3″ border=”2″ icon_pack=”elegant” text=”Show Demo” link=”url:https%3A%2F%2Fcodex-themes.com%2Fthegem%2Fmasonry-shop%2F||target:%20_blank|”][gem_divider margin_top=”40″][/vc_column][vc_column width=”1/4″ el_class=”custom-hover”][gem_divider margin_top=”45″][vc_single_image image=”14315″ img_size=”full” alignment=”center” onclick=”custom_link” img_link_target=”_blank” link=”https://codex-themes.com/thegem-elementor/starting_page/themes.php?page=metro-style-shop”][gem_divider][vc_column_text]

Metro

[/vc_column_text][vc_column_text]

Product overviews in metro style. Best option for showcasing your products in a modern way.

[/vc_column_text][gem_button position=”center” style=”outline” size=”tiny” corner=”3″ border=”2″ icon_pack=”elegant” text=”Show Demo” link=”url:https%3A%2F%2Fcodex-themes.com%2Fthegem%2Fstarting_page%2Fthemes.php%3Fpage%3Dmetro-style-shop||target:%20_blank|”][gem_divider margin_top=”40″][/vc_column][vc_column width=”1/4″ el_class=”custom-hover”][gem_divider margin_top=”60″][vc_single_image image=”29442″ img_size=”full” alignment=”center” onclick=”custom_link” img_link_target=”_blank” link=”https://codex-themes.com/thegem-elementor/creative-shop/”][gem_divider margin_top=”47″][vc_column_text]

Carousel

[/vc_column_text][vc_column_text]

Add product carousels on any page for cross-selling, up-selling, promotions etc. With autoscroll option.

[/vc_column_text][gem_button position=”center” style=”outline” size=”tiny” corner=”3″ border=”2″ icon_pack=”elegant” text=”Show Demo” link=”url:https%3A%2F%2Fcodex-themes.com%2Fthegem%2Fcreative-shop%2F||target:%20_blank|”][gem_divider margin_top=”40″][/vc_column][/vc_row][vc_row full_width=”stretch_row_content”][vc_column][gem_divider][vc_text_separator title_light=”1″ title_level=”h3″ title=”Product grid width”][gem_divider margin_top=”50″][/vc_column][/vc_row][vc_row][vc_column width=”1/4″][gem_image position=”centered” disable_lightbox=”1″ src=”14333″][gem_divider][vc_column_text]

100% Width

[/vc_column_text][vc_column_text]

Product overviews, using 100% page width. You can use it in any of grid layouts above.

[/vc_column_text][/vc_column][vc_column width=”1/4″][gem_image position=”centered” disable_lightbox=”1″ src=”14331″][gem_divider][vc_column_text]

Fullwidth

[/vc_column_text][vc_column_text]

Post your products in fullwidth content area. Applicable for any grid layout types.

[/vc_column_text][/vc_column][vc_column width=”1/4″][gem_image position=”centered” disable_lightbox=”1″ src=”14329″][gem_divider][vc_column_text]

With Sidebar

[/vc_column_text][vc_column_text]

You can use any of grid layouts on pages with any sidebars: left or right or both.

[/vc_column_text][/vc_column][vc_column width=”1/4″][gem_image position=”centered” disable_lightbox=”1″ src=”14327″][gem_divider][vc_column_text]

In Content

[/vc_column_text][vc_column_text]

Mix your content with products. Place any product grid on any position in content you wish.

[/vc_column_text][/vc_column][/vc_row][vc_row full_width=”stretch_row_content”][vc_column][gem_divider margin_top=”30″][vc_text_separator title_light=”1″ title_level=”h3″ title=”Grid Columns”][gem_divider margin_top=”50″][/vc_column][/vc_row][vc_row el_class=”custom-column”][vc_column width=”1/6″][gem_image position=”centered” disable_lightbox=”1″ src=”14346″][gem_divider][vc_column_text]

[/vc_column_text][/vc_column][vc_column width=”1/6″][gem_image position=”centered” disable_lightbox=”1″ src=”14344″][gem_divider][vc_column_text]

[/vc_column_text][/vc_column][vc_column width=”1/6″][gem_image position=”centered” disable_lightbox=”1″ src=”14342″][gem_divider][vc_column_text]

[/vc_column_text][/vc_column][vc_column width=”1/6″][gem_image position=”centered” disable_lightbox=”1″ src=”14340″][gem_divider][vc_column_text]

[/vc_column_text][/vc_column][/vc_row][vc_row full_width=”stretch_row_content”][vc_column][gem_divider margin_top=”30″][vc_text_separator title_light=”1″ title_level=”h3″ title=”Display Product Details”][gem_divider margin_top=”50″][/vc_column][/vc_row][vc_row][vc_column width=”1/2″][gem_image position=”centered” disable_lightbox=”1″ src=”14363″][gem_divider margin_top=”3″][vc_column_text]

Outside Image

[/vc_column_text][vc_column_text]

Make any of your chosen product details like title, description, price & ratings always visible in product lists.

[/vc_column_text][/vc_column][vc_column width=”1/2″][gem_image position=”centered” disable_lightbox=”1″ src=”14361″][gem_divider margin_top=”3″][vc_column_text]

On Image

[/vc_column_text][vc_column_text]

Hide your chosen product details by default and display them on image hover.

[/vc_column_text][/vc_column][/vc_row][vc_row full_width=”stretch_row_content”][vc_column][gem_divider margin_top=”38″][vc_text_separator title_light=”1″ title_level=”h3″ title=”Hover Types”][gem_divider margin_top=”50″][/vc_column][/vc_row][vc_row][vc_column width=”1/6″][gem_image position=”centered” disable_lightbox=”1″ src=”14383″][vc_column_text]

Cyan Breeze

[/vc_column_text][/vc_column][vc_column width=”1/6″][gem_image position=”centered” disable_lightbox=”1″ src=”14381″][vc_column_text css=”.vc_custom_1458555745969{padding-right: 0px !important;padding-left: 0px !important;}”]

Zooming White

[/vc_column_text][/vc_column][vc_column width=”1/6″ css=”.vc_custom_1458555504558{padding-right: 0px !important;padding-left: 0px !important;}”][gem_image position=”centered” disable_lightbox=”1″ src=”14379″][vc_column_text]

Horizontal Sliding

[/vc_column_text][/vc_column][vc_column width=”1/6″][gem_image position=”centered” disable_lightbox=”1″ src=”14377″][vc_column_text]

Vertical Sliding

[/vc_column_text][/vc_column][vc_column width=”1/6″][gem_image position=”centered” disable_lightbox=”1″ src=”14374″][vc_column_text]

Gradient

[/vc_column_text][/vc_column][vc_column width=”1/6″ css=”.vc_custom_1458555522548{padding-right: 0px !important;padding-left: 0px !important;}”][gem_image position=”centered” disable_lightbox=”1″ src=”14372″][vc_column_text]

Circular Overlay

[/vc_column_text][/vc_column][/vc_row][vc_row full_width=”stretch_row_content”][vc_column][gem_divider margin_top=”34″][vc_text_separator title_light=”1″ title_level=”h3″ title=”Loading Mode & Pagination”][gem_divider margin_top=”50″][/vc_column][/vc_row][vc_row][vc_column width=”1/3″][gem_image position=”centered” disable_lightbox=”1″ src=”14397″][gem_divider margin_top=”3″][vc_column_text]

“Load More” Button

[/vc_column_text][/vc_column][vc_column width=”1/3″][gem_image position=”centered” disable_lightbox=”1″ src=”14395″][gem_divider margin_top=”3″][vc_column_text]

Infinite Scroll

[/vc_column_text][/vc_column][vc_column width=”1/3″][gem_image position=”centered” disable_lightbox=”1″ src=”14393″][gem_divider margin_top=”3″][vc_column_text]

Standard

[/vc_column_text][/vc_column][/vc_row][vc_row full_width=”stretch_row_content”][vc_column][gem_divider margin_top=”20″][vc_text_separator title_light=”1″ title_level=”h3″ title=”Loading animation”][gem_divider margin_top=”50″][/vc_column][/vc_row][vc_row][vc_column width=”1/6″][gem_image position=”centered” disable_lightbox=”1″ src=”14423″][gem_divider margin_top=”3″][vc_column_text]

Fade In

[/vc_column_text][/vc_column][vc_column width=”1/6″][gem_image position=”centered” disable_lightbox=”1″ src=”14421″][gem_divider margin_top=”3″][vc_column_text css=”.vc_custom_1458556199882{padding-right: 0px !important;padding-left: 0px !important;}”]

Fall Perspective

Flip

[/vc_column_text][/vc_column][vc_column width=”1/6″][gem_image position=”centered” disable_lightbox=”1″ src=”14417″][gem_divider margin_top=”3″][vc_column_text]

Scale

[/vc_column_text][/vc_column][vc_column width=”1/6″][gem_image position=”centered” disable_lightbox=”1″ src=”14415″][gem_divider margin_top=”3″][vc_column_text]

Bounce

Move Up

[/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][gem_fullwidth background_style=”cover” container=”1″ background_image=”29426″ padding_top=”100″ padding_bottom=”165″][gem_divider margin_top=”50″][gem_icon pack=”elegant” size=”medium” centered=”1″ icon_elegant=”e035″ color=”#00bcd4″][gem_divider margin_top=”40″][vc_column_text]

Product list settings

[/vc_column_text][gem_divider margin_top=”60″][vc_row_inner][vc_column_inner width=”1/3″][gem_list type=”check-style-2″ color=”3″]

Show / hide product titles & excerpts
Choose product categories
Define number of products to be displayed
Enable / disable filters
Set any gaps size between products

[/gem_list][/vc_column_inner][vc_column_inner width=”1/3″][gem_list type=”check-style-2″ color=”3″]

Show / hide name & date sorting
Asc. / desc. sorting options
Enable / disable wishlist
Enable / disable sharing
Define highlighted products

[/gem_list][/vc_column_inner][vc_column_inner width=”1/3″][gem_list type=”check-style-2″ color=”3″]

Enable / disable animation
Choose from 6 animation effects
Choose from 6 awesome hovers
Fancy titles or slideshow in header
Sidebar & footer settings

[/gem_list][/vc_column_inner][/vc_row_inner][gem_divider margin_top=”50″][/gem_fullwidth][/vc_column][/vc_row]

Trendy