How to add a CTA button to each column in Dawn theme?

[Millie03]

Hello,

I am using Dawn theme for my store www.florabymillie.com. With the multi column section I would like to have a CTA button for each column rather than just “Shop Now” text. Can anybody help please ?

[SagarSukhanandi]

Hi @Millie03
Please add the below style at the end of your base.css file

a.link.animate-arrow {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: 0;
    padding: 0 3rem;
    cursor: pointer;
    font: inherit;
    font-size: 1.5rem;
    text-decoration: none;
    color: rgb(var(--color-button-text));
    transition: box-shadow var(--duration-short) ease;
    -webkit-appearance: none;
    appearance: none;
    background-color: rgba(var(--color-button),var(--alpha-button-background));
    min-width: calc(12rem + var(--buttons-border-width) * 2);
    min-height: calc(4.5rem + var(--buttons-border-width) * 2);
    --shadow-horizontal-offset: var(--buttons-shadow-horizontal-offset);
    --shadow-vertical-offset: var(--buttons-shadow-vertical-offset);
    --shadow-blur-radius: var(--buttons-shadow-blur-radius);
    --shadow-opacity: var(--buttons-shadow-opacity);
    --border-offset: var(--buttons-border-offset);
    --border-opacity: calc(1 - var(--buttons-border-opacity));
    border-radius: var(--buttons-radius-outset);
    position: relative;
    font-size: 1.5rem;
    letter-spacing: .1rem;
    line-height: calc(1 + .2 / var(--font-body-scale));
}

Here is the output after you add the style

[Tinytasks]

Hi @Millie03 ,

You can add the below css code in custom.css

Online Store > Themes > Actions > Edit Code > Custom.css

.link animate-arrow {   
background-color: #000;
  color: #fff;
  padding: 10px 30px;
}

[Millie03]

Thank you very much.

[Cedcommerce]

Hello @Millie03 ,

Follow the below steps to add a custom CTA button in the dawn theme.

• Go to your Shopify Admin > Action Button > Edit code.

• Search multicolumn.liquid file. (Refer to the below figure)

  

• Now add a custom class in the anchor tag.

• Look for the custom_button or class for the button in that file.
• Add the below-provided CSS code in between style tags.
• Refer to the below image.

.classname { min-width: 180px; min-height: 45px; background: #000; color: #fff; border: 1px solid #000; border-radius: 5px; display: flex; align-items: center; justify-content: center; }  This will change the **shop now** link into a CTA button.  Hope it was helpful. Please let us know if you need more help on this. Regards, CedCommerce

[missjewellee]

Thanks this works! Any idea how to take the arrow off the button?

[jeroenvandepol]

@Cedcommerce I am taking you back about 9 months

I am trying to implement your solution, but I am stuck. I am not a coder, I can copy / paste and follow detailed instructions. I have added the custom class and the CSS code to the liquid file.

I have the feeling there is one more step, but I don’t know how. You mentioned:

• Look for the custom_button or class for the button in that file.

Can you help me out? Thanks.

[ashpace]

This worked great; do you know how I can remove the arrow and make it the outlined version instead of the solid button version? I want it white with black boarder.

Thank you!