Proofing Single Modal Sidebar Product Appearance

This particular option can be found by logging into your site's admin area and going to:
"ProPhoto" > "Customize" > "Proofing Appearance" > "Single Image Modal View"

When viewing images in the single image modal viewer, if the visitor clicks the “Add to Cart” button, the sidebar will slide open displaying Product Category Text Buttons (if used), and the individual Proofing Products available for that image.  That way, the visitor can click on the Product they want, then click the “Add to Cart” button at the bottom to add to their cart.

Proofing Sidebar Product Display Example

ProPhoto allows you to modify those Proofing Product links (#3 in the screenshot above) in a number of ways.

Individual product text appearance

Proofing Product Text Link Appearance Settings

Use these options to set the font, size, color and other styling of the product links as they appear in the sidebar.  This overview explains what each setting does.

Individual product appearance

To help differentiate to the customer when a particular product is being hovered over or has been selected, ProPhoto provides options for setting different background/text colors for products that are hovered/selected.

Proofing Product Link Appearance Settings

  1. Background Color of Hovered Product – This option allows you to set the background color and opacity of a product when it is being hovered over.  When you click on this item, you’ll see a color picker with two sliders.  The one on the left controls the color, the one on the right controls opacity.Proofing Single Image Sidebar Color and Opacity Settings
  2. Text Color of Hovered Product – You can also modify the text color of a product that is being hovered over.  Just make sure that the color you set here contrasts with the hovered background color from option #1, so that it doesn’t blend in :)
  3. Background Color of Selected Product – Once a visitor clicks on a product from the product list, the background behind that product will change to whatever color is set here.
  4. Text Color of Selected Product – This option sets the text color of any product that is selected.
  5. Product Divider – If you want to have your products separated by a border line, you can do so here by choosing the style, color and width.  If you prefer no divider, just set to “0px.”

Based on the settings in the example screenshot above, this would be the result:

Proofing Product Hovered & Selected Example2

Product Description Text Appearance

After a product has been selected by the user, whatever product description was created for that product will appear below the product name itself.  Proofing Product Description Display Example

You can modify both the font size and opacity of this product description text with the ProPhoto options provided.

Proofing Product Description Appearance Options

If you’ve searched the tutorials and can't find what you need, please contact us. We’re here to help. Contact Us