Viola Documentation
Submit a TicketLiveChat
  • Webibazaar Support
  • Shopify Viola
  • Header
    • Announcement bar
    • Header section
    • Mega menu
  • Overlay Group
    • Newsletter Popup
    • Promotional Popup
  • Theme Settings
    • Colors
    • Typography
    • Layout
    • Buttons
    • Variant pills
    • Inputs
    • Cards
    • Product card review
    • Content containers
    • Media
    • Dropdowns and pop-ups
    • Drawers
    • Badges
    • Social media
    • Search behavior
    • Favicon
    • Currency format
    • Cart
    • Checkout
    • Custom CSS
  • Sections
    • Rich text
    • Video
    • Page
    • FAQ
    • Image gallery
    • Custom Liquid
    • Contact form
    • Collapsible content
    • Multicolumn
    • Email signup
    • Collage
    • Slideshow
    • Scrolling bar
    • Collection list
    • Featured collection
    • Image Banner
    • Featured Product
    • Countdown with product
    • Tab Products
    • Countdown
    • Video with text
    • Image with text
    • Product with image
    • Text with icons
    • Lookbook
    • Testimonials
    • Blog Posts
    • Logo list
    • Social media gallery
    • Image comparison
  • Footer
  • Age verification popup
  • Product page
    • Product tab
    • Quick order list
    • Recently viewed product
  • Color swatches
  • Collection Page
    • Collection banner
    • Meta collection list
    • Product Grid
  • Pages
    • How to create page template?
  • Languages and Currency
  • Additional Settings
  • Dynamic source of color swatch variant image
  • how can reset all the changes I made?
  • Turning your website layout from right to left
  • Use of 'Translate & Adapt' App
  • Continue selling when out of stock
  • Collection filter color swatch from metaobject
  • Quick Links
  • Change Log
    • Version 2.0.0
    • Version 1.0.13
    • Version 1.0.12
    • Version 1.0.11
    • Version 1.0.10
    • Version 1.0.9
    • Version 1.0.8
    • Version 1.0.7
    • Version 1.0.6
    • Version 1.0.5
    • Version 1.0.4
    • Version 1.0.3
    • Version 1.0.2
    • Version 1.0.1
    • Version 1.0.0
  • Importing our demos
Powered by GitBook
On this page
  1. Collection Page

Product Grid

PreviousMeta collection listNextPages

Last updated 5 months ago

In the below screenshot, the product grid section is shown on a store’s Collection page. Inside the section, the checkbox options are set to Enable filtering and Enable sorting.

With these options enable visitors can select a range of products within a collection by using filtering criteria like availability, size, and price.

Settings
Description

Products per page

"Products per page" is to specify how many products to show in this page. You can show a minimum of “8” and a maximum of “24” products.

Number of columns on desktop

"Number of columns on desktop" is to customize the column on the desktop screen. You can show a minimum of “2” and a maximum of “4” products.

Product card

Image ratio

Product image customizations in a section are as follows:

  • Adapt to image

  • Portrait

  • Square

Show product type

By enabling this checkbox you can “Show product type”.

Show second image on hover By enabling this checkbox you can “Show the second image on hover”.

Show vendor By enabling this checkbox you can display the “Product vendor”. Show product rating Enable this checkbox to display "Product rating".

Add to cart button style on desktop

Add to cart button style on desktop customizations in a section are as follows:

  • Link

  • Outline button

  • Solid button

Display buttons inline

Enable this checkbox to display the "Buttons inline". Enable quick look button Enable this checkbox to display the "Quick look button".

Quick view position on desktop

Quick view position on desktop customizations in a section are as follows:

  • Top right

  • Bottom left

  • Bottom right

Quick view icon

Quick view icon customizations in a section are as follows:

  • First icon

  • Second icon

Spacing around quick view on desktop

"Spacing around quick view" is to specify how many space around quick view on desktop. You can set a minimum of “0px” and a maximum of “10px” spacing.

Variants

Show variants By enabling this checkbox you can display the “Product variants”.

Disable sold out variant By enabling this checkbox you can disable the “sold out variants”. Type

If the type is "Dropdown," then the variant would be dropdown. And if the type is "Pills," then the variant would be Pills. The variant types are as follows:

Type:

  • Dropdown

  • Pills

Enable color swatches Enabling this checkbox will show the "Variant color."

Filtering and sorting

Enable filtering By enabling this checkbox you can display the “Product filter”.

Desktop filter layout

Product filter layout customizations in a page are as follows:

  • Horizontal

  • Vertical

  • Drawer

Enable sorting By enabling this checkbox you can display the “sorting select box”.

Offer banner

Show offer banner By enabling this checkbox you can display the “offer banne”. Banner image Use "Banner Image" to add the image to the section. Subheading Enter the text you would like to display as a subtitle above the title.

Heading Enter text to display as a title in the section. Button label

Use "Button label" to add a label to the Button in the section. Button link Use "Button link" to add a link to the Button in the section.

Button style

Customization of the "Button style" in this is as follows:

  • Link

  • Outline button

  • Solid button

Show container When "Show container" is enabled, the content container box will be visible.

Color scheme

In this section, you can change the background and foreground colo

  • Accent 1

  • Accent 2

  • Accent 3

  • Background 1

  • Background 2

Mobile layout

Number of columns on mobile

"Number of columns on mobile" is used for the customization of product columns in Mobile devices.

  • 1 Column

  • 2 Columns

Product-list description

By enabling this checkbox you can display the “Product-list description”.

Live Chat Support | Webibazaar Template
Logo