Manage Products | Removing image gaps in product descriptions

Keeping your product descriptions clean and visually appealing is key to a great shopping experience. Some newer Shoplazza themes add spacing between images for better readability. If this affects your layout, you can upload full, uncut images or use a simple code fix to remove unwanted gaps. Follow the steps below to adjust your store’s display.

Apply changes across the entire store

1. Install the Custom code app: Go to your Shoplazza admin, navigate to Apps > Visit App Store, and search for Custom Code  . Once you find the app, click Add App and follow the installation instructions. For more details, visit: Custom Code | Set up custom code in your store.

2. Add the code in the Custom Code app: Open the Custom Code app in your admin, paste the correct code snippet based on your theme, and configure the settings:

• For the Farida and Nova series themes (including Nova 2023, Night, Sweet, Morning, Bamboo, Moon, Beautynow, and Elechub):

<style>
.mce-content img + img, .mce-content spz-img + spz-img {
    margin-top: -5px;
}
</style>

• The Geek series includes four themes: Impress, Christmas, Petonly, and Venue.

<style>
.mce-content img + img {
    margin-top: 0px !important;
}
.product-desc-container p {
    margin: 0px !important;
}
</style>

• For other themes:

<style>
.mce__content img+img {
    margin-top: 0px !important;  
}
</style>

• Choose user end: Select PC & Mobile.
• Set trigger page: Choose Specific Page Product landing page.
• Select code placement (Location): Choose Top.
• Click Save to apply changes.

Apply changes to a specific product

If spacing issues only affect certain products, the code can be applied individually within the product description. This ensures that only selected product pages are modified without affecting the entire store layout.

1. Open the product editor: Log in to your Shoplazza admin, navigate to Products > All products, and select the product you want to modify.

2. Access the source code editor: Click the Source code button in the product description editor.

3. Add the code in the description’s source code: Paste the correct code snippet at the beginning or end of the product description’s HTML source code and click Save.

• For the Farida and Nova series themes (including Nova 2023, Night, Sweet, Morning, Bamboo, Moon, Beautynow, and Elechub):

<style>
.mce-content img + img, .mce-content spz-img + spz-img {
    margin-top: -5px;
}
</style>

• The Geek series includes four themes: Impress, Christmas, Petonly, and Venue.

<style>
.mce-content img + img {
    margin-top: 0px !important;
}
.product-desc-container p {
    margin: 0px !important;
}
</style>

• For other themes:

<style>
.mce__content img+img {
    margin-top: 0px !important;  
}
</style>   

4. Save your changes: Click Save to confirm the update and check your product page to ensure the spacing is removed.

Visual comparison: Before and after applying the code

Applying the correct code snippet removes unwanted gaps between images, creating a cleaner and more professional product display. The images below illustrate how the spacing changes before and after the fix.

• Before applying the code: Extra space is visible between images, disrupting the layout and making the product description appear disjointed.

• After applying the code: The spacing is removed, creating a seamless and visually appealing display.

Ensuring a consistent and polished presentation enhances the shopping experience and keeps your product descriptions looking professional. Apply the correct code snippet for your theme, test the results, and adjust as needed for the best visual outcome.