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</a>

    to 

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

   .

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?

[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,

[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]

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

[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

[Cristina_92 · Accepted solution]

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]

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