> For the complete documentation index, see [llms.txt](https://docs.roadmap.so/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.roadmap.so/reviews/storefront-and-display/enable-image-display-in-the-pdp-review-widget.md).

# Enable image display in the PDP review widget

Show customer-uploaded images in the PDP widget and control how they appear.

Customer-uploaded images can appear automatically in the PDP widget.

Use the **Images** settings inside **PDP Block** to show, hide, and style them.

### Before you start

Make sure these are true first:

* you are editing **Product Reviews**
* customers are submitting reviews with images
* you are in **Roadmap App Admin**, not the Shopify theme editor

### Enable images in the PDP widget

{% stepper %}
{% step %}

#### Open the review widget editor

In Roadmap, go to **Reviews** → **Review Form**.

At the top, select **Product Reviews**.
{% endstep %}

{% step %}

#### Switch to PDP Block

Open the dropdown in the top-left.

Select **PDP Block**.

This opens the design settings for the product page review widget.

<figure><img src="https://393112916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ8asLD4FVCFagK40xEr4%2Fuploads%2FvdAmfMtdYEK57hB2Df2U%2FScreenshot%202026-04-07%20at%202.55.29%E2%80%AFPM.png?alt=media&amp;token=2e297bd5-a710-49ef-9a74-375b58ebe90e" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### Open the Images section

In **Widget Stylings**, expand **Images**.

This section controls both in-review images and the image gallery.

<figure><img src="https://393112916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ8asLD4FVCFagK40xEr4%2Fuploads%2FnNC4igLy61Yg8vNUiFPk%2FScreenshot%202026-04-07%20at%202.58.59%E2%80%AFPM.png?alt=media&amp;token=ac8aae8f-9f74-4a02-88bd-b29d0f8e7871" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### Choose how review images display

Set **Review image display** to one of these options:

* **Below review text**
* **Side-by-side**
* **Hidden**

If customers have uploaded images, they appear in the review preview immediately.
{% endstep %}

{% step %}

#### Choose how the gallery displays

Set **Image gallery display** to one of these options:

* **Below heading**
* **In line with heading**
* **Hidden**

This controls the row of customer photos at the top of the reviews section.

<figure><img src="https://393112916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ8asLD4FVCFagK40xEr4%2Fuploads%2FJtgyQunF4WRlV2Q0TCMR%2FScreenshot%202026-04-07%20at%202.59.08%E2%80%AFPM.png?alt=media&amp;token=d6a4da08-aa96-49fa-9f9a-fb105e6c7edc" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### Adjust the image styling

Use the remaining controls to style the images:

* **Image Border Radius (px)** controls the corners for both review images and gallery images
* **Image Size (px)** controls image size inside each review on desktop
* **Mobile Image Size (px)** controls image size on mobile
* **Image Aspect Ratio** controls the review image crop, such as **1:1 (Square)** or **3:4 (Portrait)**
* **Gallery Image Size (px)** controls the size of the gallery thumbnails
  {% endstep %}

{% step %}

#### Preview and save

Use the live preview on the right as you make changes.

You can click gallery images in the preview to open the image popup.

When you are happy with the result, click **Save**.

<figure><img src="https://393112916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ8asLD4FVCFagK40xEr4%2Fuploads%2FLyy1cyslKJMJbgYGuQZK%2FScreenshot%202026-04-07%20at%203.00.09%E2%80%AFPM.png?alt=media&amp;token=5e0ea9bd-853a-4f72-99bd-5d6275494ac9" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

### Troubleshooting

<details>

<summary>Why don’t I see any images?</summary>

Check these first:

* you are editing **Product Reviews**
* the top-left dropdown is set to **PDP Block**
* **Review image display** is not set to **Hidden**
* **Image gallery display** is not set to **Hidden**
* your reviews actually include customer-uploaded images

</details>

<details>

<summary>Can I hide images without turning off photo capture?</summary>

Yes. Set **Review image display** or **Image gallery display** to **Hidden**.

This only changes storefront display.

</details>

<details>

<summary>Do changes show immediately while I edit?</summary>

Yes. The preview updates in real time.

You can also click gallery images in the preview to test the popup.\
\
But you need to 'save' your edits for the changes to populate onto the storefront widget.

</details>

### Related guides

* [Customise review widget design](/reviews/storefront-and-display/customise-review-widget-design.md)
* [Add reviews to product pages](/reviews/storefront-and-display/add-reviews-to-product-pages.md)


---

# 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://docs.roadmap.so/reviews/storefront-and-display/enable-image-display-in-the-pdp-review-widget.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.