Adding a Border to Product Images on Category Pages

1. Overview

This article explains how to add a border and backdrop to product images within category pages on your Infigo storefront. This is a common customization request for storefronts aiming to enhance the visual presentation of product listings. This guide provides step-by-step instructions using CSS modifications to achieve this, ensuring your storefront’s category pages are visually appealing and consistent.

2. Contents

1. Overview
2. Contents
3. Key Points and Takeaways
4. Problems This Solves
5. Key Settings
6. Scenario-Based Guide
   • Scenario 1: Adding a Border Using CSS
7. FAQs
8. Troubleshooting
9. Alternate Search Terms

3. Key Points and Takeaways

• Adding a border to product images on category pages is done through CSS customization.
• Ensure you download your existing CSS file before making changes.
• If you don't have an existing CSS file, you can upload a new one with the modifications.
• The solution applies to specific categories or products, ensuring targeted customization.

4. Problems This Solves

• Lack of visual distinction for product images within categories.
• Difficulty maintaining consistent design across multiple storefronts.
• Providing a simple solution for storefront managers to customize appearance without extensive coding knowledge.

5. Key Settings

CSS Override:

• Path: Content Management > CSS Override
• Explanation: This setting allows users to upload or edit the CSS file applied to your storefront. By customizing this file, you can control the appearance of various elements, including product images in category pages.

6. Scenario-Based Guide

Scenario 1: Adding a Border Using CSS

Problem: You want to add a border and backdrop to product images on a category page to enhance visibility and design.

Solution:

1. Access the CSS Override Section:

   • Navigate to your storefront’s dashboard.
   • Go to Content Management > CSS Override.
   • If an existing CSS file is present, download it before making any changes.

2. Edit the CSS File:

   • Open the CSS file in a code editor.
   • Add the following CSS snippet:
      

     .arone-category-page .category-product-section .product-item .picture { padding: 20px; background: grey; }
   • This code adds padding around product images and sets a grey backdrop. Adjust the padding and background color as needed to fit your design preference.

    

3. Upload the Modified CSS File:

   • Save the edited CSS file.
   • Return to the CSS Override section and upload the modified file.

4. Verify the Changes:

   • Refresh your storefront’s category page to see the changes applied.
   • If the border does not appear, double-check the CSS file for any errors or missing components.

    

5. Additional Tips:

   • If your CSS file contains specific sections for categories, place the code within that section to maintain organization.

7. FAQs

1. What should I do if I don’t see the border after uploading the CSS?

   • Ensure the CSS file is correctly linked in your storefront settings. You might need to clear your browser cache or refresh the page to see the updates.

2. What if I don’t have an existing CSS file?

   • If no CSS file is available, create a new one with the snippet provided and upload it directly in the CSS Override section.