Brooklyn Theme- Image with text- need text under image

Solved
Highlighted
Tourist
9 0 0

Hi,

I am using Brooklyn theme and in the image with text option i want to move the text below the image.

The final result i am expecting is image at the center and then text underneath it. site link is: https://blisstubox.ca/

pwd is- newday

Looking forward for your help.

Thanks

Mandeep

 

0 Likes
Highlighted
Tourist
32 10 8

@Mandeepgill,

 

First, navigate to the Shopify online code editor. If you haven't done this before, check out this link:

https://shopify.dev/tutorials/develop-theme-getting-started-choosing-an-editor

 

Here, you want to modify 2 files:

  1. featured-row.liquid (found in the Sections folder)
  2. theme.scss.liquid (found in the Assets folder)

 

NOTE: Before editing your theme code, it's important to save a backup of your theme.

 

featured-row.liquid

Change line 4 from this:

      <div class="feature-row__item">

... to this:

      <div class="feature-row__item feature-row__item--{{ section.settings.layout }}">

 

... and change lines 25–26 from this:

    <div class="feature-row">
      {% if section.settings.layout == 'left' %}

... to this:

    <div class="feature-row feature-row--{{ section.settings.layout }}">
      {% if section.settings.layout == 'left' or section.settings.layout == 'center' %}

 

... and finally, between lines 163 and 164, add this:

        {
          "value": "center",
          "label": {
            "cs": "Na střed",
            "da": "Centreret",
            "de": "Mitte",
            "en": "Center",
            "es": "Centrar",
            "fi": "Keskitetty",
            "fr": "Centre",
            "hi": "केंद्र",
            "it": "Al centro",
            "ja": "中央",
            "ko": "센터",
            "nb": "Sentrer",
            "nl": "Midden",
            "pl": "Do środka",
            "pt-BR": "Centro",
            "pt-PT": "Centro",
            "sv": "Centrera",
            "th": "ตรงกลาง",
            "tr": "Orta",
            "vi": "Ở giữa",
            "zh-CN": "居中",
            "zh-TW": "置中"
          }
        },

 

theme.scss.liquid

Add the following code to the bottom of the file:

.feature-row--center {
  display: block;
}

.feature-row__item--center {
  .feature-row__image-wrapper {
    margin-left: auto;
    margin-right: auto;

    @media only screen and (min-width: 769px) {
      max-width: 50%;
    }
  }

  .placeholder-svg {
    display: block;
    margin-left: auto;
    margin-right: auto;

    @media only screen and (min-width: 769px) {
      max-width: 50%;
    }
  }
}

.feature-row__text--center {
  margin-left: auto;
  margin-right: auto;
  
  @media only screen and (min-width: 769px) {
    max-width: 50%;
  }
}

 

Following these changes, you will have an additional option in your theme customizer to set the Image alignment to Center. Previous Image alignment options will continue to work as normal. If you don't see the changes straight away, you may need to empty your browser cache and hard reload the page.

 

Screenshot 2020-08-31 at 12.29.07.png

 

I hope this helps.

 

Was your problem solved? Please mark this post as an Accepted Solution
1 Like
Highlighted
Tourist
9 0 0

Thanks ThemuMitch for the detailed steps. I am able to add the center align and it works but i ended up with lot of blank space between image and underlying text!

Is there a way to remove the extract space?

Thanks

Mandeep

 

0 Likes
Highlighted
Tourist
32 10 8

This is an accepted solution.

Hi Mandeep,

 

Oh I see. I've added a couple more lines to the theme.scss.liquid file. Please could you replace the previous code with this code?

.feature-row--center {
  display: block;
}

.feature-row__item--center {
  .feature-row__image-wrapper {
    margin-left: auto;
    margin-right: auto;
    padding-top: 0 !important;

    @media only screen and (min-width: 769px) {
      max-width: 50%;
    }
  }

  .feature-row__image {
    position: static;
  }

  .placeholder-svg {
    display: block;
    margin-left: auto;
    margin-right: auto;

    @media only screen and (min-width: 769px) {
      max-width: 50%;
    }
  }
}

.feature-row__text--center {
  margin-left: auto;
  margin-right: auto;
  
  @media only screen and (min-width: 769px) {
    max-width: 50%;
  }
}

 

That should remove the excess space.

Was your problem solved? Please mark this post as an Accepted Solution
0 Likes
Highlighted
Tourist
9 0 0

