> For the complete documentation index, see [llms.txt](https://shinedezign.gitbook.io/maya/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shinedezign.gitbook.io/maya/overview/trending-products.md).

# Trending products

Products will be displayed starting from the center of the heading text. The heading will be split equally, ensuring the product grid begins at the midpoint of the text.

### Configure the trending products

Select the customize theme option. Click on the dropdown menu at the top to select the **Home page template.**

From the left side menu, select **Trending products.**

Customize the **Trending products** section by utilizing the settings on the right side of the theme editor, as described below:

<table data-header-hidden><thead><tr><th width="281"></th><th></th></tr></thead><tbody><tr><td> Trending products</td><td><strong>Section visibility</strong><br>Select from the options to select the visibility of this section:<br>-Always<br>-Small devices(On selecting this, the section will be visible on mobile devices only.)<br>-Large devices<br><br><strong>Color scheme</strong><br>Select any color scheme defined in the theme settings>Colors>Schemes.<br><br><strong>Section background</strong><br>Choose the background color from solid or gradient. These colors can be managed in the assigned color scheme.<br><br><strong>Section width</strong><br>Choose the section width from following options:<br>- Small<br>- Medium<br>- Large<br>- Fullwidth<br><br><strong>Animation style</strong><br>Choose the animation style from following options:<br>- On scroll<br>- None<br><br><strong>Products</strong><br>Choose the products to display.<br><br><strong>Enable swipe on mobile</strong><br>Select this checkbox to show section swipe on mobile.</td></tr><tr><td>Content</td><td><p><strong>Heading</strong><br>Add heading text. <br><br><strong>Heading size</strong><br>Select the heading size from the following options:<br>- XXX- large<br>- XX- large<br>- X- large<br>- Large<br>- Medium<br>- Small<br>- X-small<br><br><strong>Heading tag</strong><br>Specify heading code types from H1-H6, div, span or p tag for SEO and search engines for crawling purposes.<br><br><strong>Font family</strong><br>Choose the text's font family from the following options:</p><p>- Heading <br>- Body <br>- Accent <br>(<em><strong>Note</strong>: These fonts can be changed in theme settings>typography.)</em><br><br><strong>Style</strong><br>Choose the heading style from the following options:<br>- Embedded heading<br>- Top aligned heading<br><br><em>(<strong>Note</strong>: We recommend using a maximum of 50 characters to use in the Embedded heading style, for better UI.)</em></p></td></tr><tr><td>Card settings</td><td><strong>Image ratio</strong><br>Choose from image's ratio from the following options:<br>- Auto<br>- Square<br>- Landscape<br>- Portrait<br><br><strong>Image fit</strong><br>Choose the images fit from the following options:<br><strong>- Natural-</strong> It contains the image<strong>.</strong><br><strong>- Cropped-</strong> It covers the image.</td></tr><tr><td>Section spacing</td><td><p><strong>Desktop top space</strong></p><p>Adjust the range bar to add spacing at the top of the section for desktop view.  <br> </p><p><strong>Desktop bottom space</strong></p><p>Adjust the range bar to add spacing at the bottom of the section for desktop view. </p><p> </p><p><strong>Mobile top space</strong></p><p>Adjust the range bar to add spacing at the top of the section for mobile view. </p><p> </p><p><strong>Mobile bottom space</strong><br>Adjust the range bar to add spacing at the bottom of the section for mobile view. </p></td></tr></tbody></table>