# Content showcase

The **Content Showcase Section** allows you to display featured or selected products in a visually appealing way. It is ideal for highlighting **specific collections, best-sellers, new arrivals, or seasonal promotions** to enhance customer engagement.

{% hint style="success" %}

1. **Navigate to** Shopify Admin > Online Store > Themes.
2. **Click** Customize on your active theme.
3. **In the Theme Editor**, click **Add Section > Content Showcase**.
   {% endhint %}

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

### **Settings & Customization**

#### Layout

* **Color scheme:** You can customize the section’s appearance by changing the **text color, background color**, and more using **preset color** options.
* **Background Opacity** : Set the transparency level (Range: 0–100, Default: 100).\
  This setting applies to the background image, which can be customized in the theme settings.

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

#### **Content**

* **Customize Width of Content:** You can set the content width (e.g., 1130px). It is automatically optimized for mobile devices.
* **Text:** Set a custom title (e.g., "Heading").
* **Long Text Content:** Main content of the Content Showcase.
* **Description:** Customize the Content Showcase description.
* **Button Label:** Add text for the button (e.g., "Shop Now").
* **Button Link:** Set the URL destination.
* **Button Style:** Choose the button style (Primary, Secondary, or Hyperlink).
* **Desktop Content Alignment:** Choose the text alignment for desktops **(Left, Right, or Center).** The content is automatically centered on mobile screens.

#### Section padding

* **Top Padding:** Adjust spacing above the section.
* **Bottom Padding:** Adjust spacing below the section.

#### Section divider

* **Shapes** : Adds shape effects to the section. Options: **( Curve Top, Curve Bottom, Curve Both, None, Border Top, Border Bottom, and Both Border)**.

{% hint style="success" %}
click **Content Showcase Section > Add Icon**
{% endhint %}

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

#### **Icon**

* **Image:** Upload a custom image or select from free images.
* **Image Width:** Set the image width (e.g., 250px).
* **Image Position:** Define the placement of the image within the text. (For example, setting the position to 3 places the image after the third word).
* **Link:** Assign a destination link (e.g., All Products).
* **Open Link in a New Window:** Enable this option to open the link in a new tab.


---

# 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://themessupport.gitbook.io/lollipop-theme/sections/content-showcase.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.