# Category products

{% embed url="https://salesiq.zohopublic.in/signaturesupport.ls?widgetcode=siq93f38201da244cbe219b2cab71813c85342abc57dd769c6885e2bde57d2b90da" %}

Ideal for sales displays a collection of products such as new arrivals or adding products to any area of your store.

<table><thead><tr><th width="286">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Color scheme</td><td><p>In this section, you can change the background and foreground color of a section using the color scheme.</p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li><li>Scheme 5</li></ul></td></tr><tr><td>Layout</td><td><p>Customization of the "Layout" in this section is as follows:</p><ul><li>Wide</li><li>Container</li></ul></td></tr><tr><td>Heading</td><td><p><strong>Color scheme</strong></p><p>In this section, you can change the background and foreground color of a section using the color scheme.</p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li><li>Scheme 5</li></ul><p><strong>Spacing around heading</strong> </p><p>"Spacing around heading" is to customize the spacing around heading on the desktop screen. You can set spacing around heading as a minimum of “0px” and a maximum of “30px”. </p><p></p><p><strong>Text</strong>  </p><p>Enter text to defines the main heading of the section. </p><p></p><p><strong>Text color</strong> </p><p>You can customize the foreground color of the heading by using the color option. </p><p></p><p><strong>Size</strong></p><p>Following is the font size customization of the heading of the section:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul><p><strong>Alignment</strong> </p><p>Customization of the "Alignment" in this is as follows:</p><ul><li>Left</li><li>Center</li></ul><p><strong>Description</strong> </p><p>Enter text to defines the description of the section.  </p><p></p><p><strong>Description size</strong> </p><p>Following is the font size customization of the description of the section:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>View all button</td><td><p><strong>Label</strong>   </p><p>Use "Label" to add a label to the Button in the section. </p><p><br><strong>Style</strong></p><p>Customization of the "View all" style in the Category products section is as follows:</p><ul><li>Link</li><li>Outline</li><li>Solid</li></ul><p><strong>Collection</strong></p><p>Select a collection to display products in the section.</p></td></tr><tr><td>Maximum products to show</td><td>"Maximum products to show" is to specify how many products to show in a section. You can show a minimum of “2” and a maximum of “8” products.</td></tr><tr><td>Number of columns on desktop</td><td>"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.</td></tr><tr><td>Product number</td><td><p><strong>Show number over the image</strong> </p><p>Enable this checkbox to show number on image of this section.  </p><p></p><p><strong>Background color</strong> </p><p>You can customize the background color of the number by using the color option. </p><p></p><p><strong>Foreground color</strong> </p><p>You can customize the foreground color of the number by using the color option. </p><p></p><p><strong>Border color</strong> </p><p>You can customize the border color of the number by using the color option. </p><p></p><p><strong>Corner radius</strong> </p><p>"Corner radius" is to customize the radius of number in the section. You can set radius minimum “0” and a maximum “40” px. </p></td></tr><tr><td>Banner</td><td><p><strong>Image</strong> </p><p>Use "Image" to add the banner image to the section. </p><p></p><p><strong>Heading</strong> </p><p>Use text to display as a banner heading in the section. </p><p></p><p><strong>Heading size</strong> </p><p>Following is the font size customization of the banner heading of the section:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul><p><strong>Description</strong> </p><p>Enter text to defines the banner description of the section.  </p><p></p><p><strong>Description size</strong> </p><p>Following is the font size customization of the banner description of the section:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Button</td><td><p><strong>Label</strong>   </p><p>Use "Button label" to add a label to the Banner Button in the section. </p><p></p><p><strong>Link</strong> </p><p>Use "Link" to add a link to the Banner button in the section.<br><br><strong>Style</strong></p><p>Customization of the Banner button style in the Category products section is as follows:</p><ul><li>Link</li><li>Outline</li><li>Solid</li></ul></td></tr><tr><td>Content alignment</td><td><p>Customization of the "Banner content alignment" in this section is as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr><tr><td>Show content background</td><td>Enable this checkbox to show content background.</td></tr><tr><td>Content background opacity</td><td>Using this settings, you have the ability to change the content background opacity. Modify the "Content background opacity" setting to increase or decrease the opacity level of the overlay on the banner content. </td></tr><tr><td>Content color scheme</td><td><p>In this section, you can change the background and foreground color of a section using the color scheme.</p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li><li>Scheme 5</li></ul></td></tr><tr><td>Mobile layout</td><td><p><strong>Number of columns on mobile</strong></p><p>"Number of columns on mobile" is used for the customization of columns in Mobile devices.</p><ul><li>1 Column</li><li>2 Columns</li></ul></td></tr></tbody></table>

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2FNJSQHD1FoUZaYBBbduyE%2Fcategory-products.png?alt=media&#x26;token=266ee3d5-765b-41b1-beed-0506a5eee921" alt=""><figcaption></figcaption></figure>
