Hi, so my current website is on the Debut theme as we use a page editor called Gempages which we can use to create our design and it almost puts it on top of the original store design. After having a look at the Refresh theme and the shopify editor I wanted to try to recreate our shop design on there so that we can use the shopify editor over the design app as we have noticed our website load speeds being quite slow and read on an article that website designers that work in the way Gempages does can slow your store down, so wanted to try to move over onto the shopify editor.
On the editor I have set the layout option on the theme settings to be full width/1600px and it has worked on the Home Page Template, the Collection Page Template, the Product Page Template and the Blog page template, but the Blog Posts template and the Pages template the width of the page isn’t full width despite the layout settings being set to be full width. I have tried searching through google for code that may fix this, but all have either not worked or have allowed me to make the content width smaller but not bigger. The theme isn’t live yet as it isn’t finished but on previews it doesn’t change to full width either.
Does anyone know how I can fix this?
@searnold
Could you provide me store URL? I should be able to answer your question.
Yours faithfully!
Hi the website url is https://naturallyhealthypet.co.uk/ although the theme currently active on the store isn’t the theme I need help with, its a different theme I’m working on to replace the current one once its done
So I have managed to fix the issue and thought I would post it here for anyone else having the same issue.
To change the page width to be full width:
Go to Online Store - Themes - Actions - Edit Code
Then Sections – Main-Page.liquid
Find the code line that will look like this:
And replace it for this
I can’t remember exactly how I sorted the blog post width issue as I did it a while ago but I know I was going through the .css files for the blog posts and the liquid files and just looking for anything that had the width in it, and either setting it as 100%, full-width or if it was in px just trialing different sizes and seeing if it affected the front end of the store or not.
Anything that you change remember to make a note of what it was prior to changing it so if it doesn’t work you can easily revert it back and keep in mind to make changes as minimal as possible to avoid messing with the code and then needing to hire someone to fix it.
I also figured out how to change the collapsible menu block to be full width rather than small, I can’t show the pathing for that and I did it a while ago so not entirely sure what I did exactly but I will share the code in a note file on this comment for others to copy and paste.
In Edit Code, go to Assets - Collapsible-Content.css
And replace the code in there for the code in the file.
I don’t do coding myself so I wouldn’t be able to answer any questions about the coding, I just pieced this together by the information I pieced together from a very long time searching on google and some base stuff I already knew.
I hope this helps anyone who needs it.