# 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>" %}


---

# 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/slideshow.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.