Dawn theme - Multicolumn links

Store Design

Topic summary

A user wants to remove arrows from link elements in the Dawn theme’s Multicolumn block and properly center the remaining text. Their existing CSS code hides the arrows but leaves empty space and doesn’t recenter the content.

Solution provided:

  • Add CSS to base.css that uses display: none !important; to hide the arrow SVG wrapper
  • Apply additional centering properties: justify-content: center, text-align: center, and gap: 0 to the multicolumn card link class

Alternative approach suggested:

  • Directly remove or comment out the arrow HTML/SVG code in the theme files
  • Then apply the same CSS centering fixes

Outcome: The original solution successfully resolved the issue for the user.

Summarized with AI on October 26. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I am using DAWN theme. I would like to remove the arrows in the “Multicolumn” block for the links. I have found code that does this and works (see pic attached) - however, I would like the text to be recentered after removing the arrows.

with arows
with arows1920×910 134 KB

Screenshot 2025-07-21 at 8.34.48 PM
Screenshot 2025-07-21 at 8.34.48 PM1920×915 128 KB

Screenshot 2025-07-30 at 1.24.45 AM
Screenshot 2025-07-30 at 1.24.45 AM2246×1070 192 KB

The code above seems to hide the arrows (rather than eliminating that space) and doesn’t re-center the text…

Thanks!

My URL is embroideryandsage.com

2

Hello @embroiderysage

Here are the steps to apply the necessary changes in your Shopify store:

  1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
  2. Locate Asset > base.css and paste the following code at the bottom of the file:
.multicolumn-card__info .animate-arrow .svg-wrapper {
    display: none !important;
}

image
image1237×826 76.8 KB

Let me know if you need further assistance!

1 Like
3

Brilliant - that worked! Thanks so much!!

1 Like
5

Hi,

Hope this will help

  • Step 1: Go to Your Theme Code.
  • Step 2: Find Right File
  • Step 3: Remove or Comment Out Arrow Code

{{ ‘→’ | escape }}
or
<svg class=“icon icon-arrow”…>

  • Step 4: Fix the Alignment with CSS (base.css)

CSS Example

.multicolumn-card__link {
  justify-content: center !important; /* Center the text horizontally */
  text-align: center !important;      /* Ensure the text itself is centered */
  gap: 0 !important;                  /* Remove space between text and arrow */
}