How to make clickable image and heading - Debut theme

Solved
Highlighted
Tourist
12 0 1

Hi! I want to make the picture and the heading instead of using button. It is a image with text section on Debut theme.

 

Website: https://hygienic-care.com

pass: yewbra

 

 

 

button.png

0 Likes
Highlighted
Shopify Partner
9340 1183 3274

This is an accepted solution.

@nyebalac 

Thanks for post

can you please update this code 

1. Go to Online Store->Theme->Edit code
2. section->/feature-row.liquid->paste below code at the file.

<div class="page-width feature-row">
  {% capture image_layout %}
    <div class="feature-row__item">
       <a href="{{ section.settings.button_link }}" class="btn">
      {% if section.settings.image != blank %}
        {{ section.settings.image | img_url: '600x600' | img_tag: section.settings.image.alt, 'feature-row__image' }}
      {% else %}
        {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
      {% endif %}
      </a>
    </div>
  {% endcapture %}

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

    <div class="feature-row__item feature-row__text feature-row__text--{{ section.settings.layout }}">
      {% if section.settings.title != blank %}
       <a href="{{ section.settings.button_link }}" class="btn">
        <h2 class="h3">{{ section.settings.title | escape }}</h2>
      </a>
      {% endif %}
      {% if section.settings.text != blank %}
        <div class="rte-setting 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>

    {% if section.settings.layout == 'right' %}
      {{ image_layout }}
    {% endif %}
  </div>
</div>

{% schema %}
  {
    "name": "Image with text",
    "class": "index-section",
    "settings": [
      {
        "type": "image_picker",
        "id": "image",
        "label": "Image"
      },
      {
        "type": "select",
        "id": "layout",
        "label": "Layout",
        "default": "left",
        "options": [
          {
            "value": "left",
            "label": "Image on left"
          },
          {
            "value": "right",
            "label": "Image on right"
          }
        ]
      },
      {
        "type": "text",
        "id": "title",
        "label": "Heading",
        "default": "Image with text"
      },
      {
        "type": "richtext",
        "id": "text",
        "label": "Text",
        "default": "<p>Pair large text with an image to give focus to your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>"
      },
      {
        "type": "text",
        "id": "button_label",
        "label": "Button label"
      },
      {
        "type": "url",
        "id": "button_link",
        "label": "Button link"
      }
    ],
    "presets": [
      {
        "name": "Image with text",
        "category": "Image"
      }
    ]
  }
{% endschema %}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Highlighted
Tourist
12 0 1

I get this error when I click save.

 

error.png

0 Likes
Highlighted
Shopify Partner
9340 1183 3274

replace all code not copy pate

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Tourist
12 0 1

Thank you so much, it works now! The only problem is that the hading is not alligned to the left, it is centered.

 

 

center.png

0 Likes
Highlighted
Shopify Partner
9340 1183 3274

This is an accepted solution.

Add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

 

div#shopify-section-1589021072533 a.btn {
    text-align: left;
    padding: 0;
}

 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Highlighted
New Member
2 0 2

This isn't working for me.

I've replaced all of the code with yours, however the button still appears... 

Am i doing something wrong?

Highlighted
Shopify Partner
9340 1183 3274

Hello, @Mimba 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Highlighted
New Member
2 0 2

Hey @KetanKumar 

https://mimba.co.uk/ is the URL, ideally id like to be able to link the sale banner if possible! 

Thanks!

Highlighted
Shopify Partner
9340 1183 3274

@Mimba 

Thanks for url.

sorry but i can see any button at home can you please give me store url?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes