How can I make photos clickable in multicolumn without a button?

Solved

How can I make photos clickable in multicolumn without a button?

mlane
Visitor
2 0 1

I am trying to make the multicolumn clickable. There are three photos and i want each to go to a separate product page but i dont want to use the button. Please help!!! 

 

Also editing in the dawn theme. 

Accepted Solution (1)

LitExtension
Shopify Partner
4901 1004 1177

This is an accepted solution.

Hi @mlane,

Please follow these steps:

- Step 1: Go to Online store > Themes > Actions > Edit code.

- Step 2: Go to sections > multicolumn.liquid and change all the code: https://pastebin.com/tvvm1EQ0

- Step 3: Go to Customize > Multicolumn. https://i.imgur.com/aMu12ba.png

Hope it is clear to you.

If my answer can help you solve your issue, please mark it as a solution. Thank you and good luck.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Contact us:
- Email: contact@litextension.com

View solution in original post

Replies 19 (19)

Lana
Shopify Staff (Retired)
849 77 109

Hello @mlane!

I wanted to confirm that we are on the same page here, so I have a screenshot showing the change you want. Please let me know if this is correct:

05-42-59492-5932

Since you are using the Dawn theme which is one of our free supported themes, I will be able to check with my team if they are able to help you out with this using your Design Time once you confirm that the above is what you're looking to do.

In the case that our team does not support this particular change, you can also look to a Shopify Expert for help with the custom coding that would be involved in making this change. Shopify Experts are people who work externally to Shopify and charge their rates based on the work that they do.

I am also seeing that this is your first post in the Community - welcome! How are you finding Shopify so far? I can see that you're already working on your theme from this request - have you already looked at other aspects that need to be prepared before the launch of your store? For this, you should take a look at our Shopify Blog article on The Store Launch Checklist - it will give you some structure and great guidance while you get ready to officially open up.

Let me know if you have any other questions.

Thanks! -Lana 

Lana | Social Care @ Shopify
-Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

AiLen13
Visitor
2 0 1

Hello,

It works,but only on PC screen. Is it possible to make clickable pictures on smartphone browser(Google chrome) too?

LitExtension
Shopify Partner
4901 1004 1177

This is an accepted solution.

Hi @mlane,

Please follow these steps:

- Step 1: Go to Online store > Themes > Actions > Edit code.

- Step 2: Go to sections > multicolumn.liquid and change all the code: https://pastebin.com/tvvm1EQ0

- Step 3: Go to Customize > Multicolumn. https://i.imgur.com/aMu12ba.png

Hope it is clear to you.

If my answer can help you solve your issue, please mark it as a solution. Thank you and good luck.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Contact us:
- Email: contact@litextension.com
mlane
Visitor
2 0 1

This was perfect! Thank you so much! 

Thinker121
New Member
5 0 0

This worked perfectly however may I please ask you - after I did this and setup my square icon / photos as below however they are aligned left and when I go to align them centre, all the icons / photos disappear altogether. I figured it will be related to the change in the code you provided, could you help me to resolve the centering issue pretty please?

 

Thinker121_0-1636506916666.png

LitExtension
Shopify Partner
4901 1004 1177

Hi @Thinker121,

You can create a new Question and send me the link. I will check it.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Contact us:
- Email: contact@litextension.com
Connor_Bentley
Shopify Partner
23 0 10

Hi, this changes my entire multicolumn section, is there a way to just add clickable images?

LitExtension
Shopify Partner
4901 1004 1177

Hi @Connor_Bentley,

You can create a question on the community and send me the link. I will check it.
Because this will help build a better community.
Thank you.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Contact us:
- Email: contact@litextension.com
tmpex
Tourist
8 0 1

Hi there!  I am new to this thread and wondering if you can help me resize the images after I have made them clickable within the multicolumn feature (coding changes as per your instructions above :)).  See attached. they are not filling the entire image field and when I tried full width,  it makes the images  HUGE and allows only 2 per column

ScreenHunter_9091 May. 23 13.24.jpg

LitExtension
Shopify Partner
4901 1004 1177

Hi @tmpex,

You can create a question on the community and send me the link. I will check it.
Because this will help build a better community.
Thank you.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Contact us:
- Email: contact@litextension.com
sachahcas
Explorer
54 3 5

I am afraid this did not work for me.

1) I work in RIDE.
2) Once I ran the code, four columns had changed into two rows of two, and the images would not "hold" a link. I would add a link, and try to save, after which the field appeared empty.
3) On the front page, the images became clickable, but just linked to the homepage.
4) Something did happen, but I cannot:

- Add a link to an image
- Save a link and make sure the link is tied to the image
- Control the amount of columns on one row (this is no loner editable)

If it ain't broke, don't fix it
chalison
New Member
9 0 0

@LitExtension Hi there. This solution worked great. I have one slight problem on mobile view. When swipe on mobile is enabled the progression bar changes to Nan/ after first swipe. Please help!IMG_1331.jpgIMG_C02AC040AA2F-1.jpeg

plays4dayss
Visitor
2 0 3

Hello, I used your code and it worked great, the problem is I lost the option to choose how many images appear per row. I am looking to have 4 images appear per row on desktop, do you know how I could make this happen?

JCL260
Visitor
2 0 0

Hello, I'm having the same problem. Did you resolve this issue?

 

tmpex
Tourist
8 0 1
Yes I did using the shopify expert below

[cid:374f83f4-8eb9-42e4-be54-dd1ec79417be]
royalpupco
Excursionist
13 0 2

Hi, unfortunately, this doesn't allow for column customization on mobile. That option has completely disappeared. How can we do that?

palma__sol
Tourist
5 0 0

Hello this worked but it removed the ability to adjust bottom and top padding, is there an edit to the code I can use?

drstevenbrown
Tourist
3 0 1

This worked great but is there a way to still allow for padding above and below?
This code was in previously and when I try to add it, it will not coincide for the Dawn theme.

{%- style -%}

  .section-{{ section.id }}-padding {

    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;

    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;

  }

xplosionbox
Visitor
1 0 0

worked well!! Thanks for taking time to help others.