Applies to: Emplifi UGC, Publish Center
The Design Editor controls how your galleries (also called widgets or displays) look and feel. Each category panel has its own options. This article explains what you can change in each panel. For instructions on using the editor itself, see the Design Editor Guide.
Global
These settings apply to the whole gallery.
- Font: Pick a font from the preloaded list or import your own. Imported fonts must be .otf, .woff, .woff2, or .ttf files.
- Primary Color: Sets the color of all buttons and the header text.
- Secondary Color: Sets the color of the text inside buttons.
For more color control, use Custom CSS.
Header
These settings control the area at the top of your gallery.
- Background: Adds a custom background image to the top of the gallery.
- Title: Changes the font size and weight of the gallery title.
- Description: Changes the font size and weight of the gallery description.
- Upload Button: Shows or hides the button below the description. Shoppers use it to upload content to the album inbox linked to your gallery. You can also change its font size and weight.
- End Tile Upload Button: Shows or hides the upload tile at the end of the gallery. You can also change the font size and weight of its text. This tile works well for albums with only a few photos or videos.
Widget
These settings control the gallery itself. Some apply to every layout, and others depend on the Display Layout you chose.
Common options
Review Tile (all layouts except Slideshow). This is available when Show favorite reviews is enabled on your display.
- Font Size: Changes the size of the review text.
- Star Size: Changes the size of the star next to the review.
- Background Image: Uses the product image as the background of the review section.
- Frequency: Sets how often reviews appear in the gallery.
Photo Tile hover options (Photowall, Horizontal, Vertical, and Coverflow layouts).
- Photo Tile Hover: Turns the hover animation on or off for desktop users.
- Photo Tile User Handle: Shows or hides the uploader's name on hover, and sets its font size and weight.
- Photo Tile Caption: Shows or hides the shopper's caption on hover, and sets its font size and weight.
- Photo Tile Submitted Date: Shows or hides the submission date on hover, and sets its font size and weight.
The three hover options (user handle, caption, and submitted date) have no effect if the hover animation is turned off.
Full Page Gallery options
Photowall (Full Page)
- Photo Size: Changes the size of the photo tiles.
- Gutter Size: Changes the spacing between tiles.
- Load More Button: Shows or hides the button. You can set its font size and weight, turn its hover animation on or off, or switch to Infinite Load.
Mosaic (Full Page)
- Number of Photos/Videos: Sets how many items appear before shoppers must click Load more. With Infinite Load on, it sets how many load at a time.
- Infinite Load: Loads more items automatically as shoppers scroll, instead of showing a Load more button.
- Font Size / Font Weight: Changes the text style of the Load more button.
- Hover Animation: Turns the tile hover animation on or off for desktop users.
Carousel options
Photowall (Carousel)
- Photo Size and Gutter Size: Control tile size and spacing.
- Smooth Swiping: Changes how the swipe animation moves between tiles on tablet and mobile.
- Show Pagination Dots: Shows or hides the dots. They are cosmetic only and don't work for navigation.
- Navigation Arrows: Lets you customize the left and right arrows. The recommended image size is 45 x 90 px. You can also place the arrows over the gallery or beside it.
Mosaic (Carousel)
- Hover Animation, Smooth Swiping, Show Pagination Dots, and Navigation Arrows: These work the same way as in Photowall (Carousel).
Horizontal and Vertical
- Photo Size and Gutter Size: Control tile size and spacing.
Coverflow
- Photo Size: Changes the size of the photo tiles.
Slideshow options
- Autoplay: Makes the slideshow animate on its own or stay static.
- Show Lightbox: Shows or hides the lightbox when a shopper clicks an item.
- Slideshow Interval: Sets the animation speed. It has no effect if Autoplay is off.
Lightbox
The lightbox is the view that opens when a shopper clicks a photo or video. These settings control its design.
- User Avatar: Shows or hides the user's avatar.
- User Handle: Changes the font size and weight of the handle.
- Close Button: Lets you upload a custom close button image. The recommended size is 59 x 59 px.
- Navigation Arrows: Lets you customize the left and right arrows and their position. The recommended image size is 50 x 100 px.
- Caption: Shows or hides captions, and sets their font size and weight. Usernames can't be hidden, so that shoppers always get credit for their content.
- Product Image: Changes the size and position of product images when items have tagged products.
- Product Name: Changes the font size and weight of product names on items with assigned products.
- Buy Now Button: Changes the font size and weight of the product button on items with tagged products.
To remove the Buy Now button entirely, add this line to your Custom CSS:
#photo_lightbox_wrapper #right_panel #middle_block #cta_container{display:none!important}Uploader
These settings control the uploader's behavior, workflow, and terms of service. The uploader lets customers submit photos directly from the gallery. You can turn the Upload Now button on or off, and style it, in the Header panel. You can also edit its text manually, including into another language.
- Review Panel: Lets you require captions, change the caption placeholder text, and enable shopper-submitted product tags for content received through the direct uploader.
- Submit Panel: Lets you add fields and checkboxes to collect more information from customers, such as location, phone number, or age. Name and email are always requested.
- Thank You Panel: Sets where shoppers are sent after they submit an item and click Finish.
Localization
Use this section to edit the text of buttons and other messages in the gallery. This includes the Source Panel, Submitting Content, and Uploader Warning text. You can also change the text into another language manually.
Custom CSS
Add your own CSS here to customize the gallery further. See the full custom CSS gallery styling guide for details.
Professional Services CSS
Any CSS written for you by our Professional Services team is stored here. To ask about this service, contact your Customer Success Manager or Support.
FAQ
Can I remove the "Upload Now" button from my gallery?
Yes. The button lets customers submit content straight to your Emplifi UGC inbox. It helps drive engagement, collect permissioned UGC, and gather customer details such as names and email addresses. To hide it from a live gallery:
- Go to your Publish Center.
- Click Edit Display next to the display you want to change.
- Under Customization, click Design Editor, then click the pencil icon next to the theme you want to use.
- In the Header panel, find the Upload Button tile and click the eye icon to hide it.
- In the same panel, find the End Tile Upload tile and click the eye icon to hide it.
- Click Save theme.