How to make a Break in product.template.liquid

Solved
Shopify Partner
111 9 22

You're very welcome! Sorry i couldn't see what's going on sooner. It's so hard when you're just trying to visualize instead of seeing what's going on in real time. 

I am a multi-disciplined web developer with years of experience working with several languages and frameworks.
1 Like
Shopify Partner
111 9 22

Sent the new files. I actually downloaded debut theme and made sure it worked before sending it over. Email me if you get confused or have any more questions or problems! If you want to customize the widths or create media queries, let me know. I can do all of that. 

I am a multi-disciplined web developer with years of experience working with several languages and frameworks.
1 Like
Tourist
15 0 1

Thanks, I pasted the code you sent me and replaced the whole product.theme.liquid

 

Now it looks like this:

Unbenannt.png

 

as you can see, it need a bit of spacing for the "add to cart" buttom. Can you tell me where do put that spacing? Then it would be perfect.

 

Another question, you sent me code for the homepage aswell. Why do I need to replace code for the homepage?

0 Likes
Tourist
15 0 1

OK I fixed the spacing issue myself. 

 

I just added at the end :

 

<div class="row mt-3"></div>

It all looks perfect now. 

I did not change anything for the homepage though.  

0 Likes
Shopify Partner
111 9 22

You have to integrate bootstrap into your theme. Bootstrap integration makes it so you can pull their styles from an external source. If not, it does not render since the styles will be missing. You do not need to change anything. That mt-3 is incorrect format, it has to equal to 12. so first column is 4, other column is 8. Install the bootstrap for best results and start editing from there. You can find out more about bootstrap here : https://getbootstrap.com/docs/4.0/getting-started/introduction/#starter-template you can see exactly where the code needs to be placed in order to work properly. You can learn more about grids here https://getbootstrap.com/docs/4.0/layout/grid/

 

The breakpoint you are seeing is 100% due to you not having bootstrap installed. The fix will not fully work. I have given you the code for theme.liquid which you can always revert back to a previous state. I have ensured the code was responsive and ready to go for any device. I created a new shopify account just to see what you see. 

I am a multi-disciplined web developer with years of experience working with several languages and frameworks.
1 Like

Success.

Shopify Partner
111 9 22

Screen Shot 2019-05-15 at 10.47.57 AM.pngDesktop ScreensScreen Shot 2019-05-15 at 10.48.09 AM.pngMobile Screens

I am a multi-disciplined web developer with years of experience working with several languages and frameworks.
2 Likes
Highlighted
Tourist
15 0 1

Alright today I will include the theme.liquid code and see what happens. The thing is I got many apps and I worry it will conflict. Right now , all seems to be working fine. one smartphone as well as on desktop. But I will try to make it all properly integrated.

1 Like
New Member
1 0 0

Hi @cmartinez89 

 

You helped with my site recently (adding line item properties) and now I'm having a similar problem to this one that you solved for somebody else!

Please see my site orion-rack-cabinets.myshopify.com - on the product pages where I have added a colour option as a line item property, such as this one: https://orion-rack-cabinets.myshopify.com/collections/free-standing-data-cabinets/products/9u-free-s...

 

I want to know how I can make the Colour selection box and text match the Quantity text, and space it out a bit more like the other boxes to make it look more balanced?

 

I hope you can help!

 

Many thanks

0 Likes