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

# Snazzy theme documentation

#### [Get Support - Live Chat 👉👉👉  ](https://go.crisp.chat/chat/embed/?website_id=da8b7246-acac-4ab5-a4c1-632a92dac696) 

####

## Home Page Sections

### What this section does

The Home page is the first page customers see. It helps visitors understand your store, explore products, and take action.

### How to use this section

{% stepper %}
{% step %}
Go to Online Store → Themes
{% endstep %}

{% step %}
Click Customize
{% endstep %}

{% step %}
Select Home page
{% endstep %}

{% step %}
Add, remove, or reorder sections
{% endstep %}

{% step %}
Click a section to edit it
{% endstep %}

{% step %}
Save your changes
{% endstep %}
{% endstepper %}

### Section settings explained

* Heading: Main title shown in the section
* Text: Short description or message
* Image: Visual image for the section
* Button label: Text shown on the button
* Button link: Where the button goes
* Layout: How content is aligned

### Best use cases

* Introduce your store
* Promote featured products
* Highlight collections

### Announcement Bar

The **Announcement Bar** allows you to display one or multiple announcements at the top of your store. You can add several text messages, and they will appear as sliding items in a slider format.

**How to Add a New Slide**

1. Go to the **Announcement Bar** section
2. Click on **Add announcement**
3. A new slide will be added instantly
4. Enter your desired text into the slide
5. Repeat the process to add multiple announcement slides

<figure><img src="https://1643130637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtyDPVxOIFhs7Y1mKqEKk%2Fuploads%2FrPLKHPg2Rq2czDVZOa2H%2Fl-Apg7UJSjeGuxZ_xFHz5A.png?alt=media&amp;token=e84d1892-5135-4941-b417-caed6d8fa644" alt=""><figcaption></figcaption></figure>

### Slideshow

The **Slideshow** section allows you to showcase content using multiple slides. Each slide can include different types of content, and slides will be displayed one after another.

**How to Add a New Slide**

1. Go to the **Slideshow** section
2. Click on **Add slide**
3. A new slide will be added automatically

**Slide Content Options**

For each slide, you can add and customize the following elements:

* **Image**
* **Video**
* **Headline**
* **Text**
* **Button**

You can add multiple slides by clicking **Add slide**, and each slide will appear as part of the slideshow.

<figure><img src="https://1643130637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtyDPVxOIFhs7Y1mKqEKk%2Fuploads%2FAJcngp7LPJ5tzy4DNGnU%2FEjGNh9VZS3acQY-09e6UBA.png?alt=media&amp;token=c5ed9b1c-e7e2-4b16-887b-41353f31493d" alt=""><figcaption></figcaption></figure>

### Collection List

The **Collection List** section allows you to display multiple collections in a single area.

**How to Add Collections**

1. Go to the **Collection List** section
2. Click on **Add collection**
3. Select a collection to add
4. Repeat the process to add multiple collections

**Collection Image Option**

* Each collection supports an **alternative image**
* The alternative image can be used instead of the default collection image for better customization

You can add as many collections as needed, and each one can have its own alternative image.

<figure><img src="https://1643130637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtyDPVxOIFhs7Y1mKqEKk%2Fuploads%2FkG86xVN1JiseOEZ0Dn74%2FizejU5fXSQe7MFkWW0JZkw.png?alt=media&amp;token=2b889eeb-d9b0-4f0f-a66e-9801b996417e" alt=""><figcaption></figcaption></figure>

### Product with Video

The **Product with Video** section allows you to showcase products along with custom images and videos.

**How to Add Products**

1. Go to the **Product with Video** section
2. Click on **Add product**
3. A new product block will be added

**Product Content Options**

For each product, you can:

* Select a **product**
* Add a **custom image**
* Add a **custom video**

You can add multiple products, and each product can have its own custom image and custom video for better presentation.

<figure><img src="https://1643130637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtyDPVxOIFhs7Y1mKqEKk%2Fuploads%2FZJIbZ2hAn1EipfdTTmzL%2FgDNCFe10Q3uNN_pk_I7RKw.png?alt=media&amp;token=8988ad10-62a1-4148-9939-cd853ef06c57" alt=""><figcaption></figcaption></figure>

