How do I add images to the new products feed in the left/right column?

  • 0
  • 1
  • Question
  • Updated 4 years ago
  • Answered
  • (Edited)
Archived and Closed

This conversation is no longer open for comments or replies and is no longer visible to community members. The community moderator provided the following reason for archiving: Archived

Several templates in Bigcommerce contain a panel that displays products in the right column of the store. Typically this side panel will not show any images, but just a text feed of the newest products. You can add images to these feeds by following the instructions below.

1. Click on Design.

2. Select Edit HTML/CSS.

1019-edit-html-csspng

3. In the HTML Design Mode, you will see two lists of files on the left side. Select styles.css from the second menu. On the right side, you will now see the CSS code for styles.css.

1019-stylespng

4. On your keyboard, type CTRL F to open up a search bar in the HTML Design Mode window. Copy and paste this search query into the search bar:

.Left .ProductList .ProductImage, .Right .ProductList .ProductImage

1019-searchpng

5. You will be brought to the line of your styles.css page controlling the display of the product images in side panels. Delete the code display: none; beneath that line.

1019-before-afterpng

6. Save.

1019-savepng

7. When you view your storefront, the product feed will now contain images.

1019-before-after-storefrontpng

Photo of Drew N

Drew N, Community Manager

  • 258,538 Points 100k badge 2x thumb

Posted 5 years ago

  • 0
  • 1
Photo of Artist101

Artist101

  • 272 Points 250 badge 2x thumb
wow, very cool - great response!
Photo of Drew N

Drew N, Community Manager

  • 258,538 Points 100k badge 2x thumb
Glad to hear it.

This conversation is no longer open for comments or replies.