Customize Gallery Guide

What you can customize

You can customize Socialphotos galleries without writing any HTML, CSS, or JavaScript. Most merchants use customization to match their store branding and improve conversions.

Demo examples: UGC Page Gallery (vertical) | UGC Page Gallery (horizontal) | UGC Product Gallery

Customize the right gallery

• Instagram Feed Gallery: Go to Galleries → Instagram Feed.
• UGC Page Gallery: Each Page Gallery has its own template and can be styled differently. Go to Galleries → Page, open a gallery, and click Customize.
• UGC Product Gallery: There is one shared template used across all product pages. Go to Galleries → Products and click Customize.

Quick start

If you are not sure where to start, use these two changes first:

1. Set your layout to vertical (grid) or horizontal (carousel).
2. Adjust images per row to control thumbnail size on desktop, tablet, and mobile.

Layout and thumbnail gallery

The thumbnail gallery is the grid or carousel your customers see before clicking into a photo. Most merchants customize layout first because it changes the look instantly.

Common layout options

• Gallery direction: vertical (grid) or horizontal (carousel).
• Thumbnail gap: spacing between thumbnails.
• Images per row: control thumbnail size for different screen sizes.
• Max photos: limit how many thumbnails to show.
• Hide when empty: hide the entire gallery if it has no UGC.

Tip: If your thumbnails look too small, reduce images per row. If they look too large, increase images per row.

Make images bigger

You can increase thumbnail size by showing fewer images per row. Below are two examples:

5 images per row

3 images per row

Steps

1. Open your gallery and click Customize.
2. Scroll to Customize Thumbnail Gallery Responsive Layout.
3. Set images per row for desktop, tablet, and mobile.
4. Click Save.

Fonts and colors

Most stores look best when the gallery uses the same font as your theme. You can also fine-tune colors for hover states and buttons.

• Use Website Font: keep this on for the simplest setup.
• Text color and hover styles: control how captions and hover states feel.
• Header text: change the headline shown above the thumbnails.
• SHOP THIS LOOK text: rename it or leave blank to hide it.

Pop-up modal

The pop-up modal appears when a shopper clicks a thumbnail. This is where “shop the look” happens, so keep it clean and focused.

Common modal options

• Show or hide caption
• Show or hide shoppable products
• Show or hide social icons (Facebook, Twitter, Pinterest)
• Enable or disable linking back to Instagram (for Instagram content)

Customer upload button

You can enable a customer upload button or link so shoppers can submit photos and videos directly on your storefront. You control the wording, style, alignment, and which fields appear in the upload form.

Common upload customization

• Show or hide fields (username, email, caption)
• Set required fields
• Change field labels and placeholders
• Change upload instructions and button text
• Update terms and conditions text

Remove the customer upload button

If you only want to use Instagram and do not want users to upload their content directly, you can remove the Customer Upload Button.

To remove the Customer Upload Button from your Instagram Feed, follow these steps:

1. Go to Galleries → Instagram Feed
2. Scroll to the CUSTOMIZE CUSTOMER UPLOAD section
3. Switch Show Customer Upload Button to OFF
4. Scroll down and click Save

To remove the Customer Upload Button from UGC Page Gallery, follow these steps:

1. Go to Galleries → Page
2. Click on the gallery that you want to customize
3. Click on the Customize button
4. Scroll to the CUSTOMIZE CUSTOMER UPLOAD section
5. Switch Show Customer Upload Button to OFF
6. Scroll down and click Save

To remove the Customer Upload Button from UGC Product Gallery, follow these steps:

1. Go to Galleries → Products
2. Click on the Customize button
3. Scroll to the CUSTOMIZE CUSTOMER UPLOAD section
4. Switch Show Customer Upload Button to OFF
5. Scroll down and click Save

Product Gallery placeholder content

If you do not have enough tagged UGC for a product yet, you can use placeholder content until you build momentum. This affects the UGC Product Gallery only.

• Use Instagram Feed as a fallback
• Use Custom Photos as a fallback

Using Instagram Feed

Example: this product uses Instagram Feed, while this product uses tagged user content.

Using Custom Photos

Advanced: Standalone upload button

You can create a standalone upload button and place it anywhere on your store. This is useful if you want a single upload button reused across multiple pages.

Example: Desktop

Example: Mobile

Steps

• Create a new UGC Page Gallery.
• Name it Upload Button ONLY.
• Click Customize and clear: Header, Header Text When Empty, and Customer Upload Text.
• Do not add any photos to this gallery. You are using it only for uploads.

Advanced: Upload button underneath a gallery

By default, the upload button appears above the thumbnails. If you want it underneath, you can stack two galleries on the same page.

This uses:

• A thumbnails-only Page Gallery (no header and no upload)
• A standalone upload button Page Gallery

1. Create a thumbnails-only Page Gallery

• Create a new Page Gallery and name it Thumbnails Only.
• Customize it and clear: Header, Header Text When Empty, and Customer Upload Text.
• (Optional) Add photos so you can preview the final layout.

2. Create a standalone upload button

Follow the steps in Standalone Upload Button.

3. Embed both galleries on the same page

Embed both galleries one after another on the same Shopify page. Below is an example of how it can look using two Socialphotos gallery blocks:

On This Page