### Image With Text

The **Image With Text** section allows you to build a layout using two different blocks for flexible content presentation.

**Available Blocks**

You can add **up to two blocks** in this section:

* **Image Block**
* **Text Block**

**Image Block Options**

* You can add **two images** inside the image block
* The images are displayed with **different rotation styles** for a creative layout

**Text Block Options**

In the text block, you can add:

* **Title**
* **Text**
* **Button**
* **Image**

This section is useful for combining visuals and content with a customizable layout.

<figure><img src="https://1643130637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtyDPVxOIFhs7Y1mKqEKk%2Fuploads%2FUm2gNgZcG7rkPBGYMmY8%2F7wazf3cISHuQ6VVj52HdkQ.png?alt=media&amp;token=99003ea7-34f5-4437-910d-661ad2d94658" alt=""><figcaption></figcaption></figure>

### Collection Tabs

The **Collection Tabs** section allows you to organize products into multiple collection-based tabs.

**How to Add Collection Tabs**

1. Go to the **Collection Tabs** section
2. Click on **Add collection**
3. A new collection tab will be added
4. Repeat the process to add multiple collection tabs

**Product Display**

* Each tab displays **up to 8 products** from the selected collection

**Global Button**

* A **global button** is available in this section
* Using this button, customers can navigate to another page, such as a collection or custom page

This section helps customers browse products easily through tab-based navigation.

<figure><img src="https://1643130637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtyDPVxOIFhs7Y1mKqEKk%2Fuploads%2FPtqnVRb8fPA8ZfTXvEt8%2Fu928t24pQ-KeVQa88TbY9w.png?alt=media&amp;token=e67265d8-8ded-4e76-84e6-084c7cb5d89e" alt=""><figcaption></figcaption></figure>

### Image Hotspot

The **Image Hotspot** section allows you to display multiple products using an interactive hotspot image.

**How to Add Products**

1. Go to the **Image Hotspot** section
2. Click on **Add product**
3. A new product slide will be added
4. Repeat the process to add multiple product slides

**Hotspot Image Interaction**

* You can add a **hotspot image** with clickable points
* Clicking on a hotspot point will bring the related **product slide** into view

**Add to Cart**

* All added products can be **added to the cart together** with a single action

This section is ideal for showcasing featured products in an interactive and engaging way.

<figure><img src="https://1643130637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtyDPVxOIFhs7Y1mKqEKk%2Fuploads%2FYTziqsY6E9WwX02XjRUJ%2FOf3CO8JBQ3OVql2jm8hk8Q.png?alt=media&amp;token=368b4c45-f44b-46a2-ae00-7dad3423f0e5" alt=""><figcaption></figcaption></figure>

### Image Cards

The **Image Cards** section allows you to showcase content in two different layouts.

**Display Styles**

Image cards can be displayed in:

* **Slider** view
* **Grid** view

**How to Add Cards**

1. Go to the **Image Cards** section
2. Click on **Add card**
3. A new card will be added
4. Repeat the process to add multiple cards

**Card Customization Options**

For each card, you can:

* Assign a **collection**
* Add a **custom image**
* Change **colors**
* Add **heading**
* Add **title**
* Add **badge**
* Add **button**

This section provides flexible styling and layout options for highlighting collections or featured content.

<figure><img src="https://1643130637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtyDPVxOIFhs7Y1mKqEKk%2Fuploads%2Fw8u5karMcjIeWvwZpttc%2FD3gIq_M6QsSkfIX-R2ZF_w.png?alt=media&amp;token=a9791f48-eb23-4fa8-aa79-3ac9642c8252" alt=""><figcaption></figcaption></figure>

### Testimonial

The **Testimonial** section allows you to display customer feedback using multiple testimonial items.

**How to Add Testimonial Items**

1. Go to the **Testimonial** section
2. Click on **Add Testimonial Item**
3. A new testimonial item will be added
4. Repeat the process to add multiple testimonial items

