# Alternate product template

The **Alternate product template** (**`alternate-product`**) includes a **Product details** section to provide a different page layout. The product details section displays the product description and custom details widgets below the product media.

{% hint style="success" %} <mark style="color:green;">**Shopify**</mark> | Products are created and edited in your Shopify admin. See Shopify's [Products manual](https://help.shopify.com/en/manual/products) to learn add and manage products.
{% endhint %}

## **Quick setup**

To start using the Alternate product template:

* Customize the **alternate-product** template in the theme editor.
  * Start by editing the template style and layout, then set up the product detail blocks.
* When your template is ready, **assign the template** in the Shopify admin to make it live.

## Edit alternate product template

The **Alternate product template** includes an added **Product details** section that displays the product description and details below the product media.

We recommend first editing the preset sections and hiding any sections you won't use. Then, you can add other theme sections to further customize your page.

<details>

<summary><mark style="color:blue;">STEPS</mark></summary>

In your theme editor (**Customize**):

1. Use the **Templates selector** to open **Products > alternate-template**.
2. Under "PREVIEW", click **Change** and select the product that you want to use the alternate template.

   > A warning symbol **(!)** next to the page name means that the template is not yet assigned. You can click the page name to go to your Shopify admin when you’re ready to assign the template.
3. Under **Product details**, click the **Description** block and set the **Style** to *Paragraph*, *Accordion open*, or *Accordion closed*.
4. Edit preset theme sections to add custom page content and styles.
5. Under **Template**, click **(+) Add section** to further customize your page with theme sections.

   > Click and hold the drag and drop handles **`⋮⋮`** to change the order of sections.
6. Click **Save**.

</details>

## Set up product detail widgets

The **Product details widgets** are dropdown accordions that display core details like shipping, returns, and payment options to build trust with your customers with a customizable layout. You can also display **payment badges** and a **shipping estimator** button.

<details>

<summary><mark style="color:blue;">STEPS</mark></summary>

In your theme editor (**Customize**):

1. Use the **Templates selector** to open **Products > alternate-product**.
2. Click the **Payment**, **Security**, or **Shipping** block to open their settings.
3. (*Optional*.) Change the **Icon** next to the title of your widget or set it to *None*.

   ![](/files/nGtireaAmS6ThJSKYhBZ)
4. Change the **Title** text to display as the widget heading.

   > We recommended a short title of just a few words.
5. Add **Text**.

   > We recommend adding a brief description.

   > Use the formatting buttons to add bold, italics, or links.
6. For the *Payment* or *Shipping* widgets, choose to **Show payment options** or **Show shipping estimator**

   ![](/files/nQ7KQDaEDdNtXG5h7DP7)
7. Add a **Title**.
8. (*Optional*.) Click and drag the **`⋮⋮`** icon to change the order of the widget blocks:
9. Click **Save**.

</details>

## Assign alternate product template

In your Shopify admin, you need to assign the alternate-product template to publish your changes to your live store. Follow the steps when you're done customizing the template.

<details>

<summary><mark style="color:blue;">STEPS</mark></summary>

In your **Shopify admin**:

1. Click **Products**.
2. Click to open the product that you want to use the alternate template.
3. Click the **Theme template** menu and select **landing** to assign the template to your page.

   > **Note**: Templates can't be assigned on unpublished themes. Your changes to templates will be saved and can be assigned when you buy and publish the theme.
4. Click **Save**.

</details>

\\

***

> **Related links**
>
> [Product template](/spark/product-pages/product-template.md)


---

# 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://help.fluorescent.co/spark/product-pages/product-template/alternate-product-template.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.