Change a link label to button label in multicolumn section- dawn theme.

[dmrashid40]

Hi,

I have no idea how to change the link label to a button label - within multicolunm.

I have asked the support center, and it is very difficult to understand. Here is the feedback i get below:

I get stuck at the section below in purple font. I can’t find that and i have no idea what i am changing or simply adding. What does the before and after look like (code wise)

Look forward to your feedback

1. From your Shopify admin, go to

   Online Store

   Themes

   .

2. Find the theme you want to edit, click the

   …

   button to open the actions menu, and then click

   Edit code

   .

3. In the

   Sections

   directory, find the file that contains your multi-column section. This might be named something like

   multi-column.liquid

   .

4. Locate the HTML code for the link you want to change into a button.

5. Add the class attribute

   class="btn"

   to the link tag. For example, change

   <a href="your-link">Link Label

   to

   <a href="your-link" class="btn">Link Label

   .

6. Click

   Save

   to apply your changes.

This will apply the primary button styling to your link, making it look like a button. If you want to use secondary button styling, you can use class="btn–secondary" instead.

[marrychandy]

*,*I’d be happy to help you with that. It seems like the support center’s instructions are a bit confusing.

To change the link label to a button label in the multicolumn section, you’ll need to add a class attribute to the link tag. I can provide you with a step-by-step guide or even do it for you if you’d like.

Would you prefer a detailed guide or would you like me to take care of it?

[Arif_Shopidevs]

Hello,Can you share your site url and the page where you want we can do some other way to achieve this. Using CSS .

[dmrashid40]

a detailed guide would be amazing. I think i am stuck on where to add the class attribute. What line number is it? what do i need to look for exactly?

I look forward your guide.

Thanks,

[dmrashid40]

This is my site url and the circled link labels below are what i want to change as buttons

https://tickoffticks.com/

[Arif_Shopidevs]

The site is password protected

[Cristina_92]

Hello @dmrashid40 !

I’ve followed the instructions you posted and here is the result:

Before replacing - line 130:

I have copied the class of my primary button and inserted it in the line 130.

Give it a try and let me know if it worked for you.

[dmrashid40]

Cheers2178! will get you in.

[Arif_Shopidevs]

Hello,
If you add this css in your multicolumn CSS area from storefront, it will give a border radius with background .

In this way it is easy for you to modify this. Other wise modify the section will difficult for you.

.multicolumn-card__info .link {
    background-color: #e3e3e3;
    padding: 10px;
    border-radius: 10px;
}

Let us know anything else you need.

Thank you

[dmrashid40]

That worked perfectly! Thank you for making it very easy.

[Cristina_92]

Great! Now I also know how to make it .

[dmrashid40]

another question…do you know how to remove the search icon in the header of dawn theme. I think i have to go into ccs again.

[Cristina_92]

Hi @dmrashid40 !

If I understand right you want to remove search icon (search in general):

If so, then please go to Online Store and click on Customize.

Then click on Header on the left and scroll down to Custom CSS:

Paste this code (it can be different in your store, I also use Dawn):

.header__icon--search {
  display: none;
}

Save your changes. It should disappear, and check it on your store.

[dmrashid40]

do i need to remove anything? Replace anything or just cut and paste?

thanks in advance

[Cristina_92]

Try to paste and Save. I don’t think you need to replace anything.

[dmrashid40]

Do i just add it to line 1. Or do i need to find, a specific line to add it to?

I did add it on its own and it did not work.

[Arif_Shopidevs]

@media screen and (min-width: 990px) {
    .header:not(.header--top-center) *>.header__search, .header--top-center>.header__search {
 
        display: none!important;
    }
}

Insert the above css in this css box it will hide