Solved

Are we able to widen Admin area view for product and variant editing?

nickhand87
Tourist
8 1 6

Long time Shopify user here, really kind of just getting annoyed more and more with the poor use of real estate on the admin side of the site structure - see image for how much real estate is completely wasted, yet i'm stuck scrolling a tiny window horizontally to edit variants etc... time and visual of this waste adds up when working all the time on these things!

Any help for what can be done - or Shopify any plans to do a more fluid layout or wide-screen adjusted option?? Would be VERY helpful...

Screen Shot 2020-09-22 at 3.30.18 PM.jpg

 

TIA!

Accepted Solution (1)
SB_90
Shopify Partner
216 52 66

This is an accepted solution.

Seeing as I had the code anyway and this was fairly easy to do:

https://chrome.google.com/webstore/detail/widescreen-shopify-admin/khaaleajdipmabnpppejimgmigfgjmmb

Test out the Chrome extension @nickhand87 ?

 

View solution in original post

Replies 10 (10)

SB_90
Shopify Partner
216 52 66

Hi Nick

I don't know if this is much help to you.

But this CSS will make that part of the screen fullwidth in my admin:

div[class*="Polaris-Frame__Content"] div[class*="Polaris-Page_"] {
    max-width:100%
}

Should also work for you?

You can use this in Chrome Console.

Or potentially even create a Google Chrome plugin or similar?

nickhand87
Tourist
8 1 6

But adding that in Chrome Console, isn't that just temporarily using it for that current instance of the loaded page? Is there a way to make it like a local "permanent" change on particular domains or something for it to stay applied even if it's only for my view of the page? 

SB_90
Shopify Partner
216 52 66

So you can indeed do that.

So in Chrome...

  1. Open Dev Tools
  2. Switch to "Sources" tab.
  3. Look in the left hand panel here for an "Overrides" tab.
  4. Click "Select a Folder for Overrides" and select a folder where you'll store CSS files that will be used all the time.
  5. Once you've selected the folder - click the little blue "allow" button that pops up in the top bar.
  6. Now save that CSS above in a shopify.css - or whatever you want to call it - file in the folder you just selected as your Overrides folder.

That should be it ...

That folder will now be used as a "local" override.

So as long as you're using the same Chrome profile and the file persists in that folder you should keep getting that override.

I THINK that's right anyway - forgive me if not - maybe a Chrome Extension would be the next way to go after that if you still can't get it to work.

nickhand87
Tourist
8 1 6

It's sort of working - seems like a bit finnicky on if/when Chrome decides to use that code locally or override or not, but it's helpful nonetheless, thank you! I'll toy with it and hopefully get it smooth, but this is definitely better than nothing!

SB_90
Shopify Partner
216 52 66

This is an accepted solution.

Seeing as I had the code anyway and this was fairly easy to do:

https://chrome.google.com/webstore/detail/widescreen-shopify-admin/khaaleajdipmabnpppejimgmigfgjmmb

Test out the Chrome extension @nickhand87 ?

 

nickhand87
Tourist
8 1 6

@SB_90 that is sweet! Works better than the Inspector hack for some reason it made me "open inspector" every time to make it take effect, not sure why. Regardless, the extension seems to be good, thanks for that!

SummitApparel
Excursionist
10 0 7

Circling back on this @nickhand87 did you find a solid solution for this?

Seems wild to me to have to navigate left to right to see inventory and variants when were making more product to update inventory. 

Is this a Chrome or Shopify issue? Seems like I shouldn't have an issue seeing everything on a 27" Monitor, without a plug in.?

SAS

H.H.

 

Lovrain
Visitor
1 0 0

I have the same problem UP UP

 

Thi css is to change

 

.Polaris-Page_yisnh {
margin: 0 auto;
max-width: 62.375rem;// this line to remove
padding: 0;
}

happyhounds
Tourist
4 0 6

This extension no longer works 😞

Living it up in the last best place.
DJNT
Shopify Partner
6 0 2

For those wanting to make this extension work again, in case the original developer never updates this, here is what I did.

 

Download the extension

Find the folder where the extension is installed, this will depend on your operating system. For me in linux it was ~/.config/google-chrome/Default/Extensions/khaaleajdipmabnpppejimgmigfgjmmb/0.0.1_0

Open the "manifest.json" file with a text editor and modify the 4th line to this:

"matches": [ "*://*.myshopify.com/admin*", "*://admin.shopify.com/*"]

Save the file

Go back to Chrome, open "Manage extensions", turn on Developer mode on top right

Click "Load unpacked" and select the 0.0.1_0 folder with the modified file.

Now the extension will work again with the new url shopifyadmin switched to