Custom Liquid section - centering content

Technical Q&A

Topic summary

A user added a custom Liquid section for partner logos to their Shopify Studio theme using code from a Shopify blog tutorial. The logos currently display at full page width, but the user needs to add left and right padding to match other sections on their site (barnochata.com).

A support representative from PageFly provided a CSS solution:

Steps to implement:

  • Navigate to Online Store → Theme → Edit code
  • Open the base.css file
  • Add custom CSS targeting the logo section ID to apply:
    • Auto margins (0 auto)
    • Max-width using CSS variable (var(–page-width))
    • 5rem padding
    • !important flags to ensure styles apply

The solution constrains the logo section width and centers it to match the theme’s existing layout pattern. The discussion appears resolved with a concrete implementation provided.

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

Hi,

I have added a custom liquid section to my theme (Studio) to display partner logos. The code was taken from shopify blog.

I now need help to add padding to this section, as its currently full page width, whereas all other sections within the theme have thick padding on left and right - see barnochata.com (bottom of home page).

Code as added to the theme:


  ## {{ section.settings.title | escape }}
  {% if section.blocks.size > 0 %}
    
      {% for block in section.blocks %}
        - {% if block.settings.link != blank %}
            
            {% endif %}
            {% if block.settings.image != blank %}
              {{ block.settings.image | img_url: '150x150', scale: 2 | img_tag: block.settings.image.alt, 'logo-bar__image' }}
            {% else %}
              {{ 'logo' | placeholder_svg_tag: 'placeholder-svg' }}
            {% endif %}
            {% if block.settings.link != blank %}
            
            {% endif %}
        
      {% endfor %}
    

  {% endif %}

{% schema %}
  {
    "name": "Logo list",
    "class": "index-section",
    "max_blocks": 15,
    "settings": [
      {
        "type": "text",
        "id": "title",
        "label": "Heading",
        "default": "Logo list"       
      },
	  {
        "type": "select",
        "id": "logo_width",
        "label": "Logo width",
        "default": "150px",
        "options": [
          {
            "label": "Extra Small",
            "value": "100px"
          },
          {
            "label": "Small",
            "value": "125px"
          },
          {
            "label": "Medium",
            "value": "150px"
          },
          {
            "label": "Large",
            "value": "175px"
          },
          {
            "label": "Extra Large",              
            "value": "200px"
          }
        ]
      }
    ],
    "blocks": [
      {
        "type": "logo_image",
        "name": "Logo",
        "settings": [
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
          },
          {
            "type": "url",
            "id": "link",
            "label": "Link",
            "info": "Optional"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Logo list",
        "category": "Image",
        "blocks": [
          {
            "type": "logo_image"
          },
          {
            "type": "logo_image"
          },
          {
            "type": "logo_image"
          },
          {
            "type": "logo_image"
          }
        ]
      }
    ]
  }
{% endschema %}
2

Hi @naximov

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

div#shopify-section-template–17313793868025__logo_WqxEFe {

margin: 0 auto !important;

max-width: var(–page-width) !important;

padding: 0 5rem !important;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly