Edit a product right from the product page?

Solved
stepis
New Member
1 0 0

I used to have this nice black popup menu in the bottom of the page every time I would visit one of my product pages. This menu had a button "Edit Product" which would send me right to the product editing page in the Admin. Then I reinstalled my Windows, and now this popup menu is gone. Anyone know how to get it back? I'm using Debut theme.

0 Likes
Don
Shopify Staff
Shopify Staff
1388 92 190

This is an accepted solution.

Hi there @stepis!

 

Don here from Shopify. :)

 

You might be referring to the online store preview mode, accessed whenever you click on the 'view' icon in your admin; such as beside the Online store sales channel or at the top of product pages in your admin.

 

This would allow you to see a preview of your storefront where you should still be able to see the black edit bar you refer to for editing your homepage, collection pages or product pages.

 

Check it out and see if you can still access that in this way!

 

 

Regards,

Don

Don | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

seegang-berlin
Tourist
9 0 7

Hi - I'm logged-in, I went into preview and clicked through my store the link is:
https://vk20d8x1itmb86eb-28545286192.shopifypreview.com/collections/wedding/products/233
but I don't see any Edit button or similar. 
This is a very important function for me, which I used a lot on Etsy. How do I activate it?

Thank you - Jenny

 

0 Likes
seegang-berlin
Tourist
9 0 7

I have managed to make the front-end edit banner show up but unfortunately it comes and goes randomly.
I have no clue how to make it show up consistently.

Yes. I'm logged-in and Yes I have looked both at the Preview as well as the External view on my shop.

Jenny


 

0 Likes
MarcoM0857
Excursionist
14 0 9

@Don 

Although your reply was tagged as "Accepted Solution" it seems that it did not...

@stepis was referring to a same issue I am facing only in one of my PC although I use Chrome in both: Browsing my web in any page at the bottom of the screen should appear a (extremely useful) GRAY bar that allow to go to admin to "EDIT" that specific page.

This GRAY BAR does not appear in my (new) WIN10 PC.

I cleaned the PC (although was not necessary as it is just a few months old), I cleaned the Cookies, disables all extensions but NO success... The Gray bar does not appear.

I hope someone could help to supply step by step instructions how to solve this matter.

Thanks!

You can create a customer account for yourself and give it an "admin" tag. Then check for the tag in your theme code to insert the Edit link. The following code can be inserted where you want the link to appear, in your product page Liquid file (product.liquid, product-template.liquid, etc.).

 

{% if customer and customer.tags contains 'admin' %}
<a href="/admin/products/{{product.id}}" target="_blank">Edit Product</a>
{% endif %}

 

When you are logged in to your own customer account, you will see the link. Others will not see this link, whether they are logged in or visiting as a guest.

See here for more details: https://community.shopify.com/c/Shopify-Design/Creating-an-Edit-Link-in-the-Product-template/m-p/175...

Note: target="_blank" will force the link to open in a new tab. That way you can close the tab when you're done saving changes and go back to the website. If you want it to open in the same tab, just remove this code.

If my reply helped you, please give it a Like and mark it as Accepted Solution.
Do you need help customizing your theme or editing code? Email me!

I found another way to do this by looking for the presence of the dark Shopify icon or the dark Shopify admin bar on the website. This icon/bar shows up when you're logged in to your Shopify Admin console (I believe). This way you don't need to log in to a "customer account" tagged with "admin" as I said in the last reply.

<a id="product-admin-link" href="/admin/products/{{product.id}}" target="_blank" style="display: none;">Edit Product</a>
<script>
  $(function () { // when DOM is ready
    if($("iframe#admin-bar-iframe").length) {
      $("#product-admin-link").show();
    }
  });
</script>

 

TIP: You can combine both methods if you wish to. So that the link will appear either when the icon/bar shows up, or when you're logged in to your own customer account.

<a id="product-admin-link" href="/admin/products/{{product.id}}" target="_blank"
   {% unless customer and customer.tags contains 'admin' %}style="display: none;"{% endunless %}>Edit Product</a>
<script>
  $(function () { // when DOM is ready
    if($("iframe#admin-bar-iframe").length) {
      $("#product-admin-link").show();
    }
  });
</script>

 

Disclaimer: These code blocks are tested on Supply theme. Your mileage with other themes may vary.

If my reply helped you, please give it a Like and mark it as Accepted Solution.
Do you need help customizing your theme or editing code? Email me!
markengo
New Member
1 0 4

I found the solution! From the admin page, you just click the view store shortcut and it pops back. Hope this helps!

Image 2020-10-29 at 2.35.13 AM.png

MarcoM0857
Excursionist
14 0 9

Not really...

0 Likes
Karen_Preston
Tourist
5 0 9

Yes, this is exactly the view I browse my store through so I can edit immediately, and exactly what I can here to remember how I got there.

I use CHROME as my browser, and this behaves exactly as the initial inquiry is asking for.

0 Likes