How to move a button's position horizontally

Solved
ragscity
New Member
2 0 0

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.

 

Screenshot 2020-12-27 at 08.07.43.png

 

Thanks a million

0 Likes
Alan15
Pathfinder
93 21 25

This is an accepted solution.

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:

<div class="page-width feature-row">
  {% capture image_layout %}
    <div class="feature-row__item">
      {% if section.settings.image != blank %}
        <noscript>
          {{ section.settings.image | img_url: '640x640' | img_tag: section.settings.image.alt }}
        </noscript>

        {% 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.' -%}
        <div id="{{ img_wrapper_id }}" class="feature-row__image-wrapper supports-js">
          <div style="padding-top:{{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100}}%;">
            <img id="{{ img_id }}"
                 class="feature-row__image lazyload"
                 src="{{ section.settings.image | img_url: '300x300' }}"
                 data-src="{{ img_url }}"
                 data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048]"
                 data-aspectratio="{{ section.settings.image.aspect_ratio }}"
                 data-sizes="auto"
                 alt="{{ section.settings.image.alt | escape }}">
          </div>
        </div>
      {% else %}
        {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
      {% endif %}
    </div>
  {% endcapture %}

  <div class="feature-row">
    {% if section.settings.layout == 'left' %}
      {{ image_layout }}
    {% endif %}
  {% if section.settings.layout == 'left' %}
    <div class="feature-row__item feature-row__text feature-row__text--{{ section.settings.layout }}">
      {% if section.settings.title != blank %}
        <h2>{{ section.settings.title | escape }}</h2>
      {% endif %}
      {% if section.settings.text != blank %}
        <div class="rte featured-row__subtext">{{ section.settings.text }}</div>
      {% endif %}
      {% if section.settings.button_label != blank and section.settings.button_link != blank %}
        <a href="{{ section.settings.button_link }}" class="btn">
          {{ section.settings.button_label | escape }}
        </a>
      {% endif %}
    </div>
     {% endif %}
    
 {% if section.settings.layout == 'right' %}
      <div class="feature-row__item feature-row__text feature-row__text--{{ section.settings.layout }}">
      {% if section.settings.title != blank %}
        <h2>{{ section.settings.title | escape }}</h2>
      {% endif %}
      {% if section.settings.text != blank %}
        <div class="rte featured-row__subtext">{{ section.settings.text }}</div>
      {% endif %}
      {% if section.settings.button_label != blank and section.settings.button_link != blank %}
        <a style="float:right;" href="{{ section.settings.button_link }}" class="btn">
          {{ section.settings.button_label | escape }}
        </a>
      {% endif %}
    </div>
 {% endif %}
    
    {% if section.settings.layout == 'right' %}
      {{ image_layout }}
    {% endif %}
  </div>
</div>

:

0 Likes
ragscity
New Member
2 0 0

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!

0 Likes
Alan15
Pathfinder
93 21 25

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:

<div class="feature-row__item feature-row__text feature-row__text--{{ section.settings.layout }}">
{% if section.settings.title != blank %}
<h2>{{ section.settings.title | escape }}</h2>
{% endif %}
{% if section.settings.text != blank %}
<div class="rte featured-row__subtext">{{ section.settings.text }}</div>
{% endif %}
{% if section.settings.button_label != blank and section.settings.button_link != blank %}
<a href="{{ section.settings.button_link }}" class="btn">
{{ section.settings.button_label | escape }}
</a>
{% endif %}
</div>

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' %}
    <div class="feature-row__item feature-row__text feature-row__text--{{ section.settings.layout }}">
      {% if section.settings.title != blank %}
        <h2>{{ section.settings.title | escape }}</h2>
      {% endif %}
      {% if section.settings.text != blank %}
        <div class="rte featured-row__subtext">{{ section.settings.text }}</div>
      {% endif %}
      {% if section.settings.button_label != blank and section.settings.button_link != blank %}
        <a href="{{ section.settings.button_link }}" class="btn">
          {{ section.settings.button_label | escape }}
        </a>
      {% endif %}
    </div>
     {% endif %}
    
 {% if section.settings.layout == 'right' %}
      <div class="feature-row__item feature-row__text feature-row__text--{{ section.settings.layout }}">
      {% if section.settings.title != blank %}
        <h2>{{ section.settings.title | escape }}</h2>
      {% endif %}
      {% if section.settings.text != blank %}
        <div class="rte featured-row__subtext">{{ section.settings.text }}</div>
      {% endif %}
      {% if section.settings.button_label != blank and section.settings.button_link != blank %}
        <a style="float:right;" href="{{ section.settings.button_link }}" class="btn">
          {{ section.settings.button_label | escape }}
        </a>
      {% endif %}
    </div>
 {% endif %}

 

0 Likes