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

# All Sections

The All Sections library gives you access to professionally designed Shopify sections that can be added directly to your store without coding.

Each section is fully customizable, mobile responsive, and optimized to help you create modern, high-converting storefronts using the Shopify Theme Editor.

You can use sections to build:

* Homepages
* Product pages
* Collection layouts
* Promotional banners
* Landing pages
* Custom content areas

All sections work with any Shopify theme and are designed for easy drag-and-drop customization.

## Sections Library Overview

Our app includes a wide variety of professionally designed Shopify sections to help you build a modern, high-converting storefront without coding.

Available section categories include:

* Image Sections
* Collection Sections
* Banner Sections
* Feature Sections
* Testimonial Sections
* Video Sections
* Hotspot Sections
* Comparison Sections
* Slider Sections
* Timer Sections
* Hero Sections
* Text Sections
* Product Sections
* Other Sections

Each section is fully customizable, mobile responsive, and works seamlessly with any Shopify theme through the Shopify Theme Editor.

Below, you’ll find a detailed introduction and setup guide for each section category.

## <mark style="color:$primary;">Image Sections</mark>

Image Sections help you create visually engaging layouts using images, text, buttons, and custom content blocks. These sections are ideal for product showcases, promotions, galleries, collection highlights, and brand storytelling.

With responsive layouts and flexible customization options, you can easily build modern storefront designs directly from the Shopify Theme Editor.

Perfect for:

* Product showcases
* Promotional banners
* Image galleries
* Featured content
* Collection highlights
* Brand storytelling

## How to Add an Image Section

#### Step 1: Browse Image Sections

* Go to **All Sections**
* Open the **Image** category
* Browse available sections

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

#### Step 2: Preview the Section

Click any section card to:

* View the preview
* Check section details
* Explore customization options

#### Step 3: Get the Section

Click on “**Get Free Section**” to save the section to your theme.

The section will automatically appear under “**My Sections**”.

Once added, it will be applied to your theme automatically, and you can also view it anytime in the “**My Sections**” area.

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

<figure><img src="/files/38dTXIkVegpyKwCxtwGc" alt=""><figcaption></figcaption></figure>

#### Step 4: Add to Theme

Inside **My Sections**:

* Click **Add to Theme**
* Select the Shopify theme where you want to install the section

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

**Step 5: Customize the Section from Shopify Theme Editor**

After clicking **Add to Theme**, the section will be added to your selected Shopify theme.

To customize the section:

* Go to **Online Store → Themes**
* Open the theme where you added the section
* Click **Customize** to open the Shopify Theme Editor

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

Inside the Theme Editor:

* Open the page template where you want to display the section
* Click **Add Section**
* Open the **Sections** category
* Find your added SKY section

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

For example:

* If you added **SKY Circular Menu**, it will appear in the Apps section list

Click the section to add it to your page.

<figure><img src="/files/5MTH19od2Rx21fvIEtRI" alt=""><figcaption></figcaption></figure>

## Section Customization Options

After adding the section, all customization settings will appear on the right side of the Theme Editor.

Depending on the section, you can customize:

* Section visibility for desktop and mobile
* Headings and text content
* Font styles, sizes, and alignment
* Slider and navigation settings
* Arrow and button styles
* Image sizing and layouts
* Colors, borders, and hover effects
* Section spacing and padding
* Full-width and content width layouts
* Border styles and roundness
* Custom CSS for advanced styling

All settings can be adjusted directly from the Shopify Theme Editor without coding.

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

Once you configure the section settings on your end, the section will appear on the storefront frontend in line with your selected design and customization preferences.

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

## <mark style="color:$primary;">Collection Sections</mark>

Collection Sections help you showcase product collections in organized and visually appealing layouts to improve product discovery and navigation.

Perfect for:

* Featured collections
* Best sellers
* New arrivals
* Seasonal products
* Product categories

### How to Add a Collection Section

#### Step 1: Open Collection Sections

* Go to **All Sections**
* Open the **Collection** category
* Browse available collection sections

