Text columns with Images: Image links

When using Text columns with images - If you'd like the image to be your link, then simply keep your Button label blank and still include a Button link:

(1) Add your image

(2) Leave the Button label blank

(3) Include your link

Result:

The image is clickable, direct link to the URL you provided in Button link. No button is shown when you handle the link this way. 


Custom method which provides both a button and linked image

If you'd like both the image to be a link and a button, you can create a custom section which will allow both.

1

Create a new section file

You can create a new template file to add this functionality. In your Code Editor:

https://shopify.com/admin/themes/current

Choose Add a new section in the Sections folder:

Call the file:

index-columns-custom

Use the Create section button to complete:

Erase all the default code that's generated:

Replace all that code with the code from this file (use link to view code):

https://gist.githubusercontent.com/whistlerbrad/9f49d2a675928c810e21dd6392071270/raw/dc5929a02700959265464f08791dcbd0b80d7f6e/index-columns-custom.liquid

Save the file.

2

Use the new section in the Theme Editor

You can now add this new section by using your Theme Editor:

https://shopify.com/admin/themes/current/editor

When you Add a new section:

Look for:

Add the new custom section:

After you've configured an image and added both a Button label and Button link, both the image and button will be links:

Still need help? Contact Us Contact Us