Wix Art Store: Customizing the Design of Your Wix Art Store Gallery
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.
You can customize the design of your Wix Art Store gallery for both the regular and hover views (the view a customer sees when hovering over the gallery).
To customize the design:
- Click the Wix Art Store gallery in the Editor.
- Click Settings.
- Click the Design tab.
- Customize the design of the gallery using the following options:
Overlay & Icons
An overlay sits on top of an image and adds an extra effect when you hover over the image with your mouse. You can customize this effect as well as any icons you have.
- Click Overlay & Icons.
- Choose between a Full or Partial overlay and customize using the options available:
- Full Overlay: The overlay covers the entire item.
- Gradient: Click the toggle to enable a gradient overlay.
- Color & Opacity 1 and 2: Click the relevant color box to customize the gradient's colors. Then drag the slider to adjust the colors' opacity.
- Gradient Direction: Drag the slider to adjust the gradient's overlay direction.
- Icon Color: Click the color box to change the color of gallery icons that appear on hover.
- Color overlay: Click the color box to choose a color. Then drag the slider to change the transparency of the color overlay.
- Icon color: Click the color box and select a new color for your gallery icons.
- Gradient: Click the toggle to enable a gradient overlay.
- Partial Overlay: The overlay covers only a portion of the item.
- Set size in: Manage your overlay's size in percentages or pixels.
- Size: Drag the slider or enter a value to choose an overlay size.
- Overlay starts from: Choose where your overlay is positioned.
- Padding: Drag the slider to adjust the amount of space between the gallery border and your overlay.
- Gradient: Click the toggle to enable a gradient overlay.
- Color & Opacity 1 and 2: Click the relevant color box to customize the gradient's colors. Then drag the slider to adjust the colors' opacity.
- Gradient Direction: Drag the slider to adjust the gradient's overlay direction.
- Icon Color: Click the color box to change the color of gallery icons that appear on hover.
- Color overlay: Click the color box to choose a color. Then drag the slider to change the transparency of the color overlay.
- Icon color: Click the color box and select a new color for your gallery icons.
- Full Overlay: The overlay covers the entire item.
- Choose an overlay effect from the options available:
- No effect: The overlay does not apply any effect.
- Fade in: The overlay gradually appears on hover.
- Expand: The overlay expands on hover.
- Slide up: The overlay slides up on hover.
- Slide right: The overlay slides right on hover.
Texts
You can customize the design of the title and description text, provided that you chose to display them on the Layout tab. If you don’t see the Texts options (step 1 below), go to the Layout tab, click Customize Layout and select the checkboxes next to Title and Description to display them.
- Click Texts.
- Customize the text using the options below:
- Info to display: Select the checkbox next to the info you want to display (Title, Description, Slideshow counter).
Note: The Slideshow counter option is only available in the Slideshow layout if you have enabled slide automatically.
- Info & button position: Choose to display your text and button above, below, on, to the left or right of the image.
- What happens to the info on hover?: Choose what happens to your text when visitors roll over an item with their mouse.
- Title style and color: Select the font and color of the title text.
- Description font style and color: Select the font and color of the description text.
- Horizontal alignment: Choose to align the horizontal text either on the left, in the center, or on the right.
- Vertical alignment: Choose to align the vertical text either on the left, in the center, or on the right.
- Text vertical padding: Drag the slider to change the amount of space between the vertical text and the border.
- Text horizontal padding: Drag the slider to change the amount of space between the horizontal text and the border.
- Info to display: Select the checkbox next to the info you want to display (Title, Description, Slideshow counter).
Buttons
Customize the Buy Now and Load More buttons.
Click Buttons and customize the following:
Click Buttons and customize the following:
- Buy Now Button: Click the toggle to enable or disable the Buy Now button.
- Enabled: The Buy Now button appears under the image. Customize the button:
- Button Text: Edit the text that appears on the Buy Now button.
- Font Style & Color: Click the drop-down menu to select the font and click the color picker to change the color of the button text.
- Button Color & Opacity: Drag the slider to change the opacity and click the color picker to change the button color.
- Border Width & Color: Drag the slider to change the width and click the color picker to change the border color.
- Corner Radius: Drag the slider to change the corner radius. The bigger the radius, the rounder the corners will be.
- Horizontal alignment: Choose to align the button to the left, center, or the right horizontally.
- Vertical alignment: Choose to align the button to the left, center, or the right vertically.
- Disabled: The Buy Now button does not appear.
- Enabled: The Buy Now button appears under the image. Customize the button:
- Load More Button: Customize the Load More button that appears under the gallery:
Note: This section will appear if you chose to show the Load More button in the Layout tab.- Button Text: Edit the text that appears on the Load More button.
- Font Style & Color: Click the drop-down menu to select the font and click the color picker to change the color of the button text.
- Button Color & Opacity: Drag the slider to change the opacity and click the color picker to change the button color.
- Border Width & Color: Drag the slider to change the width and click the color picker to change the border color.
- Corner Radius: Drag the slider to change the corner radius. The bigger the radius, the rounder the corners would be.
Item Style
Each image or video in the gallery is an item. You can change the look of the items for both the regular and hover modes.
- Click Item Style.
- Customize the regular view of the item under Item Style:
- Border width & color: Drag the slider to change the border width and click the color box to select a color.
- Corner radius: Drag the slider to make the corners more round or square.
Note: The Border width & color and Corner radius options are only available when you choose to crop your thumbnails in your layout's settings and only apply to the main image (not the thumbnails).
- Shadow: Click the toggle to enable or disable the shadow:
- Enabled: The gallery item has a shadow around it. Customize the opacity, color, blur, shadow direction and shadow size.
- Disabled: The gallery item does not have a shadow around it.
- Choose what happens when someone hovers over the gallery item with their mouse:
- No effect: No effect is applied to the hover.
- Zoom in: Zooms in on the image on hover.
- Blur: The image is blurred on hover.
- Grayscale: The image becomes black and white on hover.
- Shrink: The image gets smaller on hover.
- Invert: The image color is inverted on hover.
- Color in: The image turns from black and white to colorful on hover.
- Darken: The image becomes slightly darker on hover.
- Choose what happens while the image is loading:
- Blurred image:A blurred version of the image appears while loading.
- Color placeholder: A colored placeholder appears while the image is loading.
Scroll Animations
Choose how your gallery items appear while visitors scroll down the page.
Click Scroll Animations and select an effect:
Click Scroll Animations and select an effect:
- No Effect: No effect when scrolling down the gallery.
- Fade In: The overlay fades into view.
- Grayscale: The image colors change to grayscale.
- Slide Up: The overlay slides up from the bottom.
- Expand: The overlay expands into place.
- Shrink: The image shrinks slightly.
- Zoom Out: The image zooms out.
- One Color: A color of your choosing is displayed before the item is revealed.
Customize Expand Mode
Customize the pop-up window that opens when your visitors click an image.
Click Customize Expand Mode and customize the following:
Click Customize Expand Mode and customize the following:
- Expand Mode Settings: Select what information you want to display in the window:
- Title: The image title is displayed.
- Description: The image description is displayed.
- Link: The image link is displayed.
- How should it look?: Select the colors and fonts used in the window:
- Background Color: Click the color picker to change the background color.
- Icon Color: Click the color picker to change the of the icons (e.g. the heart icon).
- Title Style: Click the drop-down menu to select the font and click the color picker to change the color of the title text.
- Description Style: Click the drop-down menu to select the font and click the color picker to change the color of the description text.
- Add to Cart Button: Customize the Add to Cart button:
- Font Style & Color: Click the drop-down menu to select the font and click the color picker to change the color of the button text.
- Button Color & Opacity: Drag the slider to change the opacity of the button.
- Border Width & Color: Drag the slider to change the border width and click the color picker to change the button color.
- Button Text: Edit the button text.
- Click Done.
Tip:
By default the preview that you see in the Editor is the hover view preview. Click End Hover Preview to disable this view. Click Preview Hover Mode to view the hover view preview again.
Did this help?
|