<figure><img src="/files/9OLE9toiPLX2IM6PF1ii" alt=""><figcaption></figcaption></figure>

#### Step 2: Preview the Section

Click on any collection section to:

* View the section preview
* Check available layouts
* Explore customization options

#### Step 3: Get the Section

Click on “**Get Free Section**” to save the section to your theme.

The section will automatically appear under “**My Sections**”.

Once added, it will be applied to your theme automatically, and you can also view it anytime in the “**My Sections**” area.

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

<figure><img src="/files/9U9Dttx6tdfZdmn8HYnO" alt=""><figcaption></figcaption></figure>

#### Step 4: Add the Section to Your Theme

Inside **My Sections**:

* Click **Add to Theme**
* Select the Shopify theme where you want to install the section

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

#### Step 5: Open Shopify Theme Editor

* Go to **Online Store → Themes**
* Open the theme where you added the section
* Click **Edit theme**

<figure><img src="/files/8151y1TWlmzJivgLqjZW" alt=""><figcaption></figcaption></figure>

Inside the Theme Editor:

* Open the page template where you want to display the section
* Click **Add Section**
* Open the **Sections** category
* Select your SKY collection section

The section will now appear on your page.

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

## Collection Section Customization

Depending on the section, you can customize:

* Carousel scroll speed for desktop and mobile
* Scrolling direction and hover pause effects
* Card gaps and staggered layouts
* Card width and height for desktop and mobile
* Border radius and border thickness
* Card background, text, and border colors
* Image sizing and image fit options
* Custom fonts, text sizes, and line height
* Section width and layout styles
* Solid or gradient backgrounds
* Section borders and roundness
* Section margins and padding
* Mobile responsiveness
* Custom CSS styling

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

Once you configure the section settings from your side, the collection section will appear on the storefront according to your selected design and customization preferences.

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

## <mark style="color:$primary;">Banner Sections</mark>

Banner Sections help you create promotional banners and marketing sections across your storefront.

Perfect for:

* Sales campaigns
* Discount promotions
* Brand announcements
* Landing pages
* Marketing banners

### How to Add a Banner Section

#### Step 1: Open Banner Sections

* Go to **All Sections**
* Open the **Banner** category
* Browse available banner sections

<figure><img src="/files/7xWzmaAdrb4i8MXcIDuE" alt=""><figcaption></figcaption></figure>

#### Step 2: Preview the Section

Click on any banner section to:

* View the live preview
* Check design layouts
* Explore customization settings

#### Step 3: Get the Section

Click on “**Get Free Section**” to save the section to your theme.

The section will automatically appear under “**My Sections**”.

Once added, it will be applied to your theme automatically, and you can also view it anytime in the “**My Sections**” area.

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

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

#### Step 4: Add the Section to Your Theme

Inside **My Sections**:

* Click **Add to Theme**
* Select your Shopify theme

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

#### Step 5: Open Shopify Theme Editor

* Go to **Online Store → Themes**
* Open your selected theme
* Click **Edit theme**

<figure><img src="/files/6CpBMcZUgHu5lNeSiAos" alt=""><figcaption></figcaption></figure>

Inside the Theme Editor:

* Click **Add Section**
* Open the **Sections** category
* Select your SKY banner section

The section will now appear inside your storefront layout.

## Banner Section Customization

Depending on the section, you can customize:

* Content width, alignment, and positioning
* Desktop and mobile layout settings
* Spacing and gap controls
* Guarantee icons and feature text styling
* Font sizes, typography, and line height
* Image spacing, aspect ratio, and image fit
* Image borders and roundness
* Background colors and gradient styles
* Section borders and roundness
* Section margins and padding
* Page width and layout options
* Lazy load settings for image optimization
* Mobile responsiveness
* Custom CSS styling

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

Once you configure the section settings from your side, the banner section will appear on the storefront according to your selected design and customization preferences.

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

## <mark style="color:$primary;">Feature Sections</mark>

Feature Sections help highlight your store’s services, benefits, and unique selling points in a clean and professional layout.

Perfect for:

