> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/spark/product-pages/product-page-blocks/shipping-accordion.md).

# Shipping accordion

In the Product template, you can add a **Shipping accordion** block to display shipping information and a **Estimate shipping** button to let customers estimate their shipping costs.

{% hint style="success" %} <mark style="color:green;">**Shopify**</mark> | The Shipping estimator will appear only if shipping rates are enabled in your Shopify admin. Shipping rates are a Shopify feature: see their [Shipping rates guide](https://help.shopify.com/en/manual/shipping/setting-up-and-managing-your-shipping/setting-up-shipping-rates)
{% endhint %}

![](/files/hcEsU20IUX0JTaGlYkDc)

## **Set up shipping block**

Follow the steps to add a shipping widget block and customize the layout, headings, and add ab optional image.

{% hint style="warning" %}
Editing a template changes all pages that use that template. To edit specific pages, you can [create and assign new templates](/spark/general/editing-themes/using-templates.md#create-and-assign-multiple-templates) or [insert dynamic content using metafields](/spark/general/adapting-your-theme/dynamic-content-with-metafields.md).
{% endhint %}

<details>

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

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

1. Click on the **Shipping** block to open the settings.
2. Choose to display the accordion in the *Left* or *Right* **Column**.

   > The *Left* column sits below your product media. The *Right* column sits below your product form.
3. Set the **Style** of the accordion to be **Open** or **Closed** when customers first visit your product page.
4. (*Optional*.) Change the **Icon** next to the title of your accordion or set it to *None*.

   ![](/files/nGtireaAmS6ThJSKYhBZ)
5. Change the **Title** text to display as the heading that will reveal the content when clicked on.
6. For the *Payment* or *Shipping* accordions, choose to **Show payment options** or **Show shipping estimator**

   ![](/files/nQ7KQDaEDdNtXG5h7DP7)
7. Add a **Title**.

   > We recommended a short title of just a few words.

   > To show different titles on different product pages, you can create new templates or insert dynamic content with metafields..
8. Change the **Text** content to tell customers more about your product or store.

   > Use the formatting buttons to add bold, italics, or links.

   > To show different text on different product pages, you can create new templates or insert dynamic content with metafields..
9. (*Optional*.) Click and hold the drag handles **`⋮⋮`** to rearrange the blocks:

   ![](/files/4UW6Ll3A75SP9Arnc5aO)

   > Click **Remove block** in the block settings to delete a block.

   > Click the **Eye icon** to hide or unhide a block.
10. Click **Save**.

</details>

\\

***

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