Skip to main content

Adding Custom CSS to Your Tolstoy Media Gallery

Mikaela Lasig avatar
Written by Mikaela Lasig
Updated this week

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:

  1. 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.

  2. 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.

  3. 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.

Did this answer your question?