Linking an image to an external link

Solved
New Member
5 0 0

I added a section "Image With Text" and I want the image to act as a hyper link.

How can i do this?

 

My website is:

genxcollectibles.com

0 Likes
Astronaut
1003 129 235

What theme are you using? This will have to be done in the section itself.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Highlighted
New Member
5 0 0

Debut theme

I attempted to find how to do it, but I cannot seem to figure out how to make the image clickable to go to an external link

0 Likes
Astronaut
1003 129 235

Go into your feature-row.liquid in your sections folder. Scroll down to the {% schema %} tags and find the "image_picker" setting. Copy and paste it below and change the type to "text", the id to "image_link" and the label to "Image Link", for the english version anyway, I just added link to all the languages. Should looke like this, image picker above and what you added below:

      {
        "type": "image_picker",
        "id": "image",
        "label": {
          "en": "Image",
          "de": "Foto",
          "fr": "Image"
        }
      },
      {
        "type": "text",
        "id": "image_link",
        "label": {
          "en": "Image Link",
          "de": "Foto Link",
          "fr": "Image Link"
        }
      },

Then scroll up to your <img> tag and add an anchor tag around it with {{ section.settings.image_link}} as the href:

 

section-help3.jpg

 

Now in your customize editor there should be a field with "Image Link" that you can type a url into. Be sure to include http:// or https:// with your url or else it links relative to your site. 

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
New Member
5 0 0

Unfortunately this did not work as I received an error message:

 

This file contains the following errors:
  • Error: Invalid JSON in tag 'schema'
0 Likes
Astronaut
1003 129 235

You made a mistake in the schema somewhere. I assume you havent changed anything else, so I will just give you my schema code.

{% schema %}
  {
    "name": {
      "en": "Image with text",
      "de": "Foto mit Text",
      "fr": "Image avec du texte"
    },
    "class": "index-section",
    "settings": [
      {
        "type": "image_picker",
        "id": "image",
        "label": {
          "en": "Image",
          "de": "Foto",
          "fr": "Image"
        }
      },
      {
        "type": "text",
        "id": "image_link",
        "label": {
          "en": "Image Link",
          "de": "Foto Link",
          "fr": "Image Link"
        }
      },
      {
        "type": "select",
        "id": "layout",
        "label": {
          "en": "Image alignment",
          "de": "Fotoausrichtung",
          "fr": "Alignement de l'image"
        },
        "default": "left",
        "options": [
          {
            "value": "left",
            "label": {
              "en": "Left",
              "de": "Links",
              "fr": "Gauche"
            }
          },
          {
            "value": "right",
            "label": {
              "en": "Right",
              "de": "Rechts",
              "fr": "Droite"
            }
          }
        ]
      },
      {
        "type": "text",
        "id": "title",
        "label": {
          "en": "Heading",
          "de": "Titel",
          "fr": "En-tête"
        },
        "default": {
          "en": "Image with text",
          "de": "Foto mit Text",
          "fr": "Image avec du texte"
        }
      },
      {
        "type": "richtext",
        "id": "text",
        "label": {
          "en": "Text",
          "de": "Text",
          "fr": "Texte"
        },
        "default": {
          "en": "<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>",
          "de": "<p>Kombinieren Sie große Schrift mit einem Foto, um einen Fokus auf Ihr ausgewähltes Produkt, die Kategorie oder einen Blogpost zu legen. Dazu Details zur Verfügbarkeit, Stil oder ein Review.</p>",
          "fr": "<p>Ajoutez une image à un long texte pour mettre l'accent sur un produit de votre choix, une collection, ou un article de blog. Ajoutez des détails sur la disponibilité, le style, ou mettez un commentaire client en avant.</p>"
        }
      },
      {
        "type": "text",
        "id": "button_label",
        "label": {
          "en": "Button label",
          "de": "Button-Etikett",
          "fr": "Texte du bouton"
        }
      },
      {
        "type": "url",
        "id": "button_link",
        "label": {
          "en": "Button link",
          "de": "Button-Link",
          "fr": "Lien du bouton"
        }
      }
    ],
    "presets": [
      {
        "name": {
          "en": "Image with text",
          "de": "Foto mit Text",
          "fr": "Image avec texte"
        },
        "category": {
          "en": "Image",
          "de": "Foto",
          "fr": "Image"
        }
      }
    ]
  }
{% endschema %}
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
New Member
5 0 0