* Free shipping
* Secure payments
* Store guarantees
* Customer support
* Premium quality highlights

### How to Add a Feature Section

#### Step 1: Open Feature Sections

* Go to **All Sections**
* Open the **Feature** category
* Browse available feature sections

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

#### Step 2: Preview the Section

Click on any feature section to:

* View the section preview
* Check layout styles
* Explore customization options

#### Step 3: Get the Section

Click on “**Get Free Section**” to save the section to your theme.

The section will automatically appear under “**My Sections**”.

Once added, it will be applied to your theme automatically, and you can also view it anytime in the “**My Sections**” area.

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

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

#### Step 4: Add the Section to Your Theme

Inside **My Sections**:

* Click **Add to Theme**
* Select your Shopify theme

<figure><img src="/files/7ZCt0cyYSENHCgm0Hi9n" alt=""><figcaption></figcaption></figure>

#### Step 5: Open Shopify Theme Editor

* Go to **Online Store → Themes**
* Open your selected theme
* Click **Customize**

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

Inside the Theme Editor:

* Click **Add Section**
* Open the **Sections** category
* Select your SKY feature section

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

## Feature Section Customization

Depending on the section, you can customize:

* Features per row for desktop and mobile
* Feature card gaps and spacing
* Horizontal and vertical padding
* Card roundness, borders, and shadows
* Heading fonts, sizes, and spacing
* Feature text typography and styling
* Icon size and icon styling
* Background, border, and shadow colors
* Heading, text, and icon colors
* Section background and gradient colors
* Section margins and padding
* Full-width and content width layouts
* Lazy load settings for image optimization
* Mobile responsiveness
* Custom CSS styling

Once you configure the section settings from your side, the feature section will appear on the storefront according to your selected design and customization preferences.

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

## <mark style="color:$primary;">Testimonial Sections</mark>

Testimonial Sections help build customer trust using reviews and customer feedback.

Perfect for:

* Customer testimonials
* Brand credibility
* Social proof
* Review showcases

### How to Add a Testimonial Section

#### Step 1: Open Testimonial Sections

* Go to **All Sections**
* Open the **Testimonial** category
* Browse available testimonial sections

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

#### Step 2: Preview the Section

Click any testimonial section to:

* View the preview
* Check layout designs
* Explore customization options

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

#### **Step 3: Get the Section**

Click on “**Get Free Section**” to save the section to your theme.

The section will automatically appear under “**My Sections**”.

Once added, it will be applied to your theme automatically, and you can also view it anytime in the “**My Sections**” area.

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

#### Step 4: Add the Section to Your Theme

Inside **My Sections**:

* Click **Add to Theme**
* Select your Shopify theme

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

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

#### Step 5: Open Shopify Theme Editor

* Go to **Online Store → Themes**
* Open your selected theme
* Click **Edit theme**

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

Inside the Theme Editor:

* Click **Add Section**
* Open the **Sections** category
* Select your SKY testimonial section

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

## Testimonial Section Customization

Depending on the section, you can customize:

* Heading text, alignment, fonts, and sizes
* Scrolling speed and scrolling direction
* Testimonial row spacing and container gaps
* Testimonial card width, padding, and spacing
* Card roundness, borders, and shadow effects
* Customer image size and roundness
* Number badge fonts and styling
* Testimonial text typography and line height
* Text, background, border, and shadow colors
* Heading gradients and section background styles
* Section margins and padding
* Full-width and content width layouts
* Mobile responsiveness
* Lazy load settings for image optimization
* Custom CSS styling

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

Once you configure the section settings from your side, the testimonial section will appear on the storefront according to your selected design and customization preferences.

<figure><img src="/files/266nfKAeTnamyz6TZo2O" alt=""><figcaption></figcaption></figure>

## <mark style="color:$primary;">Video Sections</mark>

Video Sections help increase engagement by adding videos to your storefront.

Perfect for:

* Product demos
* Tutorials
* Brand introductions
* Promotional videos

### How to Add a Video Section

#### Step 1: Open Video Sections

