Hi there Shopify community,
I have an issue with a button out position on a Minimal theme. Can you please guide me on how to position the “Shop Women” button in the same margins as “Shop Men”, please look at screen shot below for reference.
Thanks a million
If I understand you correctly, you want to move the SHOP WOMEN button to the right, so it’s closer to the image.
Here’s a possible solution to do that, maybe it’s not the best, but could give the result you want, you can try experimenting yourself, right now it might not give you what you want on a small screen or if you add a title and description.
The code for this is in the feature-row.liquid file in your sections folder. I added a piece of inline css code to float the button to the right if the image is set to the right side. The code before the {% schema %} part would change to this:
{% capture image_layout %}
{% if section.settings.image != blank %}
{% capture img_id %}FeatureRowImage--{{ section.id }}{% endcapture %}
{% capture img_wrapper_id %}FeatureRowImageWrapper--{{ section.id }}{% endcapture %}
{% include 'image-style' with image: section.settings.image, width: 700, height: 640, wrapper_id: img_wrapper_id, img_id: img_id %}
{%- assign img_url = section.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% else %}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
{% endcapture %}
{% if section.settings.layout == 'left' %}
{{ image_layout }}
{% endif %}
{% if section.settings.layout == 'left' %}
{% if section.settings.title != blank %}
## {{ section.settings.title | escape }}
{% endif %}
{% if section.settings.text != blank %}
{{ section.settings.text }}
{% endif %}
{% if section.settings.button_label != blank and section.settings.button_link != blank %}
{{ section.settings.button_label | escape }}
{% endif %}
{% endif %}
{% if section.settings.layout == 'right' %}
{% if section.settings.title != blank %}
## {{ section.settings.title | escape }}
{% endif %}
{% if section.settings.text != blank %}
{{ section.settings.text }}
{% endif %}
{% if section.settings.button_label != blank and section.settings.button_link != blank %}
{{ section.settings.button_label | escape }}
{% endif %}
{% endif %}
{% if section.settings.layout == 'right' %}
{{ image_layout }}
{% endif %}
:
Hi Alan,
Brilliant! Thanks a million for your help! I have got exactly what I was expecting and in the exact margins. Just one thing Alan which proportion of the code did you adjust just for future reference or adjustments.
Many thanks again!
That’s a good idea in case you need to go back.
The code I changed in the original was from around line 36 to 48 (the numbers might be a bit different for you), it’s this part:
{% if section.settings.title != blank %}
## {{ section.settings.title | escape }}
{% endif %}
{% if section.settings.text != blank %}
{{ section.settings.text }}
{% endif %}
{% if section.settings.button_label != blank and section.settings.button_link != blank %}
{{ section.settings.button_label | escape }}
{% endif %}
And I replaced it with this; it’s more or less the same code repeated, just checking if the image is right or left and moving the button over if the image is on the right.
{% if section.settings.layout == 'left' %}
{% if section.settings.title != blank %}
## {{ section.settings.title | escape }}
{% endif %}
{% if section.settings.text != blank %}
{{ section.settings.text }}
{% endif %}
{% if section.settings.button_label != blank and section.settings.button_link != blank %}
{{ section.settings.button_label | escape }}
{% endif %}
{% endif %}
{% if section.settings.layout == 'right' %}
{% if section.settings.title != blank %}
## {{ section.settings.title | escape }}
{% endif %}
{% if section.settings.text != blank %}
{{ section.settings.text }}
{% endif %}
{% if section.settings.button_label != blank and section.settings.button_link != blank %}
{{ section.settings.button_label | escape }}
{% endif %}
{% endif %}