By default, products in a B2B store will display a thin gray border around their thumbnail. For reference, please see the first screenshot below.
If you would like to remove this border around your products' thumbnails, please see below the CSS code you need to copy into the “Edit Style Sheet” section of your eStore Settings.
First, click the settings wheel in the top-right corner of your screen and select ePrint eStore.
From here, click the Appearance tab on the left and then Edit Style Sheet.
Noted with a green arrow in the screenshot below, make sure you have the correct store selected. If you're not in the correct store, click the Change button at the top and select the store you want to edit.
Next, click the Source tab and then paste the CSS code below into the text area.
.ProductsImgBorder {
border: 0 !important;
}
.productImage_div {
display: flex;
padding-top: 10px !important;
}
.productDescription_div {
height: auto !important;
}Once you've pasted the CSS code, click Save and go to your B2B site to see the changes. You may have to clear your browser cache for your changes to appear in your web browser.
For Windows, you need to press your “Ctrl + F5” keys simultaneously.
For Mac, you need to press your “Command + Shift + R” keys simultaneously.
As shown above, there are three components to the code that are explained below.
.ProductsImgBorder {
border: 0 !important;
}
This first part of the code removes the thin gray border around the product thumbnail.
.productImage_div {
display: flex;
padding-top: 10px !important;
}
This second part of the code better aligns the thumbnail image within the product thumbnail area.
.productDescription_div {
height: auto !important;
}
And this third part of the code moves the “View Details” button up slightly if no text was entered on the product's “Short Description.”