How to remove padding in custom liquid for product availability text?

Store Design

Topic summary

A user is experiencing unwanted padding on custom Liquid code that displays product availability text (“Délais de livraison: 10 - 15 jours ouvrés”) on their Shopify product pages. The padding affects alignment with other elements, and when positioned above other components in the product information section, those components inherit the same padding.

Three solutions were proposed:

  1. Moeed’s approach: Add CSS code in theme.liquid file above the </body> tag to target the padding issue.

  2. Made4uo-Ribe’s solution: Navigate to the CSS file (base.css, style.css, or theme.css) in the Assets folder and add:

.product__info-container.page-width {
  padding-left: 0px !important;
}
  1. PageFly-Henry’s method: Search for base.css file and paste code targeting .product__info-wrapper.grid__item with padding: 0 !important;

All solutions involve adding CSS overrides to remove the padding, with slight variations in targeting specific classes. The discussion remains open as the original poster has not confirmed which solution worked.

Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.
1

Hello, I’m using a custom liquid to display a text that changes when a product is in stock or not. I created it under the production information section. Also if I put it above other component in the production information section everything under it will inherint the same padding.

I need help to remove the padding and make my text allign with everything

Shop link: https://07bab0-2.myshopify.com/password
Shop code: Karamel

In any product information you can find a text which comme from the liquid code: “Délais de livraison: 10 - 15 jours ouvrés” the number can change if the product have stock or not anyway it’s this one I’m having an issue with.

This what I found when inspecting the page

Capture d'écran 2024-01-18 194723.png
Capture d'écran 2024-01-18 194723.png275×204 3.33 KB

Capture d'écran 2024-01-18 194829.png
Capture d'écran 2024-01-18 194829.png1535×1128 147 KB

My custom liquid code


{% if product.available %}
  {% assign stock_quantity = product.variants.first.inventory_quantity %}
  

    {% if stock_quantity > 0 %}
      

Délais de livraison: 7 - 10 ouvrés {{ shop.metaobjects['sous_categorie']['.nom'] }}

    {% else %}
      

Délais de livraison: 10 - 15 jours ouvrés

    {% endif %}
  

{% endif %}
1 Like
2

Hey @FR-ASC

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1705604515233.png
Moeed_0-1705604515233.png1149×897 176 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
3

Hi @FR-ASC

Check this one.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.product__info-container .page-width {
    padding-left: 0px !important;
}

And save.

Result:

Made4uoRibe_0-1705614411677.png
Made4uoRibe_0-1705614411677.png545×258 8.63 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

4

Hi @FR-ASC

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

.product__info-wrapper.grid__item.scroll-trigger.animate–slide-in .page-width {

padding: 0 !IMPORTANT;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly