All things Shopify and commerce
Hi There, we use Dawn but are having trouble adding anchor links - how do we do that in the editor?
Cheers, Ben
Solved! Go to the solution
This is an 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
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.
This is an 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
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:
Sorry need to update this code I forgot the bottom line for you will also be flipped with the SAR in the beginning.
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024