Thanks a lot Themumitch! its works great

Would you mind helping me to get two buttons on hero slider (I already have one, added directly from slider) That will help me a lot!

Thanks, Have a great day.

Mandeep

0 Likes
Highlighted
Tourist
32 10 8

This is an accepted solution.

Hi Mandeep,

 

To add an extra button to the Slideshow section of the Brooklyn theme, open up the Shopify online code editor. Here, you want to modify 2 files:

  1. slideshow.liquid (found in the Sections folder)
  2. theme.scss.liquid (found in the Assets folder)

 

NOTE: Before editing your theme code, it's important to save a backup of your theme.

 

slideshow.liquid

Below line 1223, add the following code:

        {
          "type": "text",
          "id": "button_label_alt",
          "label": {
            "cs": "Text tlačítka",
            "da": "Knaptekst",
            "de": "Schaltflächenbezeichnung",
            "en": "Button label",
            "es": "Etiqueta de botón",
            "fi": "Tekstipainike",
            "fr": "Texte du bouton",
            "hi": "बटन लेबल",
            "it": "Etichetta pulsante",
            "ja": "ボタンのラベル",
            "ko": "버튼 레이블",
            "nb": "Knappetikett",
            "nl": "Knoplabel",
            "pl": "Przycisk z etykietą",
            "pt-BR": "Etiqueta de botão",
            "pt-PT": "Etiqueta do botão",
            "sv": "Knappetikett",
            "th": "ป้ายกำกับปุ่ม",
            "tr": "Düğme etiketi",
            "vi": "Nhãn nút",
            "zh-CN": "按钮标签",
            "zh-TW": "按鈕標籤"
          },
          "default": {
            "cs": "Koupit nyní",
            "da": "Shop nu",
            "de": "Jetzt shoppen",
            "en": "Shop now",
            "es": "Compra ya",
            "fi": "Tee nyt ostoksia",
            "fr": "Acheter maintenant",
            "hi": "अभी खरीदें",
            "it": "Acquista ora",
            "ja": "今すぐ購入",
            "ko": "지금 쇼핑하기",
            "nb": "Handle nå",
            "nl": "Koop nu",
            "pl": "Kup teraz",
            "pt-BR": "Compre agora",
            "pt-PT": "Comprar agora",
            "sv": "Handla nu",
            "th": "ช้อปเลย",
            "tr": "Şimdi satın al",
            "vi": "Mua sắm ngay",
            "zh-CN": "立即购买",
            "zh-TW": "立即購物"
          }
        },
        {
          "type": "url",
          "id": "button_link_alt",
          "label": {
            "cs": "Tlačítkový odkaz",
            "da": "Knaplink",
            "de": "Schaltflächenlink",
            "en": "Button link",
            "es": "Enlace de botón",
            "fi": "Painikelinkki",
            "fr": "Lien du bouton",
            "hi": "बटन लिंक",
            "it": "Link pulsante",
            "ja": "ボタンのリンク",
            "ko": "버튼 링크",
            "nb": "Kobling for knapp",
            "nl": "Knoplink",
            "pl": "Link przycisku",
            "pt-BR": "Link de botão",
            "pt-PT": "Ligação do botão",
            "sv": "Knapplänk",
            "th": "ลิงก์ปุ่ม",
            "tr": "Düğme bağlantısı",
            "vi": "Liên kết trên nút",
            "zh-CN": "按钮链接",
            "zh-TW": "按鈕連結"
          }
        },

 

... and below line 141, add the following code: 

                {%- if block.settings.button_label_alt != blank and block.settings.button_link_alt != blank -%}
                  <a href="{{ block.settings.button_link_alt }}" style="color: {{ block.settings.slide_button_label_color }}; background-color: {{ block.settings.slide_button_background_color }}" class="btn hero__cta">
                    {{ block.settings.button_label_alt | escape }}
                  </a>
                {%- endif -%}

 

theme.scss.liquid

Add this code to the bottom of the file:

.hero__cta {
  margin: 12px;
}

 

Following these changes, two more fields will appear in the Brooklyn theme customizer to set up a second button per slide.

 

Screenshot 2020-09-02 at 12.29.56.png

 

I hope this helps.

Was your problem solved? Please mark this post as an Accepted Solution
1 Like
Highlighted
Tourist
9 0 0

Thanks a lot! It works Beautifully!

Have a good day.

0 Likes