How do add anchor links in the Dawn 2.0 editor?

[Ben31]

Hi There, we use Dawn but are having trouble adding anchor links - how do we do that in the editor?

Cheers, Ben

[beauxbreaux]

You'll just need to add an id within the section you want to anchor to. Here is an example. Lets say you have a button in your hero section that you want the view to move down to your featured section. What you would do is go to your code and add any id name to this section. For something like the featured section you would probably want to link it to the top of this section. Here is how to do it with code:

This is the line that was changed to add an id: 

<div id="featured-section" class="color-background-1 isolate gradient">


   

Then wherever I want a person to click is where I add the "link" for this example I added "#featured-section" to the button in my hero section. See Below

Let me know more details if this is a bit confusing and I can try and see if I can help. 

EDIT: You can let me know your website url, the place you would like to put the link and the area of the page you would like this link to link to and I can dig through the code to give you better step by step instructions. 

[Ben31 · Accepted solution]

Thanks for taking the time to reply, it's very much appreciated. However, the whole point of the 2.0 editor is to be able to achieve basics (and links are super basic) without editing code.

Shopify made a huge leap forward but they're still way behind in this area. They've always limited content management but content management is content design, and content design is web design. So it's a bummer they don't rate it more highly after all these years but that's not your fault so thanks for the reply!

In the end, I added an anchor tag to a code block in the editor, then linked to it. Cheers

[beauxbreaux]

Alright so this part will require you to touch some code and can not be done through just the customizer. You will want to download a backup of your theme just in case.

Step 1: Remove styles from parent element.
-Go to code editor

-Go to Assets Folder

-Go to component-price.css

-Click anywhere where code is and click CTRL + F to do a search

-Search for 'line-through' (This should be under .price--on-sale .price-item--regular)

-Change 'line-through' to 'none'

.price--on-sale .price-item--regular {
  text-decoration: none;
  color: rgba(var(--color-foreground), 0.75);
  font-size: 1.3rem;
}

-Save

Step 2.

Now we need to add some inline styles and append SAR to the end.
-Go to price.liquid inside the Snippets folder

-Right around line 89 you should see this...

        <span>
          <s class="price-item price-item--regular">
            {% if settings.currency_code_enabled %}
              {{ compare_at_price | money_with_currency  }}    
            {% else %}
              {{ compare_at_price | money }}
            {% endif %}
          </s>
        </span>

-Be aware there are a couple lines in this file that look like this so find the one with the two classes:
(price-item price-item--regular)
-Now change: {{ compare_at_price | money_with_currency }}

-To <span style="text-decoration: line-through">{{ compare_at_price | money }}</span><span class="currency"> SAR</span>

It should look like this:

<span>
          <s class="price-item price-item--regular">
            {% if settings.currency_code_enabled %}
              <span style="text-decoration: line-through">{{ compare_at_price | money }}</span>
              <span class="currency"> SAR</span>  
            {% else %}
              {{ compare_at_price | money }}
            {% endif %}
          </s>
        </span>

The end result should look like this in the browser:

[beauxbreaux]

Sorry need to update this code I forgot the bottom line for you will also be flipped with the SAR in the beginning. 

[Ben31]

@beauxbreaux Sorry, I think this was meant for a different thread?