Edit a product right from the product page?

[stepis]

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.

[Don · 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

[seegang-berlin]

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

[seegang-berlin]

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

---

[MarcoM0857]

@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!

[Arundas]

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.

[Arundas]

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.

[markengo]

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

[MarcoM0857]

markengo: Not really...

[MarcoM0857]

Sorry... YES Markengo solution worked perfectly!

[Karen_Preston]

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.

[OpenInternet]

It worked!!! Thank you very much.

[NuGreen]

@markengo ON THE MONEY!!!!!! Please accept this digital kiss right on the face from me,

this has bugged me for a couple of years, now its sorted, well done you 🙂

[JBBB]

Awesome this is the answer! 

[houseofavi]

BINGO - thanks that solved it 🙂

[lalahorse]

Yes! @markengo ! That is exactly right  🙂 Thank you for that solution to this very real problem 😘

[lbf]

This is the one, thank you! 

[gazmoz171]

Hows this a solution?

[Michael_1_2_3]

That worked!!!

[adfuel]

Thank you so much!  I've been so annoyed by this for months after clearing my cookies.  This is the actual solution everyone!!

[namzhere]

@markengo Thank you! thank you so much! such a simple solution!
This feature is such a time saver to edit collections and products! 

[johnguilbertc]

Thanks! This one works for me!

[Holly131]

Unfortunately this doesn't always work

[gazmoz171]

Hi, sounds like would work prefect. However, Im not a developer and complete newbie. Can you please advise is slightly more detail? Many Thanks

[chalanaviraj333]

just follows @markengo reply

[gazmoz171]

How is that a solution whatsover. I think orig question was the so The "Edit product" button is always showing. So if your in and out of prods from admin and into preview, while in that prod preview you can click the "Edit Prod" button to go straight into said prods admin. Not just be in General admin press the eye button and then youve got the general "Edit" buttons bottom right while your in preview.

Surely a simple solution to this?

[beastoked]

Don wth that was not an accepted solution. it wasnt even a solution.

[M_S_D]

• Using the Preview eye icon on either the theme page or the edit code page does not bring the product edit button back. Even if you close the browser completely and reopen.
  
  
• Using the view your online store eye icon that appears when you hover over Online Store in the left-hand menu does not bring the edit button back. Even if you close the browser completely and reopen.
  
  
• Logging out of the admin panel and back in has no effect. Even if you close the browser completely and reopen.
  
  
• Clearing cookies and doing all of the above, each after clearing the cookies does not bring the button back.
  
  

Some of the above steps have worked for me in the past but do not currently work.

Probably a good idea to remove the big tick from the post purporting to be the solution as it doesn't seem to work anymore.

[ian5991]

Yep, still no solved for me either, was always there, I know about the little eye to view online store, thats always worked before, but for whatever reason its doesnt want to work now.

My little eye next to online store is not blacked out though, its just an outline, I think this to do with it, but I dont know how to get it back, which sounds silly but its so annoying