Re: Custom Liquid section - centering content

Solved

Custom Liquid section - centering content

naximov
Tourist
8 0 2

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:

 

 

<style>
  .logo-bar-section {
    max-width: {{ section.settings.logo_width }};
    display: inline-block;
    margin: 0 27.5px 35px;
    text-align: center;
  }
</style>
<div>
  <h2>{{ section.settings.title | escape }}</h2>
  {% if section.blocks.size > 0 %}
    <ul>
      {% for block in section.blocks %}
        <li class="logo-bar-section" {{ block.shopify_attributes }}>
          {% if block.settings.link != blank %}
            <a href="{{ block.settings.link }}">
          {% 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 %}
            </a>
          {% endif %}
        </li>
      {% endfor %}
    </ul>
  {% endif %}
</div>
{% 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 %}

 

Accepted Solution (1)

PageFly-Henry
Shopify Partner
1184 335 294

This is an accepted solution.

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Reply 1 (1)

PageFly-Henry
Shopify Partner
1184 335 294

This is an accepted solution.

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.