Honestly, I have no idea what that did but it made things worse as now I can't add "Image with Text" as it doesn't give me the "ADD" option 


@Ninthony wrote:

You made a mistake in the schema somewhere. I assume you havent changed anything else, so I will just give you my schema code.

{% schema %}
  {
    "name": {
      "en": "Image with text",
      "de": "Foto mit Text",
      "fr": "Image avec du texte"
    },
    "class": "index-section",
    "settings": [
      {
        "type": "image_picker",
        "id": "image",
        "label": {
          "en": "Image",
          "de": "Foto",
          "fr": "Image"
        }
      },
      {
        "type": "text",
        "id": "image_link",
        "label": {
          "en": "Image Link",
          "de": "Foto Link",
          "fr": "Image Link"
        }
      },
      {
        "type": "select",
        "id": "layout",
        "label": {
          "en": "Image alignment",
          "de": "Fotoausrichtung",
          "fr": "Alignement de l'image"
        },
        "default": "left",
        "options": [
          {
            "value": "left",
            "label": {
              "en": "Left",
              "de": "Links",
              "fr": "Gauche"
            }
          },
          {
            "value": "right",
            "label": {
              "en": "Right",
              "de": "Rechts",
              "fr": "Droite"
            }
          }
        ]
      },
      {
        "type": "text",
        "id": "title",
        "label": {
          "en": "Heading",
          "de": "Titel",
          "fr": "En-tête"
        },
        "default": {
          "en": "Image with text",
          "de": "Foto mit Text",
          "fr": "Image avec du texte"
        }
      },
      {
        "type": "richtext",
        "id": "text",
        "label": {
          "en": "Text",
          "de": "Text",
          "fr": "Texte"
        },
        "default": {
          "en": "<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>",
          "de": "<p>Kombinieren Sie große Schrift mit einem Foto, um einen Fokus auf Ihr ausgewähltes Produkt, die Kategorie oder einen Blogpost zu legen. Dazu Details zur Verfügbarkeit, Stil oder ein Review.</p>",
          "fr": "<p>Ajoutez une image à un long texte pour mettre l'accent sur un produit de votre choix, une collection, ou un article de blog. Ajoutez des détails sur la disponibilité, le style, ou mettez un commentaire client en avant.</p>"
        }
      },
      {
        "type": "text",
        "id": "button_label",
        "label": {
          "en": "Button label",
          "de": "Button-Etikett",
          "fr": "Texte du bouton"
        }
      },
      {
        "type": "url",
        "id": "button_link",
        "label": {
          "en": "Button link",
          "de": "Button-Link",
          "fr": "Lien du bouton"
        }
      }
    ],
    "presets": [
      {
        "name": {
          "en": "Image with text",
          "de": "Foto mit Text",
          "fr": "Image avec texte"
        },
        "category": {
          "en": "Image",
          "de": "Foto",
          "fr": "Image"
        }
      }
    ]
  }
{% endschema %}

 

0 Likes
Astronaut
1003 129 235

Go to "Older Versions" at the top and revert back to your original, make sure that clears up your problem, then try adding the schema again and placing the link around the image tag. If you can't get it if you give me your shop url I can request access to your site and fix it for you.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
New Member
5 0 0

So I reverted, copied the schema and added the href 

 

However, the existing images that I am attempting to link are not giving me any options to link them to external links.

There are 2 sections on my main page that are "affiliates" and I am trying to have the logo images that I uploaded to the site link out to an external.

 

Maybe we are having confusion as to what I am requesting/needing?

0 Likes

Success.

Astronaut
1003 129 235

Im pretty sure I understand what you want. You just want the user to be able to click the image and go to a different website, correct? These modifications should add an option in your section which would be an input field. You should be able to type a url into the input field and in turn it would inject that into the anchor tag in the section. Here's a screen shot of my section, I am hovering the photo and you can see it links to google in the bottom left corner, and you can see the input field above it:

section-help4.jpg

 

Is this what you're asking? If so and you can't get it working, just send me a personal message with your store url and I can request access and try to get it working for you.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes