I want to link the logo of my site (in my main header) to the homepage of my store. I could do so by linking to the absolute URL (e.g., https://www.example.com), but that doesn't work when I'm testing on a development server that isn't hooked up to my domain name.
I know that I can link to pages using <a href="{{ pages.example.url }}">, where example is the page I want to link to. But using <a href="{{ pages.index.url }}"> doesn't seem to work — I'm assuming because index is not actually considered a page.
Is there an easy way to link to my store's homepage using a liquid tag?
You can use {{ shop.url }} as listed on this variable cheat sheet and in the Shopify developer reference.
Returns the full URL of a shop.
http://johns-apparel.com
Homepage
You also have the option of using the secure version {{ shop.secure_url }}
Returns the full URL of a shop prepended by the https protocol.
https://johns-apparel.com
Homepage
I also found in a quick test that it will also return the preview URL when previewing an unpublished page e.g. k29ijan0ye0r5g7k-51325174.shopifypreview.com
I figured it out, for those curious: Just link to "/". So, a link to the homepage of your site should appear as follows in your header.liquid file:
Link
Link This doesn't work for multilanguage stores.
I think better solution is: {{ routes.root_url }}
Related
I want to show some content on the homepage of my shopify site, the content is added in metafields created for pages. Is there any way to add metafields data on the homepage of shopify site?
You can access metafields of a page resource like this:
{{ page.metafields.namespace.key }}
If you are on another page (e.g. the homepage) you need to request the page object first in order to access its metafields:
{{ pages['page-handle'].metafields.namespace.key }}
Note: Make sure to replace page-handle with the handle of your page.
I've tried different kinds of embeds on my website but it doesnt seem to work. Can I still add a url and show it inside a vuejs website?
Yes we can use. The approach is iframe tag as
<iframe
src="url of live chat"></iframe>
Please use it
What I am trying to do:
I am trying to create an app that inserts content to the merchant's product page.
It appears that an app extension into the merchant's Online Store is the most effective way to do this (see https://shopify.dev/docs/app-extensions/extension-areas#online-store/).
In order to display the content, I am trying to use either a snippet or a section. However, I cannot get either of them to work properly.
I have taken these steps for the snippet:
I have enabled Online store as an extension area within my app (see https://shopify.dev/tutorials/add-a-new-app-extension)
With the Online store extension enabled, I have created a new snippet and a new section with very basic liquid code <h2>{{ product.title }}</h2>
I have enabled my app into a test store on my Shopify Partner account
I have added the {% render 'shopify://apps/etc... %} code into the correct position within the product page
Problem:
The content is not rendered
I have even tried this with the Sections Compatible version of the Debut template (see https://shopify.dev/tutorials/develop-theme-get-started-with-online-store-design-experience). Still nothing.
Is someone able to point me in the right direction here?
I say I have a section of a page like this (rough HTML to give an idea):
www.mydomain.com/contact-us
<div class="regional-offices">
<div class="south-west">
South West
<div class="south-west-content">South west office address</div>
</div>
<div class="north-east">
North East
<div class="north-east-content">North east office address</div>
</div>
...
...
Currently, these are a set of accordions that expand to show the content when the link is clicked. What I would like to do is treat them as individual URLs so that they can be seperately indexed by Google, as of course at the moment they are just part of a single page.
I have been researching the History API and can see how I would do this as far as creating unique URLs for each section, but where my understanding falls down is how Google or other search engines will handle these links if the required info is already part of the page and not stored at its own seperate URL.
For instance, the first step would be to change the <a> tag to be something like:
North East
We can then use JS to preventDefault() going directly to the URL, and instead provide the user with an expanded accordion, bring the page scroll down to the accordion and a unique URL using the History API. This is all well and good if we visit the URL directly, or click any of the links.
But the problem is that as far as I know, the Google crawler will try to follow the link and be faced with a 404 because there's no Javascript preventing access to the resource in the URL. And nor do I want there to be.
Or is it the case that I will need a unique location holding the contents of the accordion, which is indexable, and also pulled in with AJAX when a collapsed accordion is interacted with?
Apologies if I haven't made anything clear.
I had to deal with the same thing. What I did was to make a rewrite rule so that the link that google follow is actually posted to the page that handle the the request. to display the data. Angular might save you a lot of trouble to dealing with accordions.
I have re-designed and deployed our commercial site using 100% Ember using pushState to increase the search engines capability to browse the site content.
But, I have one issue that I am not sure how to solve. I am using "actions" to redirect to Ember App routes.
As an example, here an "a" tag:
<a {{action "doSales"}} title="Sales and after sales services">Sales and after sales services</a>
The associated action:
doSales: function(router, event) {
router.transitionTo('sales');
},
And the route:
sales: Ember.Route.extend({
route: '/:locale/sales',
But, in the DOM, the final a tag will look like:
<a data-ember-action="9" title="Sales and after sales services">Sales and after sales services</a>
As you can see there's no href="/en/sales"
Which means that if I ask a browser to browse my site, it won't be able to dig down the site structure.
Does anyone knows
Action href support was removed with the new router.
If you want href's on your anchor tags, you will either need to move to using the {{#linkTo}} helper (which generates them automatically) or add in the href values manually.