Wix Art Store: Customizing the Layout of Your Wix Art Store Gallery
7 min read
Important:
Wix Art Store is currently not available to all users. As of October 2022 it is no longer possible to add the Wix Art Store to your site. Alternatively, you can add Wix Stores to your site and connect it to Printful to sell your art.
With Wix Art Store, you can present your images in a way that truly showcases your work. Art Store galleries offer fully customizable layouts, allowing you to adjust aspects such as gallery spacing, scroll direction, orientation, automatic looping and sliding, and much more.
To customize your art store's layout:
- Click your Wix Art Store gallery in the Editor.
- Click Settings.
- Click the Layout tab.
- (Optional) Select a new layout for your gallery.
- Click Customize Layout.
- Customize the design using the available options. Click a layout below to learn more:
Collage
Images are arranged in a collage with different sized blocks.
- Scroll Direction: Select how visitors scroll through the gallery:
- Vertical: Visitors scroll down the page vertically to see more images.
- Horizontal: Visitors click the scroll arrows on the left and right of the gallery to see more images.
- Gallery Orientation: Set how images are arranged in the gallery:
- Horizontal: Images are placed one next to the other.
- Vertical: Images are placed one under the other.
- Slide automatically: Choose to display your items in a continuous slideshow:
- Intervals: Your gallery slides to the next item after your chosen amount of time. Drag the Time Between Images slider to change the number of seconds between the items.
- Continuous: Your gallery slides automatically. Drag the Slideshow Speed slider to adjust how fast your gallery slides.
- Pause on hover: Click the toggle to enable or disable that the slideshow pauses when a visitor hovers over a gallery item.
- Thumbnail Size: Set the size of the images in the collage.
- Number of displayed items: Choose how many images are shown at the one time. This applies to all screen sizes.
- Spacing: Set the spacing between the images.
- Collage Density: Choose how many images will be shown at a time in the gallery.
Masonry
Images are arranged in optimal positions, like bricks in a wall.
- Gallery Orientation: Set how images are arranged in the gallery:
- Horizontal: Images are placed one next to the other.
- Vertical: Images are placed one under the other.
- Fit to screen: Shows as many images as can fit within the gallery with a fixed size.
- Set items per row: Drag the slider to show more or less images per row.
- Thumbnail Size: Set the size of the images in the collage.
- Spacing: Set the spacing between the images.
- Number of displayed items: Choose how many images are shown at the one time. This applies to all screen sizes.
- Load More Button: Click the toggle to show or hide the Load More button:
- Enabled: The Load More button appears under the gallery. Visitors click this button to load more images.
- How many more images load?: Choose to display All images or One more section (adds another section of the same size as the original gallery).
- Disabled: Your gallery is fully displayed when loaded and your visitors do not need to click anything to see more.
- Enabled: The Load More button appears under the gallery. Visitors click this button to load more images.
Grid
Images are arranged in a grid, you can customize the layout of the grid.
- Scroll Direction: Select how visitors scroll through the gallery.
- Vertical: Visitors scroll down the page vertically to see more images.
- Horizontal: Visitors click the scroll arrows on the left and right of the gallery to see more images.
- Thumbnail Resize: Set how images behave when resized:
- Crop: The image is cut to fit the available space.
- Fit: The available space changes to fit the full image.
- Image ratio: Choose from the image ratio options available e.g. (4:3, 1:1).
- Fit to screen: Shows as many images as can fit within the gallery with a fixed size
- Set items per row: Drag the slider to show more or less images per row.
- Thumbnails size: Choose how big images in the gallery are.
- Number of displayed items: Choose how many images are shown at the one time. This applies to all screen sizes.
- Spacing: Drag the slider to set the spacing between the images.
- Load More Button: Click the toggle to show or hide the Load More button:
- Enabled: The Load More button appears under the gallery. Visitors click this button to load more images.
- How many more images load?: Choose to display All images or One more section (adds another section of the same size as the original gallery).
- Disabled: Your gallery is fully displayed when loaded and your visitors do not need to click anything to see more.
- Enabled: The Load More button appears under the gallery. Visitors click this button to load more images.
Thumbnails
One main image is displayed at a time, with thumbnails of the other images.
- Thumbnail resize:
- Crop: Adapts the image size to the size of the gallery.
- Fit: Shows the image in its original ratio and adapts it to the gallery size. If there is too much empty space around the image you need to increase the height of the gallery.
- Thumbnail placement: Choose where you want thumbnails to appear on the screen (below, left above or right of the current image on display).
- Thumbnails size: Drag the slider to choose how big images in the gallery are. Note: If you have only a few images and there is an empty space under the main image, you need to increase the thumbnail size.
- Loop images: Choose whether you want the “Next” button deactivated on the last image or not.
- Slide automatically: Choose to display your items in a continuous slideshow:
- Intervals: Your gallery slides to the next item after your chosen amount of time. Drag the Time Between Images slider to change the number of seconds between the items.
- Continuous: Your gallery slides automatically. Drag the Slideshow Speed slider to adjust how fast your gallery slides.
- Pause on hover: Click the toggle to enable or disable pause when a visitor hovers over a gallery item.
- Thumbnail Spacing: Set the spacing between the thumbnails.
- Number of displayed items: Choose how many images are shown at the one time. This applies to all screen sizes.
Slider
Images slide across the screen. Visitors can slide through the images using the forward and back arrows.
- Thumbnail Resize: Set how images behave when resized:
- Crop: The image is cut to fit the available space.
- Fit: The available space changes to fit the full image.
- Image ratio:
- Responsive: The image size will adjust automatically depending on the viewer's device.
- Fixed: Choose from the image ratio options available e.g. (4:3, 1:1). Images will appear in this ratio across all devices.
- Loop images: Choose to allow visitors to scroll through your images in a continuous loop.
- Slide automatically: Choose to display your items in a continuous slideshow:
- Intervals: Your gallery slides to the next item after your chosen amount of time. Drag the Time Between Images slider to change the number of seconds between the items.
- Continuous: Your gallery slides automatically. Drag the Slideshow Speed slider to adjust how fast your gallery slides.
- Pause on hover: Click the toggle to enable or disable that the slideshow pauses when a visitor hovers over a gallery item.
- Number of displayed items: Choose how many images are shown at the one time. This applies to all screen sizes.
- Spacing: Choose how much space to have between the images.
Slide Show
Images are displayed in a stunning slideshow.
- Loop images: Choose to allow visitors to scroll through your images in a continuous loop.
- Slide automatically: Choose to display your items in a continuous slideshow:
- Intervals: Your gallery slides to the next item after your chosen amount of time. Drag the Time Between Images slider to change the number of seconds between the items.
- Continuous: Your gallery slides automatically. Drag the Slideshow Speed slider to adjust how fast your gallery slides.
- Pause on hover: Click the toggle to enable or disable pause when a visitor hovers over a gallery item.
Tip: When you set your Slideshow to slide automatically, you have the option to display a Slideshow counter on your gallery from the Text tab in the Design Section.
- Info bar size: Adds space for icons, title and description under the gallery.
- Play Button: Add a button to allow visitors to pause or play the slideshow. (This option is only available when you choose to enable Slide Automatically).
- Thumbnail resize:
- Crop: Adapts the image size to the size of the gallery.
- Fit: Shows the image in its original ratio and adapts it to the gallery size. If there is too much empty space around the image, you need to increase the height of the gallery.
- Spacing: Set the spacing between the images.
Strip
Images are arranged as full page horizontal strips, one under the other.
- Spacing: Set the spacing between the images.
- Load More Button: Click the toggle to enable or disable the Load More button:
- Enabled: The Load More button appears under the gallery. Visitors click this button to load more images.
- How many more images load?: Choose to display All images or One more section (adds another section of the same size as the original gallery).
- Disabled: Your gallery is fully displayed when loaded and your visitors do not need to click anything to see more.
- Enabled: The Load More button appears under the gallery. Visitors click this button to load more images.
Column
Images are arranged as vertical columns, one next to the other.
- Loop images: Choose to allow visitors to scroll through your images in a continuous loop.
- Slide automatically: Choose to display your items in a continuous slideshow:
- Intervals: Your gallery slides to the next item after your chosen amount of time. Drag the Time Between Images slider to change the number of seconds between the items.
- Continuous: Your gallery slides automatically. Drag the Slideshow Speed slider to adjust how fast your gallery slides.
- Pause on hover: Click the toggle to enable or disable pause when a visitor hovers over a gallery item.
- Spacing: Set the spacing between the images.
Bricks, Mix and Alternate
Use these layouts to display gallery items of different sizes and orientation side by side.
- Number of displayed items: Choose how many gallery items show at a time.
- Spacing: Choose how much space to have between the images.
Magic
This layout allows you to change the layout to another one in one click. Simply click Create Magic Layout to randomize your gallery layout.