* Go to **All Sections**
* Open the **Video** category
* Browse available video sections

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

#### Step 2: Preview the Section

Click any video section to:

* View the section preview
* Explore layout designs
* Check customization settings

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

#### Step 3: Get the Section

Click on “**Get Free Section**” to save the section to your theme.

The section will automatically appear under “**My Sections**”.

Once added, it will be applied to your theme automatically, and you can also view it anytime in the “**My Sections**” area.

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

#### Step 4: Add the Section to Your Theme

Inside **My Sections** :

* Click **Add to Theme**
* Select your Shopify theme

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

#### Step 5: Open Shopify Theme Editor

* Go to **Online Store → Themes**
* Open your selected theme
* Click **Edit theme**

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

Inside the Theme Editor :

* Click **Add Section**
* Open the **Sections** category
* Select your SKY video section

<figure><img src="/files/6gObVWtkxCJZVsZdBh7A" alt=""><figcaption></figcaption></figure>

## Video Section Customization

Depending on the section, you can customize:

* Font styles and theme font overrides
* Text sizes, colors, and typography settings
* Section visibility and device display settings
* Background colors and gradient styles
* Section and container padding controls
* Container width, borders, roundness, and shadows
* Hero content width and alignment
* Video cover overlays and opacity
* Text shadows and content positioning
* Button styles, colors, padding, and borders
* Headline, content text, and call-to-action buttons
* Video uploads for desktop and mobile
* Video autoplay, looping, mute, and controls
* Animation settings
* Mobile responsiveness
* Custom CSS styling

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

Once you configure the section settings from your side, the video section will appear on the storefront according to your selected design and customization preferences.

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

## <mark style="color:$primary;">Hotspot Sections</mark>

Hotspot Sections allow you to create interactive images with clickable product points.

Perfect for:

* Lookbooks
* Product tagging
* Interactive shopping experiences

### How to Add a Hotspot Section

#### Step 1: Open Hotspot Sections

* Go to **All Sections**
* Open the **Hotspot** category
* Browse available hotspot sections

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

#### Step 2: Preview the Section

Click any hotspot section to:

* View the section preview
* Explore hotspot layouts
* Check customization settings

#### Step 3: Get the Section

Click on “**Get Free Section**” to save the section to your theme.

The section will automatically appear under “**My Sections**”.

Once added, it will be applied to your theme automatically, and you can also view it anytime in the “**My Sections**” area.

<figure><img src="/files/5lKhKBNJnGGaiKeC3zoq" alt=""><figcaption></figcaption></figure>

#### Step 4: Add the Section to Your Theme

Inside **My Sections**:

* Click **Add to Theme**
* Select your Shopify theme

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

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

#### Step 5: Open Shopify Theme Editor

* Go to **Online Store → Themes**
* Open your selected theme
* Click **Customize**

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

Inside the Theme Editor:

* Click **Add Section**
* Open the **Sections** category
* Select your SKY hotspot section

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

## Hotspot Section Customization

Depending on the section, you can customize:

* Heading text, fonts, alignment, and sizes
* Layout gaps and spacing for desktop and mobile
* Hotspot content alignment and positioning
* Number styling, roundness, and typography
* Title fonts, spacing, padding, and roundness
* Text styling, line height, and margins
* Image uploads, aspect ratios, image fit, and borders
* Hotspot pointer styling and borders
* Hotspot number, title, and text colors
* Section background, borders, and gradient colors
* Section padding and margin spacing
* Full-width and content width layouts
* Mobile responsiveness
* Lazy load settings for image optimization
* Custom CSS styling

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

Once you configure the section settings from your side, the hotspot section will appear on the storefront according to your selected design and customization preferences.

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

## <mark style="color:$primary;">Comparison Sections</mark>

Comparison Sections help display before-and-after images or visually compare products.

Perfect for:

* Product comparisons
* Before & after showcases
* Feature highlights

### How to Add a Comparison Section

#### Step 1: Open Comparison Sections

* Go to **All Sections**
* Open the **Comparison** category
* Browse available comparison sections

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

