Product Grids

[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]

2x

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

3x

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

4x

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

5x

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

6x

[/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

[/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=”14419″][gem_divider margin_top=”3″][vc_column_text]

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

[/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=”14425″][gem_divider margin_top=”-3″][vc_column_text]

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]

Privacy Preferences
When you visit our website, it may store information through your browser from specific services, usually in form of cookies. Here you can change your privacy preferences. Please note that blocking some types of cookies may impact your experience on our website and the services we offer.