> For the complete documentation index, see [llms.txt](https://halosoft.gitbook.io/ella-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://halosoft.gitbook.io/ella-documentation/sections/all-sections-in-theme/slideshow.md).

# Slideshow

<figure><img src="/files/ufuSasSknb2g6uOg5cq5" alt=""><figcaption><p>Simple banner</p></figcaption></figure>

<figure><img src="/files/PKvPAGPE0sb5KThFa1sL" alt=""><figcaption><p>Slideshow with Category Block on the left</p></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 "**Slideshow**".

## Section settings

### General

<table><thead><tr><th width="328">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Section width</td><td><p>Choose the maximum width of the section on the Desktop. The options are:</p><p></p><p><mark style="color:orange;"><strong>Default</strong></mark></p><p><mark style="color:orange;"><strong>Width (1170px)</strong></mark></p><p><mark style="color:orange;"><strong>Width (1470px)</strong></mark></p><p><mark style="color:orange;"><strong>Width (1570px)</strong></mark></p><p><mark style="color:orange;"><strong>Width (1770px)</strong></mark></p><p><mark style="color:orange;"><strong>Width (1920px)</strong></mark></p><p><mark style="color:orange;"><strong>Full width (the width of the browser)</strong></mark></p></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>Background color</td><td>Toggle padding for the content.<br><br><em><mark style="color:orange;">Note: Will only show when section has padding or 'Section width' settings other than 'full width' or uses a PNG image with a transparent background.</mark></em></td></tr><tr><td>Background gradient</td><td>Determine the section negative spacing from the top.<br><br><em><mark style="color:orange;">Note: Will only show when section has padding or 'Section width' settings other than 'full width' or uses a PNG image with a transparent background.</mark></em></td></tr><tr><td>Background image</td><td>Select the layout of the block item to be in a Grid or Slider.<br><br><em><mark style="color:orange;">Note: Will only show when section has padding or 'Section width' settings other than 'full width' or uses a PNG image with a transparent background.</mark></em></td></tr></tbody></table>

### Slider layout

<table><thead><tr><th width="328">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Auto-rotate slides</td><td>Toggle the feature to automatically switch between slides.</td></tr><tr><td>Change slides every</td><td>Select the time to automatically change to another slide. The options are:<br><br><mark style="color:orange;"><strong>3/4/5/6/7/8/9/10 seconds</strong></mark><br><br><em><mark style="color:orange;">Note: Only works when using the 'Auto-rotate slides' setting</mark></em></td></tr><tr><td>Transition effect</td><td>Choose effects when transitioning slides. The options are:<br><br><mark style="color:orange;"><strong>Slide</strong></mark><br><mark style="color:orange;"><strong>Fade</strong></mark></td></tr><tr><td>Navigation dots on desktop</td><td>Select the layout for navigation dots on the desktop. The options are:<br><br><mark style="color:orange;"><strong>None</strong></mark><br><mark style="color:orange;"><strong>Show dots with shape</strong></mark><br><mark style="color:orange;"><strong>Show dots with number</strong></mark></td></tr><tr><td>Background - Border color - Background hover color - Border hover color</td><td>Set the background and border color for both the normal and hover states of the navigation dots.</td></tr><tr><td>Position on desktop</td><td>Select the position to display navigation dots on the desktop Left, Center, or Right.</td></tr><tr><td>Dots style</td><td>Select the style for dots. The options are:<br><br><mark style="color:orange;"><strong>Disc</strong></mark><br><mark style="color:orange;"><strong>Line</strong></mark><br><mark style="color:orange;"><strong>Number</strong></mark><br><br><em><mark style="color:orange;">Note: Only applicable when the 'dots position on desktop' setting is set to center.</mark></em></td></tr><tr><td>Bottom spacing</td><td>Determine the spacing of the content from the bottom.</td></tr><tr><td>Dots opacity (80%)</td><td>Toggle the opacity of the dots to 80%.</td></tr><tr><td>Show dot with image</td><td>Select to display images inside dots.<br><br><em><mark style="color:orange;">Note: Only works when the navigation dots on desktop is 'Show dots with shape' and the dots style is 'Disc'.</mark></em></td></tr><tr><td>Dots size</td><td>Determine the size of the dots.<br><br><em><mark style="color:orange;">Note: Only applicable for 'Show dot with image'.</mark></em></td></tr><tr><td>Dots size active</td><td>Determine the size of the active dots.<br><br><em><mark style="color:orange;">Note: Only applicable for 'Show dot with image'.</mark></em></td></tr><tr><td>Dots size on mobile</td><td>Determine the size of the dots on mobile.<br><br><em><mark style="color:orange;">Note: Only applicable for 'Show dot with image'.</mark></em></td></tr><tr><td>Dots size active on mobile</td><td>Determine the size of the active dots on mobile.<br><br><em><mark style="color:orange;">Note: Only applicable for 'Show dot with image'.</mark></em></td></tr><tr><td>Show navigation arrows on desktop</td><td>Toggle the navigation arrows on the desktop.</td></tr><tr><td>Enable navigation arrows customization</td><td>Enable to be able to adjust navigation arrows with the settings below.</td></tr><tr><td>Width</td><td>Determine the width of the arrows.</td></tr><tr><td>Height</td><td>Determine the height of the arrows.</td></tr><tr><td>Icons size</td><td>Determine the icon size of the arrows.</td></tr><tr><td>Icon color - Border color - Background color - Icon hover color - Border hover color - Background hover color</td><td>Set the color, background, and border color for both the normal and hover states of the navigation arrows.</td></tr><tr><td>Horizontal position (unit % or px)</td><td>Determine the horizontal position of the arrow relative.</td></tr><tr><td>Vertical position (unit % or px)</td><td>Determine the vertical position of the arrow relative.</td></tr></tbody></table>

### Video

<table><thead><tr><th width="328">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Video height on desktop</td><td>Determine the video height on the desktop.<br><br><em><mark style="color:orange;">Note: You can adjust the height of the video to fit with the slider image by percentage. Example: 30%, 47.25%, 51%.</mark></em></td></tr><tr><td>Video height on mobile (unit %)</td><td>Determine the video height on mobile (unit %).<br><br><em><mark style="color:orange;">Note: You can adjust the height of the video to fit with the slider image by percentage. Example: 30%, 47.25%, 51%.</mark></em></td></tr><tr><td>Auto-play video</td><td>Toggle so that the video will automatically play when going to the video slide.</td></tr></tbody></table>

### Left categories

<table><thead><tr><th width="328">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Show left categories</td><td>Toggle to show or hide left categories.<br><br><em><mark style="color:orange;">Note: Demo for left categories on</mark></em> <a href="https://new-ella-demo.myshopify.com//?fts=0&#x26;preview_theme_id=123126808666"><em><mark style="color:blue;">Home 06 - SuperMarket</mark></em></a><em><mark style="color:orange;">.</mark></em></td></tr><tr><td>Title</td><td>Enter the title for the left categories</td></tr><tr><td>Title color - Title background color - Text color</td><td>Set the color, background, and border color for the title.</td></tr><tr><td>Category menu</td><td>Select the menu to apply to the left categories.<br><br><em><mark style="color:orange;">Note: Upload images with the same name as the menu handle to show images for each category.</mark></em> <a href="https://halosoft.gitbook.io/ella-documentation/sections/all-sections-in-theme/slideshow#how-to-show-category-block-for-slideshow-like-on-the-supermarket-homepage"><em><mark style="color:blue;">Learn more</mark></em></a><em><mark style="color:orange;">.</mark></em></td></tr></tbody></table>

### Right banner

<table><thead><tr><th width="328">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Show right banner</td><td>Toggle to display banner on the right.</td></tr></tbody></table>

### Lookbook

<table><thead><tr><th width="328">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Popup style</td><td>Select the style for the lookbook popup. The options are:<br><br><mark style="color:orange;"><strong>Small popup</strong></mark><br><mark style="color:orange;"><strong>Large popup with product image</strong></mark></td></tr><tr><td>Enable lookbook popup maximum width</td><td>Enable this setting to adjust the maximum width of the lookbook popup.<br><br><em><mark style="color:orange;">Note: Only works for style 'Large popup with product image'.</mark></em></td></tr><tr><td>Lookbook popup maximum width</td><td>Determine the maximum width of the lookbook popup.</td></tr><tr><td>Pin icon width on desktop</td><td>Determine the pin icon width on the desktop.</td></tr><tr><td>Pin icon width on mobile</td><td>Determine the pin icon width on the mobile.</td></tr><tr><td>Pin icon color - Pin icon shadow color - Pin icon border color</td><td>Set the color, shadow, and border color for the pin icon.</td></tr><tr><td>Show number on pin icon on desktop</td><td>Toggle to show or hide the number of pin icons on the desktop.</td></tr><tr><td>Show number on pin icon on mobile</td><td>Toggle to show or hide the number of pin icons on the mobile.</td></tr><tr><td>Show plus icon on pin icon</td><td><p>Show the pin icon with the plus sign instead of the dot.</p><p></p><p><em><mark style="color:orange;">Note: Only applies when both the 'show number on pin icon on desktop' and 'show number on pin icon on mobile' settings are disabled.</mark></em></p></td></tr><tr><td>Number font size on pin icon on desktop</td><td>Set font size for pin icon text on the desktop.</td></tr><tr><td>Number font size on pin icon on mobile</td><td>Set font size for pin icon text on the mobile.</td></tr><tr><td>Truncate product title line to</td><td>Set maximum number of lines for product title. There are 2 options:<br><br><mark style="color:orange;"><strong>1 line</strong></mark> <br><mark style="color:orange;"><strong>2 lines</strong></mark></td></tr><tr><td>Section top padding / Section bottom padding on Desktop, Tablet, Mobile</td><td>Determine the spacing of the section from its top and bottom sections on Desktop, Tablet and Mobile separately.</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

### Image slide

<table><thead><tr><th width="334">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td><strong>General</strong></td><td></td></tr><tr><td>Image</td><td>Select the image on the desktop.<br><br><em><mark style="color:orange;">Recommended image size: width x height (1880 x 720)px.</mark></em></td></tr><tr><td>Image for mobile</td><td>Select the image on the mobile.<br><br><em><mark style="color:orange;">Recommended image size: width x height (638 x 870)px.</mark></em></td></tr><tr><td>Image for navigation dot</td><td>Select the image for the navigation dot.<br><br><em><mark style="color:orange;">Note: Only for 'dot with image' style.</mark></em></td></tr><tr><td><strong>Content layout</strong></td><td></td></tr><tr><td>Desktop content position</td><td><p>Select a location to display content on the desktop:<br></p><p><mark style="color:orange;"><strong>Left</strong></mark></p><p><mark style="color:orange;"><strong>Center</strong></mark></p><p><mark style="color:orange;"><strong>Right</strong></mark><br><br><em><mark style="color:orange;">Note: Not applicable when the 'make content full width' setting is selected.</mark></em></p></td></tr><tr><td>Customize content position on desktop</td><td>Enable this setting to automatically adjust the horizontal/vertical position of content on desktop.</td></tr><tr><td>Horizontal position (unit % or px)</td><td>Adjust the horizontal position of the content.</td></tr><tr><td>Vertical position (unit % or px)</td><td>Adjust the vertical position of the content.</td></tr><tr><td>Show content below images on mobile</td><td>Select this setting to display content below the image on the mobile.</td></tr><tr><td>Show content border</td><td>Select this setting to display borders for content.</td></tr><tr><td>Vertical padding</td><td>Adjust the distance between the content and the border top.</td></tr><tr><td>Maximum content width</td><td>Adjust the maximum width of the content.</td></tr><tr><td>Content alignment on desktop</td><td>Align the content on desltop to the Left, Right, or Center.</td></tr><tr><td>Content alignment on mobile</td><td>Align the content on mobile to the Left, Right, or Center.</td></tr><tr><td>Make content full width</td><td>Select this setting so that the content can be as wide as the image.</td></tr><tr><td>Content border color - Content background color</td><td>Set the background and border color of the content.</td></tr><tr><td><strong>Testimonial</strong></td><td></td></tr><tr><td>Author's image</td><td>Select 1 image for the author's image.</td></tr><tr><td>Bottom margin</td><td>Adjust the distance of the author's image from the part below.</td></tr><tr><td>Author's name</td><td>Enter text for the author's name.</td></tr><tr><td>Text color</td><td>Select the color for the author's name.</td></tr><tr><td>Font size</td><td>Select the font size for the author's name on the desktop.</td></tr><tr><td>Font size on mobile</td><td>Select the font size for the author's name on the mobile.</td></tr><tr><td>Font weight</td><td>Select the font weight for the author's name.</td></tr><tr><td>Profile job title</td><td>Enter text for the profile job title.</td></tr><tr><td>Text color</td><td>Select the color for the profile job title.</td></tr><tr><td>Font size</td><td>Select the font size for the profile job title on the desktop.</td></tr><tr><td>Font size on mobile</td><td>Select the font size for the profile job title on the mobile.</td></tr><tr><td>Font weight</td><td>Select the font weight for the author's name.</td></tr><tr><td><strong>Desktop content</strong></td><td></td></tr><tr><td>Subheading</td><td>Enter text for the subheading.</td></tr><tr><td>Subheading letter spacing</td><td>Select the letter spacing for the subheading.</td></tr><tr><td>Subheading font size</td><td>Select the font size for the subheading.</td></tr><tr><td>Subheading bottom margin</td><td>Adjust the distance of the subheading from the part below.</td></tr><tr><td>Select subheading font family</td><td>Select the font family for the subheading.</td></tr><tr><td>Subheading font weight</td><td>Select the font weight for the subheading.</td></tr><tr><td>Subheading border</td><td>Toggle to show or hide the border for the subheading.</td></tr><tr><td>Subheading position</td><td><p>Adjust the position of the subheading. There are 2 options:</p><p></p><p><mark style="color:orange;"><strong>Above the title</strong></mark></p><p><mark style="color:orange;"><strong>Below the title</strong></mark></p></td></tr><tr><td>Subheading color</td><td>Select the color for the subheading.</td></tr><tr><td>Heading</td><td>Enter the text for the heading.</td></tr><tr><td>Heading letter spacing</td><td>Enter the letter spacing for the heading.</td></tr><tr><td>Show heading border</td><td>Toggle to show or hide the border for the heading.</td></tr><tr><td>Heading font style</td><td>Enter the font style for the heading.</td></tr><tr><td>Heading font size</td><td>Enter the font size for the heading.</td></tr><tr><td>Heading line height</td><td>Enter the line height for the heading.</td></tr><tr><td>Heading bottom margin</td><td>Adjust the distance of the heading from the part below.</td></tr><tr><td>Heading color</td><td>Select the color for the heading.</td></tr><tr><td>Description</td><td>Enter the text for the description.</td></tr><tr><td>Description font size</td><td>Enter the font size for the description.</td></tr><tr><td>Description bottom margin</td><td>Adjust the distance of the description from the part below.</td></tr><tr><td>Description color</td><td>Enter the color for the description.</td></tr><tr><td><strong>Mobile content</strong></td><td></td></tr><tr><td>Subheading</td><td>Enter text for the subheading.</td></tr><tr><td>Subheading font size</td><td>Select the font size for the subheading.</td></tr><tr><td>Subheading bottom margin</td><td>Adjust the distance of the subheading from the part below.</td></tr><tr><td>Subheading font weight</td><td>Select the font weight for the subheading.</td></tr><tr><td>Subheading border</td><td>Toggle to show or hide the border for the subheading.</td></tr><tr><td>Subheading color</td><td>Select the color for the subheading.</td></tr><tr><td>Heading</td><td>Enter the text for the heading.</td></tr><tr><td>Heading font style</td><td>Enter the font style for the heading.</td></tr><tr><td>Heading font size</td><td>Enter the font size for the heading.</td></tr><tr><td>Heading line height</td><td>Enter the line height for the heading.</td></tr><tr><td>Heading bottom margin</td><td>Adjust the distance of the heading from the part below.</td></tr><tr><td>Heading color</td><td>Select the color for the heading.</td></tr><tr><td>Description</td><td>Enter the text for the description.</td></tr><tr><td>Description font size</td><td>Enter the font size for the description.</td></tr><tr><td>Description bottom margin</td><td>Adjust the distance of the description from the part below.</td></tr><tr><td>Description color</td><td>Enter the color for the description.</td></tr><tr><td><strong>Buttons on content</strong></td><td></td></tr><tr><td>Show arrow icon</td><td>Toggle to show or hide the arrow icon on the button.</td></tr><tr><td>Show button as link</td><td>Toggle to show button as link.</td></tr><tr><td>Show text underline</td><td>Toggle to show or hide the text underline.</td></tr><tr><td>Link font size</td><td>Select the font size for the button as link.<br><br><em><mark style="color:orange;">Note: Applies only when the 'show button as link' setting is enabled and the 'show text underline' setting is disabled.</mark></em></td></tr><tr><td>First button label</td><td>Enter the text for the first button.</td></tr><tr><td>First button link</td><td>Enter the link for the first button.</td></tr><tr><td>First button style</td><td>Select the style for the first button. There are 2 options:<br><br><mark style="color:orange;"><strong>Primary button</strong></mark><br><mark style="color:orange;"><strong>Secondary button</strong></mark><br><mark style="color:orange;"><strong>Tertiary button</strong></mark></td></tr><tr><td>Second button label</td><td>Enter the text for the second button.</td></tr><tr><td>Second button link</td><td>Enter the link for the second button.</td></tr><tr><td>Button width</td><td>Set button width for both buttons.</td></tr><tr><td>Label color - Border color - Background color - Background gradient - Label hover color - Border hover color - Background hover color - Background hover gradient</td><td>Set the color, background, background gradient, and border color for both the normal and hover states of both buttons.</td></tr><tr><td><strong>Lookbook products</strong></td><td></td></tr><tr><td><strong>Product 1 / Product 2 / Product 3</strong></td><td></td></tr><tr><td>Product</td><td>Choose a product.</td></tr><tr><td>Pin icon horizontal position (%)</td><td>Select the horizontal position of the pin icon.</td></tr><tr><td>Pin icon vertical position (%)</td><td>Select the vertical position of the pin icon.</td></tr><tr><td>Lookbook popup position</td><td>Choose the position of the popup when hovering on the pin icon. There are 4 options:<br><br><mark style="color:orange;"><strong>Right of the pin icon</strong></mark><br><mark style="color:orange;"><strong>Left of the pin icon</strong></mark><br><mark style="color:orange;"><strong>Above the pin icon</strong></mark><br><mark style="color:orange;"><strong>Below the pin icon</strong></mark></td></tr></tbody></table>

### Banner

<table><thead><tr><th width="334">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Image</td><td>Choose the banner image.<br><br><em><mark style="color:orange;">Recommended image: 250 x 250px</mark></em></td></tr><tr><td>Link</td><td>Enter the link for the banner.</td></tr></tbody></table>

### Video slide

<table><thead><tr><th width="334">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Video type</td><td>Choose the video type. There are 2 options:<br><br><mark style="color:orange;"><strong>Youtube</strong></mark><br><mark style="color:orange;"><strong>MP4</strong></mark></td></tr><tr><td><strong>Youtube</strong></td><td></td></tr><tr><td>Video ID</td><td>Enter the YouTube video ID.<br><br><em><mark style="color:orange;">Note:</mark></em> <a href="https://www.youtube.com/watch?v=liJVSwOiiwg"><em><mark style="color:blue;">Find your YouTube video ID</mark></em></a><em><mark style="color:orange;">.</mark></em></td></tr><tr><td>Video ID for mobile</td><td>Enter the ID of the YouTube video on mobile if you want another video on mobile.<br><br><em><mark style="color:orange;">Note:</mark></em> <a href="https://www.youtube.com/watch?v=liJVSwOiiwg"><em><mark style="color:blue;">Find your YouTube video ID</mark></em></a><em><mark style="color:orange;">.</mark></em></td></tr><tr><td><strong>MP4</strong></td><td></td></tr><tr><td>Video link</td><td>Enter the Mp4 video link.</td></tr><tr><td>Video link for mobile</td><td>Enter the Mp4 video link on mobile if you want another video on mobile.</td></tr><tr><td><strong>Content layout</strong></td><td></td></tr><tr><td>Desktop content position</td><td><p>Select a location to display content on the desktop:<br></p><p><mark style="color:orange;"><strong>Left</strong></mark></p><p><mark style="color:orange;"><strong>Center</strong></mark></p><p><mark style="color:orange;"><strong>Right</strong></mark><br><br><em><mark style="color:orange;">Note: Not applicable when the 'make content full width' setting is selected.</mark></em></p></td></tr><tr><td>Customize content position on desktop</td><td>Enable this setting to automatically adjust the horizontal/vertical position of content on desktop.</td></tr><tr><td>Horizontal position (unit % or px)</td><td>Adjust the horizontal position of the content.</td></tr><tr><td>Vertical position (unit % or px)</td><td>Adjust the vertical position of the content.</td></tr><tr><td>Alignment</td><td>Align the content to the Left, Right, or Center.</td></tr><tr><td>Vertical padding</td><td>Adjust the distance between the content and the border top.</td></tr><tr><td>Make content full width</td><td>Select this setting so that the content can be as wide as the image.</td></tr><tr><td>Show content border</td><td>Select this setting to display borders for content.</td></tr><tr><td>Content border color - Content background color</td><td>Set the background and border color of the content.</td></tr><tr><td><strong>Content</strong></td><td></td></tr><tr><td>Subheading</td><td>Enter text for the subheading.</td></tr><tr><td>Subheading letter spacing</td><td>Select the letter spacing for the subheading.</td></tr><tr><td>Subheading font size</td><td>Select the font size for the subheading.</td></tr><tr><td>Subheading bottom margin</td><td>Adjust the distance of the subheading from the part below.</td></tr><tr><td>Subheading font weight</td><td>Select the font weight for the subheading.</td></tr><tr><td>Subheading border</td><td>Toggle to show or hide the border for the subheading.</td></tr><tr><td>Subheading position</td><td><p>Adjust the position of the subheading. There are 2 options:</p><p></p><p><mark style="color:orange;"><strong>Above the title</strong></mark></p><p><mark style="color:orange;"><strong>Below the title</strong></mark></p></td></tr><tr><td>Subheading color</td><td>Select the color for the subheading.</td></tr><tr><td>Subheading color on mobile</td><td>Select the color for the subheading on the mobile.</td></tr><tr><td>Heading</td><td>Enter the text for the heading.</td></tr><tr><td>Heading letter spacing</td><td>Enter the letter spacing for the heading.</td></tr><tr><td>Heading font size</td><td>Enter the font size for the heading.</td></tr><tr><td>Heading line height</td><td>Enter the line height for the heading.</td></tr><tr><td>Heading bottom margin</td><td>Adjust the distance of the heading from the part below.</td></tr><tr><td>Heading color</td><td>Select the color for the heading.</td></tr><tr><td>Heading color on mobile</td><td>Select the color for the heading on the mobile.</td></tr><tr><td>Description</td><td>Enter the text for the description.</td></tr><tr><td>Description bottom margin</td><td>Adjust the distance of the description from the part below.</td></tr><tr><td>Description font size</td><td>Enter the font size for the description.</td></tr><tr><td>Description color</td><td>Enter the color for the description.</td></tr><tr><td>Description color on mobile</td><td>Enter the color for the description on mobile.</td></tr><tr><td>Button label</td><td>Enter the text for the button.</td></tr><tr><td>Button link</td><td>Enter the link for the button.</td></tr><tr><td>Show button as link</td><td>Toggle to show button as link.</td></tr><tr><td>Show text underline</td><td>Toggle to show or hide the text underline.</td></tr><tr><td>Link font size</td><td>Select the font size for the button as link.<br><br><em><mark style="color:orange;">Note: Applies only when the 'show button as link' setting is enabled and the 'show text underline' setting is disabled.</mark></em></td></tr><tr><td>Button width</td><td>Set button width for the button.</td></tr><tr><td>Button label color - Button border color - Button background color - Button label hover color - Button border hover color - Button background hover color</td><td>Set the color, background, and border color for both the normal and hover states of button.</td></tr></tbody></table>

## How to show Category Block for Slideshow like on the Supermarket Homepage?

* In Theme Editor of **Slideshow** -> Scroll down to "**BLOCK CATEGORIES**" -> **Select Menu Category** to show categories for this block.

{% hint style="warning" %}
You need to create a menu in Navigation first
{% endhint %}

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

### **To show icons for categories, please follow below instruction to upload icons:**

* Prepare your Icon image with the same name as the menu name (please use PNG image format).&#x20;

{% hint style="warning" %}
**Rules:** Lower cap and use a hyphen "-" to replace white space if your color image name has the white space.\
**For example:** with the menu name "Pellentes Habitanto", the image name will be **pellentes-habitanto.png**

Recommended size for icon image: 24 x 24px
{% endhint %}

* Go to **Content** --> **Files**, upload images here:

<figure><img src="/files/4vjpfalipRonLCPLma6j" alt=""><figcaption></figcaption></figure>

{% embed url="<https://www.youtube.com/watch?v=cC-KOpVCaN0>" %}