#### Step 2: Preview the Section

Click any comparison section to:

* View the section preview
* Explore comparison layouts
* Check customization settings

#### Step 3: Get the Section

Click on “**Get Free Section**” to save the section to your theme.

The section will automatically appear under “**My Sections**”.

Once added, it will be applied to your theme automatically, and you can also view it anytime in the “**My Sections**” area.

<figure><img src="/files/8kZdL7w6ZM5C4sINXMAu" alt=""><figcaption></figcaption></figure>

#### Step 4: Add the Section to Your Theme

Inside **My Sections**:

* Click **Add to Theme**
* Select your Shopify theme

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

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

#### Step 5: Open Shopify Theme Editor

* Go to **Online Store → Themes**
* Open your selected theme
* Click **Customize**

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

Inside the Theme Editor:

* Click **Add Section**
* Open the **Sections** category
* Select your SKY Before and After section

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

## Comparison Section Customization

Depending on the section, you can customize:

* Section background colors and gradient styles
* Section padding and margin spacing
* Desktop and mobile layout spacing
* Section width and content alignment
* Mobile responsiveness
* Custom CSS styling

<figure><img src="/files/24blETVvweRz4K2iJrMq" alt=""><figcaption></figcaption></figure>

Once you configure the section settings from your side, the comparison section will appear on the storefront according to your selected design and customization preferences.

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

## <mark style="color:$primary;">Slider Sections</mark>

Slider Sections help you display products, banners, collections, testimonials, and promotional content in interactive sliding layouts.

Perfect for:

* Featured products
* Promotional banners
* Collection sliders
* Customer testimonials
* Dynamic storefront sections

## How to Add a Slider Section

### Step 1: Open Slider Sections

* Go to **All Sections**
* Open the **Slider** category
* Browse available slider sections

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

### Step 2: Preview the Section

Click any slider section to:

* View the section preview
* Explore slider layouts
* Check customization settings

### Step 3: Get the Section

Click on “**Get Free Section**” to save the section to your theme.

The section will automatically appear under “**My Sections**”.

Once added, it will be applied to your theme automatically, and you can also view it anytime in the “**My Sections**” area.

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

### Step 4: Add the Section to Your Theme

Inside **My Sections**:

* Click **Add to Theme**
* Select your Shopify theme

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

### Step 5: Open Shopify Theme Editor

* Go to **Online Store → Themes**
* Open your selected theme
* Click **Customize**

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

Inside the Theme Editor:

* Click **Add Section**
* Open the **Apps** category
* Select your SKY Video Grid

The section will now appear on your storefront.

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

## Slider Section Customization

Depending on the section, you can customize:

* Content alignment for desktop and mobile
* Videos per view and slider layouts
* Gap between slides and slider spacing
* Slider margin settings for desktop and mobile
* Video autoplay settings
* Slide borders, roundness, and aspect ratios
* Arrow navigation visibility and styling
* Arrow size, icon size, colors, and hover effects
* Play button size, colors, and styling
* Slide information, typography, and alignment
* Background colors, gradients, and borders
* Section margins and padding
* Section width and custom width layouts
* Mobile responsiveness
* Custom CSS styling

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

Once you configure the section settings from your side, the slider section will appear on the storefront according to your selected design and customization preferences.

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

## <mark style="color:$primary;">Timer Sections</mark>

Timer Sections help create urgency and improve conversions using countdown timers and promotional offers.

Perfect for:

* Flash sales
* Limited-time offers
* Product launches
* Seasonal promotions

## How to Add a Timer Section

### Step 1: Open Timer Sections

* Go to **All Sections**
* Open the **Timer** category
* Browse available timer sections

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

### Step 2: Preview the Section

Click any timer section to:

* View the section preview
* Explore timer layouts
* Check customization settings

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

### Step 3: Get the Section

Click on “**Get Free Section**” to save the section to your theme.

The section will automatically appear under “**My Sections**”.

Once added, it will be applied to your theme automatically, and you can also view it anytime in the “**My Sections**” area.

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

