How does one edit themes? More specifically the "Minimal" theme on product pages...

Solved
Tourist
12 2 0

Hello I am trying to edit the product pages on my store to include less white space.

 

Directly below my product and its corresponding images I have a rather lenthy descripion for my best products (in an attempt to maximise on SEO traffic when I launch my page).  I'm having trouble figuring out the easiest way of getting my text to fill the screen beneath the product/product picks/add to basket section

 

FYI I've yet to purchase a plan and am still on the trial as I want my store perfect before i publish so i can start running FB ads straight away for maximum profits....

 

Example of store pages how they look now....

 

example 1.png

 

 

Now here is how I want it to look....

 

 

example 2.png

I'm not afraid to delve into the CSS files I just need an idea of where to look and what kind of code I need to be looking for as I'm not great with code.

 

I've only been using Shopify for 2 days and this is the only thing that's got me stumped!  I don't need or want anybody else to edit for me for a price sorry, just a little guidance from a more established user would be great!! 

 

Cheers,

 

Greg

0 Likes
Tourist
12 2 0

Anybody able to offer some advice?

0 Likes
Tourist
12 2 0

example4.pngThis line edited has allowed my description to use the entrie page (happy days) but my product/ add to cart etc has jumped over to the left...

Any help I've edited this line and it has allowed the body of my description to utilise all of the whitespace but the product/add to cart section above it has also took a jump to the left, and it needs to take a step to the RIIIIIIIIGHT.  Put you hands on your hips......

 

Anyways can anyone help me please and point me to the right line of code to edit to shift it back to the time walk again (to the right of the screen where it's supposed to be)????

0 Likes

Success.

Excursionist
17 1 1

I'm quite sure you should be looking in timber.css.liquid and adjust the margins there. However, without seeing the code I can't do anything and either way you'd be better off asking it a proper developer. 

I would also suggest you to go over to the technical discussion board and not on eCommerce design.

Hope this helped you. 

 

0 Likes
Astronaut
1091 150 274

Hey Greg, glad you're delving into Shopify. I noticed that you said earlier you were on the trial period and wanted to make sure your store was perfect before launching it. If you need more than 14 days to do this, you could sign up for a Partner account and have indefinite access to edit your theme.

 

https://www.shopify.com/partners

 

It also has access to a lot of learning materials, the only thing is that you would have to upload your products, and recreate any collections, blogs, pages, and navigations. That aside, it's a great tool for playing around with themes just to kind of get your feet wet. 

 

Unfortunately CSS is probably not going to be able to solve your issue. More of what you're asking right now is HTML structure, with probably a bit of CSS mixed in. It would be helpful to have a link to your site and a password if password protected so the forum members can inspect your code and play around with it on our end. You can also preview your theme, and share a preview link with us that will expire in an hour. Even this is not going to be that helpful though because what we see is compiled HTML code, but what you have on your end is a bunch of Liquid code and html code mixed in. We also don't know what kinds of settings you have set up from your customize editor, which is what all that:

 

{% if section.settings.show_hello_world %}
<div>Hello world!</div>
{% endif %}

stuff is. So above would be a setting set from your customize editor. It would be referring to perhaps a checkbox being checked called Show Hello World, and would not show that piece of code in between it without the checkbox being checked. So there's a lot of variables that we can't know from this side. We could download a default minimal theme, but we also don't know what changes you've made to your current code so even if we guide you from default it will be different from your current setup. 

 

If you really want to be the only one to edit your theme, you'll need to get a firm grasp on HTML, CSS, and Liquid (Javascript would be a big plus as well). All of these things take a good amount of time to learn the basics of, and even longer trial and error to get comfortable with. If that's good for you, then some good resources for all things webdev are:

 

W3Schools

https://www.w3schools.com/

 

MDN web docs

https://developer.mozilla.org/en-US/docs/Learn 

 

Shopify Liquid Cheat Sheet

https://www.shopify.com/partners/shopify-cheat-sheet

 

And Shopify's own help docs on liquid:

https://help.shopify.com/en/themes/liquid

 

If you dont really have time to learn these things or a reason other than getting your store set up, it's probably going to be in your best interest to hire a developer to set your store up. It will save you a lot of time, and time is money :) 

 

Just my 2 cents, sorry for the long winded response. Feel free to message me if you have any questions.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Tourist
12 2 0

How much would a developer charge to undertake such a task? Average price?

0 Likes
Astronaut
1091 150 274

Really depends on the developer and the task. For your example, I'd say a normal price would be $20 just based off what I've seen from developers offering service based on small tasks. 

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes