Modify Product Page Layout

Highlighted
Tourist
12 0 2

I'm trying to modify all the "necessary" content and bring it above the fold on my product pages...is there any way to remove some space above the navigation links? 

"Home > SportLeash Recreation > SportLeash Recreation - Neon Orange & Neon Pink" 

Also, to fit everything neatly above the fold I'm looking to change the product title font to a smaller, bold font, changing the size/color of the price, and then bringing up the description.  

If anyone could shed some light on how to accomplish any of the above, it'd be much appreciated....thanks!

 

0 Likes
Shopify Partner
1736 48 156

Modify what theme? provide context,links, workable information. There is a design board help is more focused there.

The minimal theme? For the product font check your theme settings there is a typography section.

http://minimal-fashion.myshopify.com/pages/theme-features

Check those and search the design board for minimal

 

Problem Solved? ✔️Accept the solution so you can help others.
Confused? Busy? ? Get me to solve it paull.newton+shopifyforum@gmail.com.
Buy me a coffee? ☕ paypal.me/paulnewton or donate to eff.org
0 Likes
New Member
3 0 0

Hey Reynold,

I think Paul is correct in that you'll likely need to share what theme you are working with to receive some more assistance.

I believe what you're asking is how to eliminate white space above the bread crumbs? The white space is caused by the header having a bottom margin of 30px. This is caused by the row class having this margin. If you edit this margin, it will affect all portions of the page affected by the row class.

In order to change this, you would go into the Themes section>Template Editor>Assets and edit the styles.css stylesheet there. Before editing, I'd consider selecting all of the text there and copy+pasting it into a Word document and saving it as a backup. If something goes wrong, you want to be able to copy and paste that backup file in to restore the errors back to a working state.

Ctrl+f for .row and you should find a section that says ".row{ margin:0 0 30px 0;}". Editing the 30px here will affect the amount of spacing on all divs using the row class.(This can be seen below the line rule of Related Products, it will no longer have any space between it.) To affect only the header row, you could create another line of code immediately below the .row code I listed above to only affect the row files used by the header. To do this, you would type ".row #header{margin:0 0 15px 0;" This will leave all other row classes functioning properly.

You may notice this only affected the top of the breadcrumb navigation, not the bottom. The bottom margin is controlled by the .breadcrumb class. Similar to editing the .row class above, you will now ctrl+f the document to find the ".breadcrumb" class. It has the same margin as the previous row one. If you change it to also by 15px(This is obviously adjustable to whatever you see fit, I just found it to be a nice spacing and cutting your white space in half).

When editing the .breadcrumb class, it does not seem to be necessary to create a new line of code and to just edit the existing code. This is because the breadcrumb class is not being used elsewhere on the site while the row class being changed affects multiple aspects of the site besides the one you want to edit.

I've attached an image to show what I mean by the .row editing with the simple line that I added. I outlined the specific code in green. The top line is the code that is already there(that is causing your problem) and the bottom line is the code that I am suggesting as a fix.

As Paul suggested, Typography can be edited in the Theme Settings page. For more specific control, you can edit code similar to how you did above. The Product Title is controlled using the h1 tag. Although, again, changing this value will affect all h1 headers used throughout your website. I would suggest adding additional code for ".span6 h1" that changes the font-weight, font-size, and possibly line-height values. For the price text, it is controlled by the ".purchase h2.price" code in your css sheet.

The typography is something I would be weary about changing(especially because my typography experience is limited), and I highly recommend keeping a back up of files prior to editing them.

I realize this is quite a lengthy post! I tried to be thorough in explanation in case you don't have much web development experience. I hope I understood the question correctly!

Let me know if you have any other questions!

Cheers,
Jesse.

0 Likes
Tourist
12 0 2

Hey guys, thanks for your response...the theme was in fact Minimal...and Jesse, definitely appreciate the in-depth response.  I made the changes as explained above and everything looks great!

 

0 Likes