Shoppable Customer Photo Gallery — Complete guide
Installation, Instagram connection, customer uploads, moderation and hotspot editor for the Shoppable Customer Photo Gallery module.
Overview
Shoppable Customer Photo Gallery (dfugcgallery) showcases your customers’ real photos on the homepage and under product pages, with clickable hotspots linking to the products featured in each photo. Photos come from two sources: uploads by your logged-in customers (verified buyers) and imports of your Instagram posts through the official API. Everything goes through a back-office moderation queue, where you also place the product hotspots.
Installation
- In your PrestaShop back office, go to Modules → Module Manager → Upload a module.
- Select the
dfugcgallery.zipfile and confirm. - The module automatically creates its two database tables, its UGC Gallery admin tab (under Catalog) and its protected image storage folder.
- Click Configure to open the settings.
The module is compatible with PrestaShop 8.0 to 8.2 and 9.x, PHP 8.0 minimum. It creates no overrides and only uses native hooks: displayHome, displayFooterProduct, displayCustomerAccount and displayHeader.
Configuration
The module configuration page gathers all settings:
- Homepage gallery: enable/disable and maximum number of photos displayed.
- Product page gallery: enable/disable and maximum number of photos displayed in the strip under each product page.
- Auto-approval: when enabled, customer uploads are published immediately without moderation. Instagram imports always go through moderation, regardless of this setting.
- Maximum file size: in megabytes, applied to each uploaded photo.
- Instagram token: the long-lived token used to import your posts (see next section).
Connecting Instagram
The import uses the official “Instagram API with Instagram Login”. A one-time setup is required:
- Go to the Meta developer portal and create a Business-type application.
- Add the Instagram product and configure “API setup with Instagram login”.
- Link your store’s professional Instagram account.
- Generate a long-lived token with the
instagram_business_basicpermission. - Paste this token into the Instagram token field of the module configuration and save.
The module refreshes the token automatically before every import. As long as you run an import at least once every 60 days, the token never expires and you never have to touch it again.
To import, open Catalog → UGC Gallery and click the Import from Instagram toolbar button. The module fetches your recent posts, skips already-imported duplicates (deduplication by media ID), takes the first image of carousels and places everything in “Pending” status. Videos and Reels are ignored in this version.
Customer uploads
Logged-in customers have a My photos link in their account area. The submission page lets them:
- upload up to 5 photos per submission (jpg, png or webp);
- optionally tag a product — the list only offers products from their valid orders, guaranteeing that every tagged photo comes from a verified buyer;
- add a caption;
- check the status of their photos (pending, approved, rejected) and delete them at any time.
An explicit consent checkbox is required before any submission. Customer deletion removes the files from the server, not just the database row: the module is built for GDPR compliance.
Moderation
The Catalog → UGC Gallery list displays all photos with thumbnail, source (Upload or Instagram), author, status and date. You can:
- filter by source and status;
- approve, reject or delete each photo in one click from the row actions;
- apply these actions in bulk using the checkboxes;
- open the hotspot editor via the View action.
Only approved photos appear on the storefront.
Hotspot editor
The editor lets you link products to precise locations on each photo:
- Search for a product by name, reference or ID in the search field.
- Select it, then click on the photo where you want the dot placed.
- Drag and drop an existing dot to reposition it.
- Remove a dot from the side list if needed.
- Click Save to store the positions.
Positions are stored as percentages of the image width and height: the rendering is identical on mobile, tablet and desktop. On the storefront, each dot pulses discreetly and opens a product card on click, with the name, the up-to-date price formatted in the visitor’s currency, the cover image and a direct link to the product page.
When a customer tags a product at upload, a hotspot is automatically created at the center of the photo. You just need to move it to the right spot during moderation.
Storefront display
- Homepage: responsive grid with a badge showing the number of tagged products per photo and a share call-to-action.
- Product page: horizontal strip of customer photos linked to the viewed product.
- Lightbox: full-screen, arrow and keyboard navigation, animated hotspots,
prefers-reduced-motionpreference respected.
The front-end JavaScript is vanilla, jQuery-free, and assets only load on relevant pages. Images are re-encoded as JPEG in two sizes (1600 px and a 600 px thumbnail) to preserve performance.
Troubleshooting
- Instagram import fails: check that the token is a valid long-lived token linked to a professional account, and that the media read permission is granted. An expired token (more than 60 days without an import) must be regenerated from the Meta portal.
- An uploaded photo is rejected at submission: check the format (jpg, png, webp only) and the configured maximum file size.
- Photos do not appear on the storefront: only photos with “Approved” status are displayed; also check that the relevant gallery (homepage or product page) is enabled in the configuration.
- Multistore: each shop manages its own gallery; check the shop context selected in the back office.
Uninstall
Uninstalling removes the module tables, its admin tab and its configuration. Image files in the upload folder are also removed along with deleted photos.