Make entire tile clickable

[INFRA]

Hi there,

I would like to make these tiles fully clickable. Currently only the text is clickable but I want the image to be clickable too (going to the same link).

Website

password: fbc

Thanks so much!

[rajweb]

Hey @INFRA ,

To make the entire tile (both the text and image) clickable in Shopify, you’ll need to wrap the image and text elements in an anchor tag, which links to the desired page.

Follow these steps:

1. Online Store > theme > Edit code.

2. Look for the Liquid file responsible for rendering the tiles. It could be in sections like featured-product.liquid, collection.liquid or a custom section for the tiles.

3. Modify the code: Locate the HTML structure for each tile. Currently, the clickable link is likely around the text only. Modify it by wrapping the entire tile (including both the image and the text) with an anchor tag.

Before:

  
    
  
  ## {{ product.title }}

After:

  

    
    ## {{ product.title }}
  

4. Save your changes and check the store to ensure the entire tile is now clickable.

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regard,

Rajat Sharma

[INFRA]

hi, thanks for your reply!

It looks like this section is structured a little differently. The only ahref code is used for the button. Any chance you can see where to put with the below code?

    

      {% if heading != blank %}
        

          {{ heading }}
        

      {% endif %}      
      
        

          {% for block in section.blocks %}
            

              

                {% if block.settings.image != blank %}
                  
                {% else %}
                  {{ 'image' | placeholder_svg_tag }}
                {% endif %}
                

                  {% if block.settings.percent > 0 %}
                    

                      

                    
                     
                  {% endif %}
                  {% if block.settings.percent_text != blank %} 
                    
                      {{ block.settings.percent_text }}
                    

                  {% endif %}                  
                
                
              
               
              
                {% if block.settings.title != blank %}
                  

                    {{ block.settings.title }}
                  

                {% endif %}
                {% if block.settings.text != blank %}
                  
                    {{ block.settings.text }}
                  
  
                {% endif %}

[rajweb]

    

      {% if heading != blank %}
        

          {{ heading }}
        

      {% endif %}      
      
        

          {% for block in section.blocks %}
            

              
                

                  {% if block.settings.image != blank %}
                    
                  {% else %}
                    {{ 'image' | placeholder_svg_tag }}
                  {% endif %}
                  

                    {% if block.settings.percent > 0 %}
                      

                        

                      
                     
                    {% endif %}
                    {% if block.settings.percent_text != blank %} 
                      
                        {{ block.settings.percent_text }}
                      

                    {% endif %}                  
                  
                
                
               
                
                  {% if block.settings.title != blank %}
                    

                      {{ block.settings.title }}
                    

                  {% endif %}
                  {% if block.settings.text != blank %}
                    
                      {{ block.settings.text }}
                    
  
                  {% endif %}
                

              
            

          {% endfor %}
        

      

    

Make sure that the block.setting.link contains the desired URL for each tile. If your data structure is different, you may need to adjust that part accordingly.

After making these changes, save the file and check your store to ensure that clicking anywhere on the tile redirects users to the specified link. Let me know if you need any further assistance!

[INFRA]

thank you!

Just double-checking, this way I would have to manually code the link for each tile, instead of it automatically going to the same link as the title?

[rajweb]

If you want the links for each tile to automatically correspond to the titles (or to a specific link pattern) without having to manually set a link for each one, you can adjust your code accordingly.

Here’s the updated code with the title used to create the link automatically:

    

      {% if heading != blank %}
        

          {{ heading }}
        

      {% endif %}      
      
        

          {% for block in section.blocks %}
            

              
                

                  {% if block.settings.image != blank %}
                    
                  {% else %}
                    {{ 'image' | placeholder_svg_tag }}
                  {% endif %}
                  

                    {% if block.settings.percent > 0 %}
                      

                        

                      
                     
                    {% endif %}
                    {% if block.settings.percent_text != blank %} 
                      
                        {{ block.settings.percent_text }}
                      

                    {% endif %}                  
                  
                
                
               
                
                  {% if block.settings.title != blank %}
                    

                      {{ block.settings.title }}
                    

                  {% endif %}
                  {% if block.settings.text != blank %}
                    
                      {{ block.settings.text }}
                    
  
                  {% endif %}
                

              
            

          {% endfor %}
        

      

    

This way, the link for each tile will correspond directly to the title, and you won’t have to manually code a separate link for each tile! Let me know if you have any other questions or need further adjustments!

[INFRA]

that’s amazing! I can click the entire tile now, however the URL construction is slightly off:

.com/pages/h3-a-href-pages-lake-macquarie-title-lake-macquarie-lake-macquarie-a-h3

and it would need to be: pages/lake-macquarie

[rajweb]

The URL you’re seeing is being generated with the HTML tags included in the title, which is why you’re getting a URL like:

.com/pages/h3-a-href-pages-lake-macquarie-title-lake-macquarie-lake-macquarie-a-h3

Instead of:

/pages/lake-macquarie

This issue can be fixed by making sure that we extract just the text from the title, stripping away any HTML tags, and then applying the handle filter.

You can use both strip_html and handle filters to ensure the title is converted to a clean, URL-friendly format.

1. strip_html: Removes any HTML tags that might be in the title, ensuring that the text content is extracted.

2. handle: Converts the plain text title into a URL-friendly string (lowercase and hyphenated).

If the title is:

### Lake Macquarie

This code will generate:

/pages/lake-macquarie

Full Updated Code Block:

  
    

      {% if block.settings.image != blank %}
        
      {% else %}
        {{ 'image' | placeholder_svg_tag }}
      {% endif %}
    
               
    
      {% if block.settings.title != blank %}
        

          {{ block.settings.title }}
        

      {% endif %}
      {% if block.settings.text != blank %}
        
          {{ block.settings.text }}
        
  
      {% endif %}
    

  

With this fix, the URL construction will strip any unnecessary HTML tags and properly format the title as the URL slug, ensuring that it matches your desired format.

Let me know if this works for you?

[INFRA]

hi, thanks again!

this actually made the section break, could there be a little error in it?