# Featured Categories

<figure><img src="/files/rxM1cLo77tUWohSFEbrc" alt=""><figcaption></figcaption></figure>

To add this section, please follow below steps:

1. From your Shopify admin, go to **Online Store** **->** **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Click **Add section** and choose "**Featured collections**".

## Section settings

### General

<table><thead><tr><th width="319">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Section Width</td><td>Select the layout width of the whole section. The options are: <br><br><mark style="color:orange;"><strong>Default (same as the body width)</strong></mark><br><mark style="color:orange;"><strong>Width (1170px)</strong></mark><br><mark style="color:orange;"><strong>Width (1770px)</strong></mark><br><mark style="color:orange;"><strong>Full width (100% of the viewport width).</strong></mark></td></tr><tr><td>Padding for 'full width' option on desktop</td><td>Determine the left and right spacing of the full width layout.</td></tr><tr><td>Desktop columns count</td><td>Select the column count for the section to render. On Mobile viewport, the column count is 1.</td></tr><tr><td>Background color</td><td>Apply the color for the section background.</td></tr><tr><td>Background gradient</td><td>Apply the gradient color for the section background.</td></tr><tr><td>Background image</td><td>Upload an image as the section background.</td></tr><tr><td><strong>Section header</strong></td><td></td></tr><tr><td>Title</td><td>Enter the title for the section.</td></tr><tr><td>Show title border</td><td>Toggle the partial line through underneath the title.</td></tr><tr><td>Title color</td><td>Apply color on the title of the section.</td></tr><tr><td>Title font size</td><td>Determine the font size of the title.</td></tr><tr><td>Title font size on mobile</td><td>Determine the font size of the title on mobile device.</td></tr><tr><td>Button label</td><td>Enter the text for button below the section title.</td></tr><tr><td>Button link</td><td>Specify the link for the button to redirect to on clicked.</td></tr><tr><td>Button label color</td><td>Apply color on the button text.</td></tr><tr><td>Button font size</td><td>The font size of the button text.</td></tr><tr><td>Button icon</td><td><p>Enter the svg icon code for the button icon in front of its text.</p><p><br><em><mark style="color:orange;">Note: Go to this link</mark></em> <a href="https://fontawesome.com/v5/search"><em><mark style="color:blue;">find your icon</mark></em></a><em><mark style="color:orange;">. Find the icon you want, then copy the SVG code and paste it here.</mark></em></p></td></tr><tr><td>Button icon color</td><td>Apply color on the svg icon of the button.</td></tr><tr><td>Alignment</td><td>Select the text alignment of the title and button relative to the section. The options are: Left, Right and Center.</td></tr><tr><td>Mobile layout</td><td></td></tr><tr><td>Enable swipe on mobile</td><td>Toggle the slideshow mode for the columns instead of list layout on mobile device</td></tr></tbody></table>

### Section top padding

<table><thead><tr><th width="334">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Desktop</td><td>Determines the height of the top inner space of the section on the desktop device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Tablet</td><td>Determines the height of the top inner space of the section on the tablet device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Mobile</td><td>Determines the height of the top inner space of the section on the mobile device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr></tbody></table>

### Section bottom padding

<table><thead><tr><th width="334">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Desktop</td><td>Determines the height of the bottom inner space of the section on the desktop device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Tablet</td><td>Determines the height of the bottom inner space of the section on the tablet device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Mobile</td><td>Determines the height of the bottom inner space of the section on the mobile device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr></tbody></table>

## Block settings

### \[BLOCK] Category

<table><thead><tr><th width="322">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Menu</td><td>Select a menu to show on the block.<br><br><em><mark style="color:orange;">Note: Select the menu to display a list of submenus when hovering over an image.</mark></em></td></tr><tr><td>Image</td><td>Upload/Select an image as a background for the block.</td></tr><tr><td>Alignment</td><td>Select the position of the menu text to the Left, Right or Center of the block width.</td></tr><tr><td>Title</td><td>Enter the title of the block.</td></tr><tr><td>Title color</td><td>Apply color on the block title.</td></tr><tr><td>Title font size</td><td>Determine the font size of the block title.</td></tr><tr><td>Link color</td><td>Apply color on the menu item text.</td></tr><tr><td>Link hover color</td><td>Apply color on the menu item text on hovered.</td></tr><tr><td>Link font size</td><td>Determine the font size of the menu item text.</td></tr><tr><td>Button icon</td><td>Enter the svg icon for the button at the block bottom.<br><br><em><mark style="color:orange;">Note: Go to this link</mark></em> <a href="https://fontawesome.com/v5/search"><em><mark style="color:blue;">find your icon</mark></em></a><em><mark style="color:orange;">. Find the icon you want, then copy the SVG code and paste it here.</mark></em></td></tr><tr><td>Button label</td><td>Enter the text for the button at the block bottom.</td></tr><tr><td>Button link</td><td>Specify the URL for the button to navigate to.</td></tr><tr><td>Button label color - Button border color - Button background color - Button background gradient - Button label hover color - Button border hover color - Button background hover color - Button background hover gradient</td><td>Set the color for the text, border, and background of the button for both normal and hovered/clicked states.</td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://halosoft.gitbook.io/ella-documentation/sections/all-sections-in-theme/featured-categories.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.