Hey guys,
On desktop, on product pages, my cart part with price and product title is between my sidebar and images.
I’d like to move the cart part to the right of the page.
Is that possible?
Website: atelier17.myshopify.com
Password: atelier17
To do so we will have to change the liquid code sections/cart.liquid file. Please let me know which theme you are using.
Thanks!
Hi, I’m using the kindgom theme.
Thanks a lot for your help!
I can’t see your code but go to your product-template.liquid file.
Find the code
EVERYTHING INBETWEEN
Cut and paste the above code BELOW this code
end result as shown below when I did it on your website
Let me know how it goes above, if it worked, give me a like and accept my post as the solution 
Yes exacty I’d like to move the whole part with product title, price and add to cart button to the right, and have the image next to the sidebar menu.
@JohnFromJotting here is the code. So I see the first class, but I’m not sure about where is the second one
{% if section.settings.show_reviews %}
{{ product.metafields.spr.reviews }}
{% endif %}
{% if section.settings.hide_variants %}
{% endif %}
{% schema %}
{
"name": "Product page",
"class": "mount-product-page mount-toggles",
"max_blocks": 4,
"blocks": [
{
"type": "text",
"name": "Toggle",
"settings": [
{
"type": "text",
"id": "title",
"label": "Title",
"default": "Title"
},
{
"type": "richtext",
"id": "body",
"label": "Text",
"default": "
Add extra product information, such as size guides or technical data.
"
},
{
"type": "image_picker",
"id": "image",
"label": "Image"
}
]
}
],
"settings": [
{
"type": "header",
"content": "Content"
},
{
"type": "checkbox",
"id": "show_vendor",
"label": "Show vendor",
"default": true
},
{
"type": "select",
"id": "product_description_truncated",
"label": "Truncate description",
"options": [
{
"value": "truncated--disabled",
"label": "Don't truncate"
},
{
"value": "truncated truncated--small",
"label": "Show small excerpt",
"group": "Truncate"
},
{
"value": "truncated truncated--medium",
"label": "Show medium excerpt",
"group": "Truncate"
},
{
"value": "truncated truncated--large",
"label": "Show large excerpt",
"group": "Truncate"
}
],
"default": "truncated truncated--small"
},
{
"type": "checkbox",
"id": "show_quantity_selector",
"label": "Show quantity selector",
"default": true
},
{
"type": "checkbox",
"id": "show_quantities",
"label": "Show variant quantities",
"default": false
},
{
"type": "checkbox",
"id": "show_variant_labels",
"label": "Show variant labels",
"default": true
},
{
"type": "checkbox",
"id": "hide_variants",
"label": "Hide out of stock variants",
"default": false
},
{
"type": "checkbox",
"id": "enable_payment_button",
"label": "Show dynamic checkout button",
"info": "Each customer will see their preferred payment method from those available on your store, such as PayPal or Apple Pay. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"default": true
},
{
"type": "checkbox",
"id": "show_share",
"label": "Show share link",
"default": true
},
{
"type": "header",
"content": "Media",
"info": "Learn more about [media type](https://help.shopify.com/en/manual/products/product-media)"
},
{
"type": "select",
"id": "gallery_style",
"label": "Gallery style",
"options": [
{
"value": "scroll",
"label": "Scroll"
},
{
"value": "slider",
"label": "Slider"
}
],
"default": "scroll",
"info": "Defaults to slider for mobile devices"
},
{
"type": "radio",
"id": "gallery_pagination",
"label": "Pagination",
"options": [
{
"value": "dots",
"label": "Dots"
},
{
"value": "thumbnails",
"label": "Thumbnails"
}
],
"default": "dots"
},
{
"type": "checkbox",
"id": "gallery_gutter",
"label": "Enable spacing between media",
"default": true
},
{
"type": "checkbox",
"id": "enable_zoom",
"label": "Enable image zoom",
"default": true
},
{
"type": "checkbox",
"id": "enable_video_looping",
"label": "Enable video looping",
"default": false
},
{
"type": "header",
"content": "Product reviews",
"info": "You need to install [Shopify's free Product Reviews app](https://apps.shopify.com/product-reviews) before enabling this option."
},
{
"type": "checkbox",
"id": "show_reviews",
"label": "Show reviews",
"default": false
},
{
"type": "checkbox",
"id": "show_reviews_badge",
"label": "Show reviews badge",
"default": false
}
]
}
{% endschema %}
I see product__Gallery there. do a find to see it. So what you do is click the line below, this should highlight it in a cream colour. What this does it shows you the entire inline coding. scroll down until you see which should be highlight a cream colour. So you will need to highlight everything between the first line below to the last
<div class="product__text rte">
example of what I mean by cream colour, see when I click the first line in the picture, a second line appears with also a cream colour. It means everything between the cream colour lines is needed for this particular element. so copy, cut and paste everything from the first cream colour line to the last.
EXAMPLE PICTURE BELOW, NOT PART OF YOUR CODE.
cut the above and paste it under this like below line, the below line only appears once. So just do a ctrl+f find to search for it.
</section>
@JohnFromJotting Ok I found it thanks a lot!
But now on mobile the cart button appears at the top of the page 
Ok we can solve that we can create one for mobile and one for desktop and have one show whether the other is active. give me a moment to solve
So revert the previous change, but instead of cutting, let’s copy so you have 2. one before and one after
but let’s name them different, currently, they should be named
CODE INBETWEEN
The green highlighted code name the original one “product__text rte mobile_description” and the new one below the name it “product__text rte desktop_description”
Once you added the above, go to your theme.scss file and paste the below code at the bottom
.product__text.rte.mobile_description {
display: none;
}
@media only screen and (max-width: 480px) {
.product__text.rte.mobile_description {
display: inherit;
}
}
.product__text.rte.desktop_description {
display: none;
}
@media only screen and (min-width: 481px) {
.product__text.rte.desktop_description {
display: inherit;
}
}
Ok now it works on mobile, but there are two add to cart buttons, and it went back to the left on desktop
thank you so much for your time and help!
You didn’t paste them in the correct sections. I can also see you have double share links. Please email me I can get this sorted for you.
Ok I’ll check again, it’s really late where I live so I’ll get back on it
later, thank you so much for your help I get back to you asap
no problems, also above please use my updated css styling, replace the original with below. If all is done well it should work
.product__text.rte.mobile_description {
display: none;
}
@media only screen and (max-width: 480px) {
.product__text.rte.mobile_description {
display: inherit;
}
}
.product__text.rte.desktop_description {
display: none;
}
@media only screen and (min-width: 481px) {
.product__text.rte.desktop_description {
display: inherit;
}
}
1 Like
Hi again @JohnFromJotting ,
It’s working, thank you so much!
Also, do you know how I can move the burger to the left on mobile, and put the logo in the middle (on mobile only)?
Great news to hear it’s solved :), can you please mark the post as the solution, would be grateful.
As for the burger and logo, unfortunately not an easy fix. We have to make sure the sidebar menu also opens to the left side as well. It’ll be too much to explain.
I suggest you hire a developer to complete this for you. I am available if you choose me, my email is below.
1 Like
Hi @JohnFromJotting ,
I’m facing an issue with the cart button.
Now that it is moved to the right thanks to you, every product appear as unavailable
I’ve checked some topics and it might come from this edit we made.
Any idea how to solve this issue?
Thanks a lot!
Website: atelier17-boutique.com
Password: atelier17
