Shopify themes, liquid, logos, and UX
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.
Solved! Go to the solution
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.
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:
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
Hello,
It works,but only on PC screen. Is it possible to make clickable pictures on smartphone browser(Google chrome) too?
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.
This was perfect! Thank you so much!
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?
Hi @Thinker121,
You can create a new Question and send me the link. I will check it.
Hi, this changes my entire multicolumn section, is there a way to just add clickable images?
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.
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
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.
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)
@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!
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?
Hello, I'm having the same problem. Did you resolve this issue?
Hi, unfortunately, this doesn't allow for column customization on mobile. That option has completely disappeared. How can we do that?
Hello this worked but it removed the ability to adjust bottom and top padding, is there an edit to the code I can use?
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;
}
worked well!! Thanks for taking time to help others.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025