### Step 4: Add the Section to Your Theme

Inside **My Sections**:

* Click **Add to Theme**
* Select your Shopify theme

<figure><img src="/files/7t73u1o3PXx2o6T9nvMU" alt=""><figcaption></figcaption></figure>

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

### Step 5: Open Shopify Theme Editor

* Go to **Online Store → Themes**
* Open your selected theme
* Click **Customize**

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

Inside the Theme Editor:

* Click **Add Section**
* Open the **Apps** category
* Select your SKY timer section

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

## Timer Section Customization

Depending on the section, you can customize:

* Desktop and mobile background images
* Image fit, height, overlays, and background colors
* Countdown end date and timer settings
* Timer labels, fonts, colors, and sizes
* Heading and text content styling
* Button text, links, colors, and hover effects
* Typography settings for headings, text, and buttons
* Layout width, padding, and border radius
* Completion message and timer visibility settings
* Mobile responsiveness
* Custom CSS styling

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

Once you configure the section settings from your side, the timer section will appear on the storefront according to your selected design and customization preferences.

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

## <mark style="color:$primary;">Hero Sections</mark>

Hero Sections help create impactful first impressions using large banners, promotional content, and call-to-action layouts.

Perfect for:

* Homepage banners
* Promotional campaigns
* Featured products
* Brand storytelling

## How to Add a Hero Section

### Step 1: Open Hero Sections

* Go to **All Sections**
* Open the **Hero** category
* Browse available hero sections

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

### Step 2: Preview the Section

Click any hero section to:

* View the section preview
* Explore hero layouts
* Check customization settings

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

### Step 3: Get the Section

Click on “**Get Free Section**” to save the section to your theme.

The section will automatically appear under “**My Sections**”.

Once added, it will be applied to your theme automatically, and you can also view it anytime in the “**My Sections**” area.

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

### Step 4: Add the Section to Your Theme

Inside **My Sections**:

* Click **Add to Theme**
* Select your Shopify theme

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

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

### Step 5: Open Shopify Theme Editor

* Go to **Online Store → Themes**
* Open your selected theme
* Click **Customize**

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

Inside the Theme Editor:

* Click **Add Section**
* Open the **Apps** category
* Select your SKY hero section

The section will now appear on your storefront.

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

## Hero Section Customization

Depending on the section, you can customize:

* Desktop and mobile parallax effects
* Banner height and fixed height settings
* Desktop and mobile banner images
* Image fit and overlay opacity
* Content width and positioning
* Horizontal and vertical content alignment
* Content padding for desktop and mobile
* Overlay, background, border, and gradient colors
* Section margins and padding
* Full-width and content width layouts
* Lazy load settings for image optimization
* Mobile responsiveness
* Custom CSS styling

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

Once you configure the section settings from your side, the hero section will appear on the storefront according to your selected design and customization preferences.

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

## <mark style="color:$primary;">Text Sections</mark>

Text Sections help you add customizable text content and informational layouts across your storefront.

Perfect for:

* Brand storytelling
* Informational content
* Promotional messaging
* Store details

## How to Add a Text Section

### Step 1: Open Text Sections

* Go to **All Sections**
* Open the **Text** category
* Browse available text sections

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

### Step 2: Preview the Section

Click any text section to:

* View the section preview
* Explore text layouts
* Check customization settings

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

### Step 3: Get the Section

Click on “**Get Free Section**” to save the section to your theme.

The section will automatically appear under “**My Sections**”.

Once added, it will be applied to your theme automatically, and you can also view it anytime in the “**My Sections**” area.

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

### Step 4: Add the Section to Your Theme

Inside **My Sections**:

* Click **Add to Theme**
* Select your Shopify theme

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

### Step 5: Open Shopify Theme Editor

* Go to **Online Store → Themes**
* Open your selected theme
* Click **Customize**

<figure><img src="/files/5GA2lmYdhsjorTP6UGGB" alt=""><figcaption></figcaption></figure>

Inside the Theme Editor:

* Click **Add Section**
* Open the **Sections** category
* Select your SKY text block

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

