# How to use sections

## About our Sections

Palo Alto comes complete with 20+ professional theme sections to help you merchandise your online store. Sections can be added to any page on your store.&#x20;

Discover the complete range of sections and their settings. Experiment by adding different types of sections and section blocks to the homepage and the other pages within your store.&#x20;

{% tabs %}
{% tab title="Product sections" %}

* [Collection list](https://palo-alto.presidiocreative.com/palo-alto-4.3/product-sections#collection-list)
* [Collections marble](https://palo-alto.presidiocreative.com/palo-alto-4.3/product-sections#collection-marbles)
* [Featured collection](https://palo-alto.presidiocreative.com/palo-alto-4.3/product-sections#featured-collection)
* [Products list](https://palo-alto.presidiocreative.com/palo-alto-4.3/product-sections#products-list)
* [Featured product](https://palo-alto.presidiocreative.com/palo-alto-4.3/product-sections#featured-product)
* [Tab collections](https://palo-alto.presidiocreative.com/palo-alto-4.3/product-sections#tab-collections)
* [Shop the look](https://palo-alto.presidiocreative.com/palo-alto-4.3/product-sections#shop-the-look)
* [Mosaic](https://palo-alto.presidiocreative.com/palo-alto-4.3/product-sections#mosaic)
  {% endtab %}

{% tab title="Image sections" %}

* [Icons Row](https://palo-alto.presidiocreative.com/palo-alto-4.3/image-sections#icons-row)
* [Image with text](https://palo-alto.presidiocreative.com/palo-alto-4.3/image-sections#image-with-text)
* [Image accordions](https://palo-alto.presidiocreative.com/palo-alto-4.3/image-sections#image-accordions)
* [Overlapping images](https://palo-alto.presidiocreative.com/palo-alto-4.3/image-sections#overlapping-images)
* [Text columns with images](https://palo-alto.presidiocreative.com/palo-alto-4.3/image-sections#text-columns-with-images)
* [Banner with text columns](https://palo-alto.presidiocreative.com/palo-alto-4.3/image-sections#banner-with-text-columns)
* [Split images](https://palo-alto.presidiocreative.com/palo-alto-4.3/image-sections#split-images)
* [Logo list](https://palo-alto.presidiocreative.com/palo-alto-4.3/image-sections#logo-list)
* [Slideshow](https://palo-alto.presidiocreative.com/palo-alto-4.3/image-sections#slideshow)
* [Video](https://palo-alto.presidiocreative.com/palo-alto-4.3/image-sections#video)
  {% endtab %}

{% tab title="Text sections" %}

* [Shoppable blog posts](https://palo-alto.presidiocreative.com/palo-alto-4.3/text-sections#shoppable-blog-posts)
* [Blog posts](https://palo-alto.presidiocreative.com/palo-alto-4.3/text-sections#blog-posts)
* [Locations](https://palo-alto.presidiocreative.com/palo-alto-4.3/text-sections#locations)
* [Newsletter](https://palo-alto.presidiocreative.com/palo-alto-4.3/text-sections#newsletter)
* [Press](https://palo-alto.presidiocreative.com/palo-alto-4.3/text-sections#press)&#x20;
* [Text](https://palo-alto.presidiocreative.com/palo-alto-4.3/text-sections#text)
* [Tabs](https://palo-alto.presidiocreative.com/palo-alto-4.3/text-sections#tabs)
* [Testimonials](https://palo-alto.presidiocreative.com/palo-alto-4.3/text-sections#testimonials)
* [Marquee](https://palo-alto.presidiocreative.com/palo-alto-4.3/text-sections#marquee)
* [Promo](https://palo-alto.presidiocreative.com/palo-alto-4.3/text-sections#promo)
  {% endtab %}

{% tab title="Coustom sections" %}

* [Contact form](https://palo-alto.presidiocreative.com/palo-alto-4.3/custom-sections#contact-form)
* [Custom HTML](https://palo-alto.presidiocreative.com/palo-alto-4.3/custom-sections#custom-html)
* [Custom liquid](https://palo-alto.presidiocreative.com/palo-alto-4.3/custom-sections#custom-liquid)
* [Custom content](https://palo-alto.presidiocreative.com/palo-alto-4.3/custom-sections#custom-content)
* [Grid](https://palo-alto.presidiocreative.com/palo-alto-4.3/custom-sections#grid)
  {% endtab %}
  {% endtabs %}

{% hint style="success" %}
These sections can be placed on any page including:

* Home page
* Product pages
* Collection pages and Collection list
* Blog index and Blog posts
* Shopify pages
* 404 error page, Search page, Password page
* Cart page
  {% endhint %}

## Section Settings

To find the primary settings for each section, click on the section name to view the settings panel. These settings control the elements of the section.

<figure><img src="https://content.gitbook.com/content/PdBlXglXTnYPe3y8Ux8D/blobs/SAxreUWyPXp1W5Xa6ZKr/slideshow.gif" alt=""><figcaption></figcaption></figure>

Wider desktop screens will display the settings panel on the **right side** of your screen.

## Adding a Section

{% tabs %}
{% tab title="Home page" %}
Scroll towards the bottom, above Footer and Popups. Choose **Add section**:

<figure><img src="https://content.gitbook.com/content/PdBlXglXTnYPe3y8Ux8D/blobs/QQrv927T07Y15jdqi08U/add-section.gif" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Product page" %}
Navigate to any product page or choose the default product template. Use **Add section** located above Footer and Popups:

<figure><img src="https://content.gitbook.com/content/PdBlXglXTnYPe3y8Ux8D/blobs/FQ8qXODoCSgURDEkOPal/product-page.gif" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
When adding sections to the default product template, the sections and their content will appear on all your product pages.&#x20;

To provide unique content for certain products, create a new template and assign a product to that template. All products using that template will have the same section content but will be different from the default template. Always create new templates on the ***live published theme*** in order for them to appear as options in your product setup.

Another method is to use Shopify's ***insert dynamic source*** option (metafields) to blocks and then customize content for each product in your product setup.
{% endhint %}
{% endtab %}

{% tab title="Other pages" %}
Navigate to any page on your site or choose any template from the top drop-down. Choose **Add section**, which is located above Footer and Popups on the left panel:

<figure><img src="https://content.gitbook.com/content/PdBlXglXTnYPe3y8Ux8D/blobs/HiBIXNeYhZUm4JHYcke9/other-pages.gif" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
When adding a section to a certain template. The same content will appear on all pages that are also using that template.&#x20;

You can create additional templates such as a new page template or collection template and then assign a page or collection to that new template. This will allow you to create multiple pages with different content.&#x20;

Experiment with creating and customizing new templates in the Theme Editor. As a second step, remember to assign that template to a certain page or collection.&#x20;

For example, create a new collection template to display a different layout and include different sections. Then in the Shopify Admin under Products -> Collections, choose your collection and assign the newly created template to that collection.&#x20;

🚨 **Important tip**: New templates must be created on the published theme. They will not appear as a template option for assignments if created in a draft theme. This is a Shopify  Platform restriction. Always make new templates on the live published theme.&#x20;
{% endhint %}
{% endtab %}
{% endtabs %}

{% hint style="info" %}
**Note**: Newly added sections adding appear at the bottom of your section list.
{% endhint %}

## Hiding a Section

Use the eye icon next to the section title to toggle the display of the entire section:

<figure><img src="https://content.gitbook.com/content/PdBlXglXTnYPe3y8Ux8D/blobs/FwkVrgAcaYcEYSYS8pvT/hiding-section.gif" alt=""><figcaption></figcaption></figure>

> **Tip** - Blocks have their own eye icon, be sure to select the section eye icon to toggle display of the entire section.

## Reordering Sections

Use the handle icon which is located next to the eye icon to drag a section and drop it in a new position:

<figure><img src="https://content.gitbook.com/content/PdBlXglXTnYPe3y8Ux8D/blobs/nrU1rOzTRiPJLCdorpvx/reordering-section.gif" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Sections contain content and settings.

Experiment with different section types to add rich content on the homepage and all pages within your site.

Use the settings to adjust behavior and layout. Helpful tip, when adding new sections as they appear at the bottom of your section list.
{% endhint %}

## Theme Settings

Apart from the individual section settings, there are also Theme Settings. These are a number of global settings grouped together for ease of use.

<figure><img src="https://content.gitbook.com/content/PdBlXglXTnYPe3y8Ux8D/blobs/pVdnW4mnY0mZANU93Svx/theme-settings.jpg" alt=""><figcaption></figcaption></figure>
