Introduction
To make sure the Tolstoy Media Gallery displays correctly on your product detail page (PDP), you can add custom CSS directly inside the Tolstoy AI Platform. This article explains how to set it up and style the gallery for the best results on your site.
Prerequisites
Before you begin:
Your Media Gallery must be saved and published.
The block must be added to your product page template.
👉 We recommend adding it to a draft theme first, so you can test and adjust the CSS before publishing.
CSS Objectives
When customizing CSS for your Media Gallery, focus on three key goals:
Hide the native gallery
Either remove it from your theme code or hide it with CSS.
⚡ Note: Removing it from code is better for performance since the gallery won’t load into the page at all. Hiding with
display:none
leaves the gallery in the background (not visible but still in the DOM), which can slightly slow things down.
Position the Tolstoy Media Gallery
Use CSS to fine-tune layout and alignment. For example, you can use flexbox to display the Tolstoy gallery side-by-side with product details, even if they aren’t direct DOM siblings. This often requires applying CSS to parent elements like
<main>
or the product details wrapper.Ensure responsiveness
Verify that the gallery looks great on all screen sizes.
Tip for mobile: Most mobile PDPs use a single-column layout, so the gallery will naturally take the full width. Simply place it in the correct section within the theme editor. In many cases, you’ll only need CSS adjustments for desktop layouts.