**Testimonial Item Options**

For each testimonial item, you can add:

* **Custom image**
* **Title**
* **Quote**
* **Avatar**
* **Name**
* **Location**
* **Product selection**

This section helps build trust by showcasing customer experiences and related products.

<figure><img src="https://1643130637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtyDPVxOIFhs7Y1mKqEKk%2Fuploads%2F4cvizTteKvclqUacI3rj%2F9uTfZtBCR5S_dhwP6t5BXw.png?alt=media&amp;token=3374e82f-062d-45bb-9918-97e58938e373" alt=""><figcaption></figcaption></figure>

### Rich Text

The **Rich Text** section allows you to create flexible content using multiple blocks and rich media.

**Available Blocks**

You can add up to **four blocks** in this section.

**Content Options**

Within the Rich Text section, you can add:

* **Heading**
* **Caption**
* **Text**
* **Buttons**

**Background Media**

* You can add a **background video** to enhance the visual appearance of the section

This section is ideal for presenting important messages with rich formatting and media support.

<figure><img src="https://1643130637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtyDPVxOIFhs7Y1mKqEKk%2Fuploads%2FZDEdGLoJypN3f50dqD5W%2FkVca1omuRjy_vWp3HYIcBA.png?alt=media&amp;token=ee9f9191-82d3-457a-a86c-710188905921" alt=""><figcaption></figcaption></figure>

### Product Bundle

The **Product Bundle** section allows you to display and bundle products together for easy purchasing.

**Product Display**

* You can display **up to 25 products** in this section
* Products are shown based on the selected **collection**

**Bundle Options**

* Each bundle can include a **maximum of 5 products**
* Customers can select bundled products and purchase them together

This section helps increase average order value by offering curated product bundles.

<figure><img src="https://1643130637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtyDPVxOIFhs7Y1mKqEKk%2Fuploads%2FTPAMVjX1lrfVuCYDUBVs%2FbY5lJ-4YS4mlamrphDM88Q.png?alt=media&amp;token=dd14274b-cd29-4411-8114-bae9923de5b0" alt=""><figcaption></figcaption></figure>

### Blog Posts

The **Blog Posts** section allows you to display blog articles based on a selected blog.

**Blog Selection**

* Select a **blog** to display posts from
* The section will automatically show posts from the chosen blog

**Post Display Options**

* You can display **between 3 to 10 blog posts**
* **Featured image** can be shown for each post
* **Show date** can be turned on or off
* **Show tags** can be turned on or off

**Global Button**

* A **global button** is available in this section
* The button can be used to link to another page or an external URL

This section helps highlight recent or featured blog content on your store.

<figure><img src="https://1643130637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtyDPVxOIFhs7Y1mKqEKk%2Fuploads%2FOAX1Wd6dAOmw058rObEn%2FTpKWffhGTlqf_TKbCMzAZQ.png?alt=media&amp;token=0b08d9ca-8ceb-4fee-8c61-da977a00305d" alt=""><figcaption></figcaption></figure>

### Scrolling Text

The **Scrolling Text** section allows you to display moving text in a marquee style.

**Marquee Settings**

* You can adjust the **marquee speed**
* You can set the **marquee direction** to left or right

**How to Add Text**

1. Go to the **Scrolling Text** section
2. Click on **Add marquee item**
3. Add your desired **text**
4. Repeat the process to add multiple marquee text items

This section is useful for displaying announcements or promotional messages in a continuous scrolling format.

<figure><img src="https://1643130637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtyDPVxOIFhs7Y1mKqEKk%2Fuploads%2FPDhlUSxnmrKaXyYzo0F4%2FdITQgcV4TayQHHZ4feP4mw.png?alt=media&amp;token=6afe58c6-da71-4257-b656-a76a8fd5ae58" alt=""><figcaption></figcaption></figure>

### Image Gallery

The **Image Gallery** section allows you to showcase multiple images in a clean and flexible layout.

**How to Add Images**

