Widget Editor settings
Using our platform's built in widget editor, you no longer need to get your IT team involved to make changes to any of your widgets or to enable new features that we have released. The technical installation is done when you first sign up, after which you can use the widget editor to make any changes you want with this easy to use graphical editor. You can even change the type of widget itself!
On the left side of the editor there's the main settings divided in 4 categories, each one having its own tab:
General
Required settings:
These settings are the minimum required settings that you need to set up for the widget to function. The individual parameters are explained below:
1. Widget Id - The auto-generated unique identifier for this particular widget. Use the copy icon on the right to copy this ID and send it to your IT team or to paste it directly into your Photoslurp module.
2. Campaign - The campaign that this widget has been associated with. This was chosen when creating the widget and cannot be subsequently changed.
3. Widget type - Choose the type of widget that you are creating. Your options are: carousel, gallery, circular and masonry. You can see a preview of each one of these widget types in the preview pane on the right side of the editor.
4. Theme - Choose the theme that you would like applied to the widget. Current options are "modern" and "dark".
5. Photo size (Carousel/Circular) - This parameter sets the thumbnail size that will be used by the widget.
6. Layout flexibility (Gallery/Masonry) - Choose between image sizes being responsive or keeping their size fixed.
7. Photos per row (Gallery/Masonry) - Set how many photos per row you want on your widget or, in other words, how many columns.
Filters:
To get even more out of your widgets, we have a number of filters available that can be applied to customize the type of content that will be displayed:
1. Assigned only - Enabling this parameter ensures that the widget only displays media that has been assigned to at least one product and is shoppable. This prevents media from showing up in your website that has not been linked to products as yet.
2. Strict products - When "Strict products" is enabled and a product SKU is submitted in the widget embed code inside the parameter named "product id", only those images to which the submitted SKU has been assigned will display in the widget. When it's disabled and a product SKU is submitted in the widget embed code, the widget will display images that match the "product ID" in the widget code first; and then, the widget will include the rest of images from the campaign
3. Rights cleared only - Enabling this parameter ensures that the widget only displays media for which you have already been granted media rights, or media that you own.
4. In stock only - Enabling this parameter activates our stock sync feature, ensuring that only media that has been linked to products currently in stock will be shown. If you allow visitors to pre-order out of stock products, this is probably not something that you would want.
5. Order photos - Select the display order for the content, current options are:
- Default: shows new posts first.
- Random: shows posts in random order.
- By conversions (*): displays the photos that have gained more conversions first. It's important to set up the pixel tracker correctly for this option to work.
- By product types (*): orders photos by the product types that have been set for the "productType" additional parameter.
Options marked with an asterisk (*) are advanced features that may require an upgrade to your Photoslurp plan. Reach out to your account manager at Photoslurp in case that you desire to enable these features.
6. Collection - Setting a collection name here will ensure that this widget will only show content from this particular collection.
7. Empty threshold - This filter can be used on widgets on product pages where a threshold is set of a minimum number of media that needs to be available for a specific product before the widget will show. We highly recommend allowing the widget to show media from the same category or from the rest of the campaign instead of using this parameter.
Design
Design and Look & Feel:
The second tab in the configuration of the editor allows changes to the design of the widget. Here every element can be changed, allowing custom fonts, sizes, colours and more.
Behavior
Scroll Options (Carousel/Circular):
Scroll options can be configured for both the carousel and circular widgets:
1. Auto-scroll - Enables auto-scrolling of the carousel to give a more dynamic feel to the widget and draw attention to it.
2. Orientation - The orientation of the carousel or circular widget can be set to horizontal or vertical.
3. Auto-scroll interval - The interval between each auto-scroll in milliseconds.
Gallery specific options:
The following are options specific to the gallery widget:
1. Varying thumb sizes - This parameter changes the layout of the gallery to use varying sized thumbnails and result in a mosaic style effect. Our most commonly used gallery option.
2. Photos gap - Specifies the gap between thumbnails in a gallery in pixels.
3. Auto-scroll limit - By default the gallery is set up to use infinity scroll (limit 0), scrolling automatically once the visitor scrolls to the bottom of the gallery until no more content is left to display. The value this parameter expects is the number of pages to load before showing a 'Load More' button. The number of images per page is configured with the 'Page size' parameter in the 'Miscellaneous' section.
4. Show "Load more" button - Enables the "Load more" button functionality.
Analytics:
Our widgets collect analytics data on how your visitors are interacting with them, that is fed back to our analytics suite. Here are several options for customizing this functionality:
1. Enable Google Analytics - Enables our widgets to also send all events collected to your Google Analytics property.
2. UTM parameters - When set to true, all product URL’s will be appended with Google Analytics UTM parameters (&utm_source=photoslurp&utm_medium=widget&utm_campaign=albumid&utm_content=productId)
3. Cross-domain tracking - Enables cross-domain tracking.
4. Analytics cookie TTL - This allows you to change the lifetime of the analytics cookie that we set on your visitors. We do not recommend making changes to the default of 30 days.
5. Cookie domain - By default all tracking cookies are set on the same domain/subdomain where the widget is embedded. If you are using multiple subdomains (such as store.yourbrand.com and to checkout the visitor is then sent to pay.yourband.com), set this value to your root domain (yourbrand.com) to ensure the proper functioning of our analytics features.
Widget Submission:
Another option that you have available with our widgets is allowing your visitors to upload content directly from your website without having to go to a social media network to add their content. Here are the options to enable and configure this feature:
1. Show Submit Button - This will enable a 'Submit' button on the top of your widget that your visitors can click on to upload their content directly from your site. Clicking on the button will open a popup where the visitor can choose a source for their content and select what they would like to contribute.
2. Image for loading photos URL - If no media is available for a certain product yet, instead of showing media from other products or outright hiding the widget, a third option exists where you can show a banner enticing visitors to upload content. This parameter accepts the URL to an image that can be used for this purpose.
3. Submission CSS URL - Allows you to add a link to a CSS Stylesheet in the case that you want to modify the visual style of the submission uploader.
4. Terms of Use link - All visitors that submit content through the widget are asked to agree to your terms and conditions before their content is accepted. This parameter accepts the URL to your terms and conditions page.
Lightbox:
The lightbox/popup that appears when a visitor clicks on a thumbnail in our widgets can be configured with the following options:
1. Lightbox loading - This parameter controls whether the widget should load subsequent pages of content when a visitor is scrolling from within the lightbox. When showing a gallery of limited size/number of thumbnails on a page such as the homepage, having the gallery load additional media when a visitor scrolls through the lightbox is probably not a desired effect. This is the most common reason for disabling this behaviour.
2. Auto-play videos - Enabling it plays automatically any video content on the widget.
3. Social icons - Enable or disable the display of social media sharing icons from within the lightbox.
4. CTA button - Enabling this checkbox will show a CTA button underneath the product image in the 'Shop This Look' section, also leading to the product page.
5. Visible products - Specifies the number of products that will be displayed in the 'Shop This Look' section at a time.
Miscellaneous:
Some additional options that can be customized:
1. Inline videos - Checking this box will play videos on the thumbnails view of the widgets instead of showing a preview image of the content.
2. Same tab links - Enabling this parameter ensures that when a user clicks on a product in the 'Shop This Look' section, the product page is loaded in the same browser tab and not in a new one as per the default.
3. Thumb overlay - Enabling this parameter adds an overlay over all thumbnails that on hover show the author name, the social media network the media came from as well as the number of likes and comments if available.
4. Lazy load widget - Enables the "lazy load" functionality, in which the widget won't load until it's forced to do so by the user scrolling to the location in which it's been integrated. It allows for better bandwidth performance on image-heavy sites.
For more information, go to the 'What is lazy load?' article on the FAQ.
5. Font loading method - This setting enables to define how font files used by the widget are loaded and displayed by the browser. The "font-display" CSS property value of the widget's fonts will be set to the value selected in the dropdown field.
6. Page size - The number of media that will be loaded per page. It is recommended to tweak this value depending on the configuration of your widget and your website to only load the minimum number of photos required. For example, if a carousel on your homepage can only show a maximum of 6 thumbnails at a time on any resolution, this value should be set to 6 to not unnecessarily load additional images that may never be seen. You can set different page sizes for desktop and mobile.
Texts
Locale Specific Text:
All the text within our widgets can be customized through the editor on a per language basis. The language code 'dropdown' menu will have all the languages that are configured for your product catalog for you to be able to customize text per language and locale.
Note: Ensure that you have your product catalog correctly configured before setting up customized texts.
On the right side, there's the Preview window which will provide you with an example of the widget will look like. There's also tabs for "Styles" and "Script":
Styles
CSS Styles:
In this section you can add your own custom CSS code to modify visual aspects of the widget that you might not be able to change otherwise.
Script
Embed code:
In this tab you'll find the HTML embed code that will allow you to insert the widget on your site (only for JavaScript implementations). Just copy the code and paste it in your page. If you're not implementing in JavaScript, this tab also features a list of links to guides for Magento, Prestashop, WooCommerce and Shopify implementations.
If you're implementing in JavaScript and need more information regarding widget placement or need to add additional parameters in order to make them work, you can check here how to place widgets in your store.
Note: All changes to a widget's configuration will only become active once the Publish button has been pushed.
If you've arrived to this page by following an Installation guide, just click here to go back to the step you were in: