# 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 %}

![](https://1721436993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iiuvh8UrcOxEOQkY2iO%2Fuploads%2Fgit-blob-8e18f27f1934c4e90dd5a3f728fef9b23654ce8b%2Fproduct-details-1.jpeg?alt=media)

## **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](https://help.fluorescent.co/spark/general/editing-themes/using-templates#create-and-assign-multiple-templates) or [insert dynamic content using metafields](https://help.fluorescent.co/spark/general/adapting-your-theme/dynamic-content-with-metafields).
{% 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*.

   ![](https://1721436993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iiuvh8UrcOxEOQkY2iO%2Fuploads%2Fgit-blob-684d92812d81e29e6d16767a699accda18f7cbb8%2Fproduct-details-icons.jpeg?alt=media)
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**

   ![](https://1721436993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iiuvh8UrcOxEOQkY2iO%2Fuploads%2Fgit-blob-f981b0ddaeefaa58b19ea7924a2ba3eab23799be%2Fshipping-estimator.jpeg?alt=media)
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:

   ![](https://1721436993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iiuvh8UrcOxEOQkY2iO%2Fuploads%2Fgit-blob-22765d66f3708b95b5907a71e6b24326594ad146%2Fshopify-content-drag-handles.jpeg?alt=media)

   > 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](https://help.fluorescent.co/spark/product-pages/product-template)