1. Go to the **Image Gallery** section
2. Click on **Add image**
3. A new image will be added
4. Repeat the process to add multiple images

**Image Customization Options**

* Adjust the **overlay opacity** for the images
* Add a **separate link** to each individual image

**Global Button**

* A **global button** is available in this section
* Use the global button to add a link to another page or an external URL

This section is ideal for visually highlighting content with linked images.

<figure><img src="https://1643130637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtyDPVxOIFhs7Y1mKqEKk%2Fuploads%2F5Yk9JuSvp5vy22wnk3fP%2F4j5H9WlNS2SvFCuhVPSQFQ.png?alt=media&amp;token=60f425a4-03c0-480f-ab56-3770cd9b2ae4" alt=""><figcaption></figcaption></figure>

### Helpful tips

{% hint style="info" %}

* Keep the top section simple
* Do not overload the page
  {% endhint %}

***

## About Page Sections

### What this section does

The About page tells your brand story and builds trust.

### How to use this section

{% stepper %}
{% step %}
Open Theme Editor
{% endstep %}

{% step %}
Select About page
{% endstep %}

{% step %}
Edit text and images
{% endstep %}

{% step %}
Save changes
{% endstep %}
{% endstepper %}

### Section settings explained

* Page heading
* Description text
* Image
* Image position

### Best use cases

* Share your mission
* Explain your brand

***

## Contact Page Sections

### What this section does

Allows customers to contact you easily.

### How to use this section

{% stepper %}
{% step %}
Open Theme Editor
{% endstep %}

{% step %}
Select Contact page
{% endstep %}

{% step %}
Edit contact form
{% endstep %}

{% step %}
Save changes
{% endstep %}
{% endstepper %}

### Section settings explained

* Heading
* Description text
* Contact form
* Email destination

***

## FAQ Page Sections

<details>

<summary>FAQ Page Sections — details</summary>

#### What this section does

Answers common customer questions.

#### How to use this section

Open Theme EditorSelect FAQ pageAdd questions and answersSave changes

#### Section settings explained

* Question
* Answer
* Toggle open/close

</details>

***

## Collection List Section

### What this section does

Displays collections in a visual grid.

### How to use this section

{% stepper %}
{% step %}
Open Theme Editor
{% endstep %}

{% step %}
Add Collection List section
{% endstep %}

{% step %}
Select collections
{% endstep %}

{% step %}
Save changes
{% endstep %}
{% endstepper %}

### Section settings explained

* Collection selection
* Image
* Title
* Layout style

***

## Product Details Page Sections

### What this section does

Shows full details of a product.

### How to use this section

{% stepper %}
{% step %}
Open Theme Editor
{% endstep %}

{% step %}
Select Product page
{% endstep %}

{% step %}
Edit product sections
{% endstep %}

{% step %}
Save changes
{% endstep %}
{% endstepper %}

### Section settings explained

* Product title
* Price
* Images
* Description
* Add to cart button

***

## Cart Page Sections

### What this section does

Shows items added to cart.

### How to use this section

{% stepper %}
{% step %}
Open Theme Editor
{% endstep %}

{% step %}
Select Cart page
{% endstep %}

{% step %}
Review layout
{% endstep %}

{% step %}
Save changes
{% endstep %}
{% endstepper %}

***

## Blog Page Sections

### What this section does

Displays all blog posts.

### How to use this section

{% stepper %}
{% step %}
Open Theme Editor
{% endstep %}

{% step %}
Select Blog page
{% endstep %}

{% step %}
Adjust layout
{% endstep %}

{% step %}
Save changes
{% endstep %}
{% endstepper %}

***

## Blog Details Page Sections

### What this section does

Shows a single blog post.

### How to use this section

{% stepper %}
{% step %}
Open Theme Editor
{% endstep %}

{% step %}
Select Blog post page
{% endstep %}

{% step %}
Edit layout
{% endstep %}

{% step %}
Save changes
{% endstep %}
{% endstepper %}


---

# 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://shopidevs.gitbook.io/snazzy/snazzy-theme-documentation.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.