## Text Section Customization

Depending on the section, you can customize:

* Section background colors
* Section padding and spacing
* Section width and layout settings
* Mobile responsiveness
* Custom CSS styling

<figure><img src="/files/9NU0ctWaARLadhFmyXLq" alt=""><figcaption></figcaption></figure>

Once you configure the section settings from your side, the text section will appear on the storefront according to your selected design and customization preferences.

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

## <mark style="color:$primary;">Product Sections</mark>

Product Sections help you showcase products using advanced layouts and interactive product displays.

Perfect for:

* Featured products
* Product recommendations
* Best sellers
* Promotional products

## How to Add a Product Section

### Step 1: Open Product Sections

* Go to **All Sections**
* Open the **Product** category
* Browse available product sections

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

### Step 2: Preview the Section

Click any product section to:

* View the section preview
* Explore product layouts
* Check customization settings

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

### Step 3: Get the Section

Click on “**Get Free Section**” to save the section to your theme.

The section will automatically appear under “**My Sections**”.

Once added, it will be applied to your theme automatically, and you can also view it anytime in the “**My Sections**” area.

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

### Step 4: Add the Section to Your Theme

Inside **My Sections**:

* Click **Add to Theme**
* Select your Shopify theme

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

### Step 5: Open Shopify Theme Editor

* Go to **Online Store → Themes**
* Open your selected theme
* Click **Customize**

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

Inside the Theme Editor:

* Click **Add Section**
* Open the **Sections** category
* Select your SKY product ingredients

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

## Product Section Customization

Depending on the section, you can customize:

* Layout width and alignment for desktop and mobile
* Tabs, active tabs, spacing, borders, and roundness
* Tab text, fonts, typography, and padding
* Grid and slider product card layouts
* Cards per row for desktop and mobile
* Card borders, gaps, roundness, and hover effects
* Image fit and aspect ratio settings
* Card content alignment and title styling
* Modal layouts, spacing, overlay opacity, and typography
* Modal close button styling
* Arrow visibility, size, colors, and hover effects
* Tab, card, arrow, modal, and section color settings
* Section margins, padding, and layout width
* Lazy load settings for image optimization
* Mobile responsiveness
* Custom CSS styling

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

Once you configure the section settings from your side, the product section will appear on the storefront according to your selected design and customization preferences.

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

## <mark style="color:$primary;">Other Sections</mark>

Other Sections include additional layouts and utility sections to help extend your storefront design and functionality.

Perfect for:

* FAQs
* Accordions
* Logo lists
* Tabs
* Newsletter sections
* Announcement bars

## How to Add Other Sections

### Step 1: Open Other Sections

* Go to **All Sections**
* Open the **Other** category
* Browse available sections

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

### Step 2: Preview the Section

Click any section to:

* View the section preview
* Explore layouts
* Check customization settings

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

### Step 3: Get the Section

Click on “**Get Free Section**” to save the section to your theme.

The section will automatically appear under “**My Sections**”.

Once added, it will be applied to your theme automatically, and you can also view it anytime in the “**My Sections**” area.

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

### Step 4: Add the Section to Your Theme

Inside **My Sections**:

* Click **Add to Theme**
* Select your Shopify theme

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

### Step 5: Open Shopify Theme Editor

* Go to **Online Store → Themes**
* Open your selected theme
* Click **Customize**

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

Inside the Theme Editor:

* Click **Add Section**
* Open the **Sections** category
* Select your SKY blog section

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

## Other Section Customization

Depending on the section, you can customize:

* Button text and content settings
* Featured article readability options
* Reverse view layouts
* Section background colors
* Button and description colors
* Title and description fonts
* Mobile responsiveness
* Custom CSS styling

<figure><img src="/files/7YNLWiNKTnD1Ii0V6FlY" alt=""><figcaption></figcaption></figure>

Once you configure the section settings from your side, the section will appear on the storefront according to your selected design and customization preferences.

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://magecomp.gitbook.io/shopify/apps/sky-ai-theme-sections-blocks/all-sections.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.