Seeking Guidance to Improve Multicolumn Section in Dawn Theme

[oliverconscire]

I’m using the Dawn theme for my website and I want to add a code where users can click on an image in the multicolumn section and go directly to the corresponding product page. Any advice on how to achieve this?

I’m also looking for suggestions on apps that seamlessly integrate with Dawn, offering customization options without impacting performance. If you know of any apps that fit these criteria, your recommendations would be greatly appreciated.

Additionally, I’d love to make the multicolumn section visually captivating. If you have creative ideas or code snippets to make it more interesting, please share!

Thank you in advance.

Website: conscire.co.uk

Password: Conscire9898!

[Web-Wizard]

Do you mean when you click on the image, you want to go to the product details page? In that case, each of your images would be a product. If you want to go to the product page, then each of your images would be a collection. Let me know which one you are trying to do, and I might be able to sort you out.

[BSS-Commerce]

With the requirement to attach a link to the corresponding product page on the image of that product at the Multicolumn Section, actually I have a few possible ways, but here I will guide you the simplest way:

1. Go to Themes => Edit code

2. Find the multicolumn.liquid file in the Sections folder:

(Note: From step 3 onwards the code snippets will be taken from my store examples)

3. Next, ctrl + f to find the keyword “multicolumn-card__image-wrapper”, you will find a code similar to this:

4. Add the following code at the end of the above code, but still before the “>” sign at the end:

onclick="window.location='{{ block.settings.link }}'"

5. Here’s the code after editing will look like this:

6. Next, find the file base.css in the Assets folder and add this code at the end of the file (for the purpose of creating a hand effect when hovering over the image):

.multicolumn-card__image-wrapper {
cursor: pointer;
}

So, attaching the product page link to the product image is complete. Please note the url link that I just attached to the image is taken from the Link section that you enter in the corresponding product column, if you do not assign the link to the column, when you click on the image, your page will redirect back to the Homepage, so Please attach the full product link:

Good luck.

[oliverconscire]

@Web-Wizard That’s correct sir. I already have the product page linked with the shop button at the bottom for each column, just wan’t to add so that the customer will be able to click anywhere on the image and then directly to product page for that particular item.

[Web-Wizard]

Let’s get this done @oliverconscire . BSS Commerce has already given you a way to do it. My way of doing it would be quite similar, but it will give you the option to choose a different picture, and you can link it to any product and clicking on the image will bring you to the product details page. The end result would be like the following image below

Go to themes and Edit code

Search for the multicolumn.liquid file :

Around line number 407(it might be different on your side) paste the code, do not miss any comma or brackets as this will break the code.

{
          "type": "url",
          "id": "product_link",
          "label": "Prdouct link for image"
        },

In the same file around line number 75 Add the following code at the end of before the “>” sign at the end

Search for the file name “section-multicolumn.css” from the top left, scroll to the bottom and add the following code

.multicolumn-card__image-wrapper {
  cursor: pointer;
  }

Hope it helps, please let me know if the solution works.

[oliverconscire]

@BSS-Commerce Thanks a lot! Much appreciated. Also, if you don’t mind. I would like to add a zoom effect to the images when hovering over them in the multicolumn section do you know a code for this?

[BSS-Commerce]

To create a zoom effect when hovering over an image, you can refer to the following steps:

1. Go to Themes => Edit code.

2. Locate the base.css file and add the following code snippet at the end of the file:

.multicolumn-card__image-wrapper .media{
  cursor: pointer;
}

.multicolumn-card__image-wrapper .media {
  width: 300px;
  height: 300px;
  overflow: hidden;
}

.multicolumn-card__image-wrapper .media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all .3s ease;
}

.multicolumn-card__image-wrapper .media img:hover {
  transform: scale(1.2);
}

I’m here to help if you have any more questions. Good luck with your endeavors!