# Image sections

## Icons Row

{% tabs %}
{% tab title="How It works" %}
The 'Icons Row' section can be used to present short bursts of information to your customers. Use them in combination with predefined icons or with your own images.

![](https://content.gitbook.com/content/6md3yH8BZZEemJndPcTN/blobs/2EiYLisXc5Y58SJhcxuj/icons-row.jpg)
{% endtab %}

{% tab title="Section settings" %}
Adjust the icon's width and color of this section.

![](https://content.gitbook.com/content/6md3yH8BZZEemJndPcTN/blobs/kW5rUBw9dXhcTJlMcKSu/icons-row-settings.jpg)

{% hint style="success" %}
Add blocks by clicking on the small arrow next to the section then clicking 'Add block'.
{% endhint %}
{% endtab %}

{% tab title="Block settings" %}
Individually adjust the icon style and text for each block.

![](https://content.gitbook.com/content/6md3yH8BZZEemJndPcTN/blobs/jOhVOleHKQyQNiaUJOPw/Icon-item.jpg) ![](https://content.gitbook.com/content/6md3yH8BZZEemJndPcTN/blobs/AGMRBSaJUo5VPx50NUFJ/icons-row-block-settings.jpg)

Add up to 6 blocks.
{% endtab %}
{% endtabs %}

## Image with text

{% tabs %}
{% tab title="How It works" %}
'Image with text' uses a solid color block to make the text stand out over the image. Use this more striking design to grab your customer's attention.

![](https://content.gitbook.com/content/6md3yH8BZZEemJndPcTN/blobs/1pVQaPH6meOGcWOYOtPd/image-with-text.jpg)
{% endtab %}

{% tab title="Section settings" %}
Set up your image, text, positions, and buttons by using these section settings.

![](https://content.gitbook.com/content/6md3yH8BZZEemJndPcTN/blobs/E2jnxbjxDMtMU7C4sncX/image-with-text-settings.jpg)
{% endtab %}
{% endtabs %}

## Image accordions

{% tabs %}
{% tab title="How It works" %}
One of our newest sections, Image accordions, allows you to set a unique look and showcase multiple images that reveal more information as you hover over them.

![](https://content.gitbook.com/content/6md3yH8BZZEemJndPcTN/blobs/z3htbD2Fu8S4DVO8Rra2/image-accordions.jpg)
{% endtab %}

{% tab title="Section settings" %}
Set a style and height for the section.

![](https://content.gitbook.com/content/6md3yH8BZZEemJndPcTN/blobs/1tL7R0HRcAFW246EAVJi/image-accordions.jpg-settings.jpg.jpg)

{% hint style="success" %}
Add blocks by clicking on the small arrow next to the section then clicking 'Add block'.
{% endhint %}
{% endtab %}

{% tab title="Block settings" %}
Set the image, text, and button settings for each block.

![](https://content.gitbook.com/content/6md3yH8BZZEemJndPcTN/blobs/gQjjccMfV9RyUdePv3wZ/image-accordions-block.jpg)
{% endtab %}
{% endtabs %}

## Overlapping images

{% tabs %}
{% tab title="How It works" %}
A small section perfect for a brief summary with the ability to use images and showcase your products.

![](https://content.gitbook.com/content/6md3yH8BZZEemJndPcTN/blobs/TSqQ9A55v5yIxAzZKOSc/overlapping-images.jpg)
{% endtab %}

{% tab title="Section settings" %}
The settings for this section allow you to set two images, links for each image, headings, buttons, text, and a small video link.

![](https://content.gitbook.com/content/6md3yH8BZZEemJndPcTN/blobs/bfy1aAHQDNlUMRtaAM7i/overlapping-images-settings.jpg)

{% hint style="info" %}
The video opens up in a popup box.
{% endhint %}
{% endtab %}
{% endtabs %}

## Text columns with images

{% tabs %}
{% tab title="How It works" %}
Inspired by the blog posts section, 'Text collums' allows you to create your own highlights from the theme editor without having the need to create blog posts.

![](https://content.gitbook.com/content/6md3yH8BZZEemJndPcTN/blobs/HjNtRqFm8pTvsSxDDBLW/text-columns-with-images.jpg)
{% endtab %}

{% tab title="Section settings" %}
Adjust the heading, colors, and general settings of the section

![](https://content.gitbook.com/content/6md3yH8BZZEemJndPcTN/blobs/uESJFxaLnFJxy8QMWKo3/text-columns-with-images-settings.jpg)

{% hint style="success" %}
Add blocks by clicking on the small arrow next to the section then clicking 'Add block'.
{% endhint %}
{% endtab %}

{% tab title="Block settings" %}
Adjust the individual blocks text, buttons, links, images, video popup, and more.

![Max columns: 50](https://content.gitbook.com/content/6md3yH8BZZEemJndPcTN/blobs/brkEAfdGrCloWdr6OOGT/text-columns-with-images-block-settings.jpg)
{% endtab %}
{% endtabs %}

## Split images

{% tabs %}
{% tab title="How It works" %}
Create a split view to showcase your products or product images.

![](https://content.gitbook.com/content/6md3yH8BZZEemJndPcTN/blobs/QTzgo47QGwiF2oO91bGs/split-images.jpg)
{% endtab %}

{% tab title="Section settings" %}
Set the section height, alignment, and text settings.

![](https://content.gitbook.com/content/6md3yH8BZZEemJndPcTN/blobs/gJekFprXDz4AOP0SqEqa/split-images-settings.jpg)

{% hint style="success" %}
Add blocks by clicking on the small arrow next to the section then clicking 'Add block'.
{% endhint %}
{% endtab %}

{% tab title="Block settings" %}
Set the individual images.

![](https://content.gitbook.com/content/6md3yH8BZZEemJndPcTN/blobs/8DswgFcuFimfsIMK5K9x/split-images-block-settings.jpg)
{% endtab %}
{% endtabs %}

## Logo list

{% tabs %}
{% tab title="How it works" %}
'Logo List' creates a carousel view that you can use to showcase your brand or partnered brand logos.

![](https://content.gitbook.com/content/6md3yH8BZZEemJndPcTN/blobs/dqunJONyKlWi8PNdY1k5/logo-list.jpg)
{% endtab %}

{% tab title="Section settings" %}
Add the logos with their respective links. Also, the background color can be changed.

![](https://content.gitbook.com/content/6md3yH8BZZEemJndPcTN/blobs/kOMn3JL1Hg62dqORzi12/logo-list-settings.jpg)

{% hint style="success" %}
Add blocks by clicking on the small arrow next to the section then clicking 'Add block'.
{% endhint %}
{% endtab %}

{% tab title="Block settings" %}
Set the individual images and sizes for your logo blocks.

![Add up to 25 blocks](https://content.gitbook.com/content/6md3yH8BZZEemJndPcTN/blobs/EkP4FyK7cJQgWeCSkBCr/logo-list-block-settings.jpg)
{% endtab %}
{% endtabs %}

## Slideshow

{% tabs %}
{% tab title="How It works" %}
This is the perfect hero section for most stores. Use the Slideshow to create a home page banner with incredible customizability.

![](https://content.gitbook.com/content/6md3yH8BZZEemJndPcTN/blobs/ttyEAwrGZRRIYerbvJvb/slideshow.jpg)
{% endtab %}

{% tab title="Section settings" %}
Adjust the general settings of the section.

![](https://content.gitbook.com/content/6md3yH8BZZEemJndPcTN/blobs/jLXITDZffdfkDjzz6ceu/slideshow-settings.jpg)

{% hint style="success" %}
Add blocks by clicking on the small arrow next to the section then clicking 'Add block'.
{% endhint %}
{% endtab %}

{% tab title="Block settings" %}
Adjust the individual block settings of this section.

![Add up to 10 blocks](https://content.gitbook.com/content/6md3yH8BZZEemJndPcTN/blobs/jqYFwB47cdi9o9uOppY2/slideshow-block-settings.jpg)

{% hint style="info" %}
If the button text is empty, the whole slide becomes the link.
{% endhint %}
{% endtab %}
{% endtabs %}

## Video

{% tabs %}
{% tab title="How It works" %}
Add a video to your store pages that will autoplay as a background over text.

![](https://content.gitbook.com/content/6md3yH8BZZEemJndPcTN/blobs/16dyg9zAl05H8ztDosdv/video.jpg)
{% endtab %}

{% tab title="Section settings" %}
Set a YouTube or Vimeo link and regulate the size of your video section.

{% hint style="info" %}
Shopify only supports YouTube and Vimeo. For any further customizations, we recommend using a third-party app.
{% endhint %}

![](https://content.gitbook.com/content/6md3yH8BZZEemJndPcTN/blobs/HhpJCRjK5hJjFcYBPgmm/video-settings.jpg)
{% endtab %}
{% endtabs %}