Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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 %}
Solved! Go to the solution
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.
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.
Find Global Growth Opportunities For Your Business with Shopify AcademyLearn how to exp...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025