Within this article you'll find which are the available settings and options to customize your galleries, carousels and lightboxes and achieve a cohesive design integration between Social Native's shoppable galleries and your website or app.
You can select to show your images on a gallery grid or a carousel. Navigate to each section using the menu below to see available customizations:
Gallery grid
The gallery layout allows you to display images and videos within a grid that contains multiple rows and columns. You can select between two grid patterns: classic and masonry.
a. Classic gallery:
A simple grid of images/videos displayed in even rows and columns.
b. Masonry gallery:
A grid where images/videos appear in a staggered layout.
General Settings
Property Name & Description | Options & Default Value |
Choose grid pattern: Select Classic or Masonry. The classic gallery consists of a grid of images in even rows and columns (fixed height rows). The Masonry gallery is a grid based on columns, that uses optimal spacing to place images without the need to crop them.
|
|
Zoom Hover effect over the image: Zoom effect to be enabled or disabled when users hover their mouse over images in the gallery. |
|
Play Video on Carousel Hover: Ability to auto play snippet of video content within the gallery on hover state. |
|
Block above first media
Property Name & Description | Options & Default Value |
Show Block above first media
|
|
Block Font family:
|
|
Block Font color:
| Hex Color Code
|
Block Background color
| Hex Color Code
|
Block Call to Action copy:
| Plain text up to 30 characters.
|
Images
Property Name & Description | Options & Default Value |
Number of images per row (this is for Classic Grid):
| Numeric value
|
Image per page (before View More button displays): Amount of images to be displayed per page before the View More button appears. To avoid blank spaces, consider using a multiple of the number of images per row. If you choose the Classic Grid with 4 images per row, you can select 16, 20, 24 images per page, and so on. Same for the Masonry layout, it needs to be an odd number that matches the pattern of 9 to avoid any blank space. | Numeric value
|
Horizontal space between images: Space separating each container horizontally in the Gallery grid. | Number in pixels
|
Vertical space between images: Space separating each container vertically in the Gallery grid. | Number in pixels
|
Headers and call-to-action (CTA)
Property Name & Description | Options & Default Value |
Main Header Font Family: The font to be used for the main header on the carousel. e.g. Share your look. |
|
Main Header Font Color: The font color to be used for the main header on the carousel. | Hex Color Code
|
Sub Header Font Family: The font to be used for the sub header on the carousel. e.g. Tag your images with @brandusername and be featured here. | Web Safe Font Name
|
Sub Header Font Color: The font color to be used for the sub header on the carousel. | Hex Color Code
|
Call to Action Copy Main Header Copy: Main Header text of the Call to Action container included in the carousel as a container. | Plain text
|
Call to Action Copy Sub Header Copy: Sub Header text of the Call to Action container included in the carousel as a container. | Plain text
|
Username
Property Name & Description | Options & Default Value |
Username Hover Background Color: The color of the background of the username associated to the poster of the content when hovering over a container within the carousel. | Hex Color Code
|
Username Hover Font Color: The font color of the username associated to the poster of the content when hovering over a container within the carousel. *Thumbnail hover background color and thumbnail hover font color cannot have the same value | Hex Color Code
|
Buttons
Property Name & Description | Options & Default value |
View More Font Family: The font to be used for the text displayed on the View More button. | Web Safe Font Name
|
View More Font Color: The color to be used for the text displayed on the View More button. | Hex Color Code
|
View More Background Color: The background color to be used for the View More button.
*Font color and background color cannot have the same value
| Hex Color Code
|
View More Border Style: The border style chosen to be used on the View More button. | Provide CSS border format: width, style and hex color
|
View More Hover Font Color: The color of the font on the hover state of the View More button. *Hover font color and hover background color cannot have the same value | Hex Color Code
|
View More Hover Background Color: The background color of the font on the hover state of the View More button. | Hex Color Code
|
View More Hover Border Style: The border style chosen to be used on the hover state of the View More button. | Provide CSS border format: width, style and hex color
|
Gallery Attribution
Property Name & Description | Options & Default Value |
Attribution Option: Social Native branding selection associated to the gallery. |
|
Attribution Light (white color): Adjust attribution color based on the website's overall theme of being in light or dark colors. Select No if the website has a dark theme. |
|
Carousel
A carousel gallery is a slider of images and videos in rotation, usually designed in a single line, used to feature visual content on product pages, homepage, and category pages.
General Settings
Property Name & Description | Options & Default Value |
Infinite scroll: Ability to allow the user to continue to scroll endlessly throughout the carousel. |
|
Navigation: Ability to navigate between containers or between pages (multiple containers) within the carousel. |
|
Auto-Scroll: Ability to scroll automatically without user interaction. |
|
Auto-Scroll Timing: Amount of time in milliseconds between scrolling to occur. (Dependent on Auto-Scroll being enabled). | Numeric value
|
Play Video on Carousel Hover: Ability to auto play snippet of video content within the carousel on hover state. |
|
Fluid Mode: The number of visible items will change according to the image size defined on the setting "image size" and the space available. |
|
Fluid Mode Number of items: Number of media items visible in the carousel for fluid mode (Dependent on Fluid Mode being enabled). | Numeric Value
|
Images
Property Name & Description | Options & Default Value |
Image circular format: Enable Story Theme. |
|
Image size: The size of each container defined in pixels. | Number in pixels
|
Horizontal space between images: Space separating each container with the carousel. | Number in pixels
|
Headers and call-to-action (CTA)
Property Name & Description | Options & Default Value |
Main Header Font Family: The font to be used for the main header on the carousel. e.g. Share your look. |
|
Main Header Font Color: The font color to be used for the main header on the carousel. | Hex Color Code
|
Sub Header Font Family: The font to be used for the sub header on the carousel. e.g. Tag your images with @brandusername and be featured here. | Web Safe Font Name
|
Sub Header Font Color: The font color to be used for the sub header on the carousel. | Hex Color Code
|
Call to Action Copy Main Header Copy: Main Header text of the Call to Action container included in the carousel as a container. | Plain text up to 20 characters
|
Call to Action Copy Sub Header Copy: Sub Header text of the Call to Action container included in the carousel as a container. | Plain text up to 115 characters
|
Username
Property Name & Description | Options & Default Value |
Username Hover Background Color: The color of the background of the username associated to the poster of the content when hovering over a container within the carousel. | Hex Color Code
|
Username Hover Font Color: The font color of the username associated to the poster of the content when hovering over a container within the carousel. | Hex Color Code
|
Buttons
Property Name & Description | Options & Default value |
View More Visible: Ability to show and hide the View More button displayed below carousel. |
|
View More Font Family: The font to be used for the text displayed on the View More button. | Web Safe Font Name
|
View More Font Color: The color to be used for the text displayed on the View More button. | Hex Color Code
|
View More Background Color: The background color to be used for the View More button. | Hex Color Code
|
View More Border Style: The border style chosen to be used on the View More button. | Provide CSS border format: width, style and hex color
|
View More Hover Font Color: The color of the font on the hover state of the View More button. | Hex Color Code
|
View More Hover Background Color: The background color of the font on the hover state of the View More button. | Hex Color Code
|
View More Hover Border Style: The border style chosen to be used on the hover state of the View More button. | Provide CSS border format: width, style and hex color
|
View More Link URL: The URL to be used when the View More button is clicked. | Valid URL https://www.example.com |
Navigation arrows
Property Name & Description | Options & Default Value |
Nav Arrow Icon Color: The color of the navigation arrows on the left and right hand side of the carousel. | Hex Color Code
|
Nav Arrow Background Color: The background color of the navigation arrows on the left and right hand side of the carousel. | Hex Color Code
|
Nav Arrow Hover Icon Color: The color of the hover icon of the navigation arrows on the left and right hand side of the carousel. | Hex Color Code
|
Nav Arrow Hover Background Color: The background color of the hover icon of the navigation arrows on the left and right hand side of the carousel. | Hex Color Code
|
Gallery Attribution
Property Name & Description | Options & Default Value |
Attribution Option: Social Native branding selection associated to the carousel. |
|
Attribution Light (white color): Adjust attribution color based on the website's overall theme of being in light or dark colors. Select No if the website has a dark theme. |
|
Multi-row Carousel
Property Name & Description | Options |
Multi-row Carousel Enable showing multiple rows within a single carousel. |
|
Number of Rows: Defining how many rows are to be displayed in a multi-row carousel. | Numeric Value
|
Vertical space between images: Space given between the rows. | Numeric Value
|
Partial / Empty images
Property Name & Description | Options & Default Value |
Partial / Empty Border and ‘+’ Icon Color Color to be used for the '+' icon when there is no UGC to display. | Hex Color Code
|
Lightbox
A Lightbox is a bigger version of the image/video that opens when the user clicks on the thumbnail. Within the lightbox, users will find more information about the products that are featured and they can click through to each product page.
General Settings
Property Name & Description | Options & Default value |
Auto play video: |
|
Mute video: Adjust video content being muted when the lightbox is open. |
|
Infinite navigation: Indicates if the navigation should loop through the list of assets or stop at the beginning/end. |
|
Show username: |
|
Show caption: |
|
Show products: Display products that are tied to the UGC. |
|
Modal
Property name & Description | Options & Default value |
Close button icon color:
| Hex Color Code
|
Close button icon hover color: Adjust the color of the close button icon on hover state. | Hex Color Code
|
Close button background color: Adjust the background color of the close button. | Hex Color Code
|
Close button background hover color: Adjust the background color of the hover state of the close button. | Hex Color Code
|
Modal background color: Adjust the background color of the modal within the lightbox. | Hex Color Code
|
Navigation arrows
Property Name & Description | Options & Default value |
Arrow color: Adjust the color of the arrow buttons. | Hex Color Code
|
Arrow hover color: Adjust the color of the arrow buttons on hover state. | Hex Color Code
|
Arrow background color: Adjust the background color of the arrow buttons. | Hex Color Code
|
Arrow background Hover color: Adjust the background color of the arrow buttons on hover state. | Hex Color Code
|
Username and captions
Property Name & Description | Options & Default value |
Username font color: Adjust the color of the username. | Hex Color Code
|
User caption font color: Adjust the color of the user caption. | Hex Color Code
|
Username font family: The font to be used for the username. | Web Safe Font Name
|
User caption font family: The font to be used for the user caption. | Web Safe Font Name
|
Product Section
Property Name & Description | Options & Default value |
Product section title Font family ("in the photo"): The font to be used for the product section title. | Web Safe Font Name
|
Product section title color: Adjust the color of the product section title. | Hex Color Code
|
Product name font family: The font to be used for the product name. | Web Safe Font Name
|
Product name font color: Adjust the color of the font of the product name. | Hex Color Code
|
Product name font hover color: Adjust the color of the font of the product name on hover state. | Hex Color Code
|
Product background color (block behind the name): Adjust the background color behind the name of the product. | Hex Color Code
|
Product background hover color: Adjust the color of the background of the products on hover state. | Hex Color Code
|
Lightbox Attribution
Property Name & Description | Options & Default value |
Attribution Option: |
|
Attribution Light (white color): Adjust attribution color based based on websites overall theme of being in light mode or dark mode. Select No if website is dark theme. |
|
Related Articles