Move cart button to the right - Kingdom theme

Solved
Highlighted
Excursionist
45 0 3

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

0 Likes
Highlighted
Shopify Partner
3209 706 853

@YanisM 

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!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Excursionist
45 0 3
Hi, I’m using the kindgom theme.
Thanks a lot for your help!
0 Likes
Highlighted
Shopify Partner
3209 706 853

@YanisM 

Do you want this to the right? Let me know if I am in the correct place.

cart-right.jpg

 

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted

@YanisM 

I can't see your code but go to your product-template.liquid file.

Find the code

<div class="product__text rte">
 EVERYTHING INBETWEEN
</div>

 

Cut and paste the above code BELOW this code

<section class="product__gallery ">
</section>

 

end result as shown below when I did it on your website

end result.JPG

 

Let me know how it goes above, if it worked, give me a like and accept my post as the solution

If my answer was helpful please Like and Accept my post as the Solution
Need help customizing your store? Contact me on email at Defineify@gmail.com
0 Likes
Highlighted
Excursionist
45 0 3
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.
0 Likes
Highlighted
Excursionist
45 0 3

@Defineify here is the code. So I see the first class, but I'm not sure about where is the second one

<article id="section-{{ section.id }}" class="page-section product" data-collection="{{ collection.handle }}" data-id="{{ product.id }}" data-settings-hv="{{ section.settings.hide_variants }}" data-availability="{{ product.available }}">

  {% assign variant = product.selected_or_first_available_variant %}

	<div class="product__text rte">

    <div class="desktop-breadcrumb">{% render 'breadcrumb' %}</div>

		<header class="product__header">

			<h1 class="product__title">{{ product.title | escape }}</h1>

			{% if section.settings.show_vendor %}
				<p class="product__vendor">{{ 'general.prefixes.by' | t }} {{ product.vendor | link_to_vendor }}</p>
			{% endif %}

      {% if section.settings.show_reviews_badge %}
        <a class="product__reviews" href="#shopify-product-reviews">
          <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
        </a>
      {% endif %}

			<span class="product__price">

				<span class="product__price--original">{{ product.price | money }}</span>
        
				<span class="product__price--compare">
          {% if product.compare_at_price > product.price %}
            {{ product.compare_at_price | money }}
				  {% endif %}
        </span>

        {% if variant.unit_price_measurement %}
          <span class="unit-price">
            {{ variant.unit_price | money }} / 
            {% if variant.unit_price_measurement.reference_value != 1 %}
              {{ variant.unit_price_measurement.reference_value }}
            {% endif %}
            {{ variant.unit_price_measurement.reference_unit }}
          </span>
        {% endif %}

			</span>

      <span class="product__sku hidden">{{ variant.sku | ecsape }}</span>

		</header>

		<section class="product__content">

			<div class="product__offers">

        <div id="add-to-cart-{{ section.id }}" class="product__form" data-type="{{ settings.cart_action }}">

	       	{% form 'product', product %}

						 <select id="productSelect" name="id" class="styled" style="display: none !important">
	            {% for variant in product.variants %}
	              {% if variant.available %}
	                <option 
                    value="{{ variant.id }}" 
                    {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} 
                    {% if section.settings.show_quantities and variant.inventory_management != null %} 
                      data-quantity="{{ variant.inventory_quantity }}" 
                      data-inventory="{{ variant.inventory_policy }}" 
                    {% endif %} 
                  >
	                  {{ variant.title | escape }}
	                </option>
	              {% else %}
	                <option disabled="disabled">{{ variant.title | escape }}</option>
	              {% endif %}
	            {% endfor %}
	          </select>

	          <div class="product__cart-functions">

              <div class="product__variants" {% if product.has_only_default_variant %} style="display:none;" {% endif %}>
                {% for option in product.options_with_values %}
                  <div class="product__variant-holder {% unless section.settings.show_variant_labels == true %} hide-labels {% endunless %} selector-wrapper">
                    <label class="hidden" for="product-{{ option.name | escape | downcase | strip }}">{{ option.name | escape }}</label>
                    <select class="product__variant" id="product-{{ option.name | escape | downcase | strip }}">
                      {% for value in option.values %}
                        <option value="{{ value | escape }}" {% if option.selected_value == value %}selected{% endif %}>
                          {{ value | escape }}
                        </option>
                      {% endfor %}
                    </select>
                  </div>
                {% endfor %}
              </div>

              {% if section.settings.show_quantity_selector %}
                {% render 'product-quantity' %}
              {% endif %}

							<button type="submit" name="add" class="product__add-to-cart button">
								<span class="add-to-cart__text" data-add-to-cart-text="{% if product.tags contains 'preorder' %} {{ 'products.page.preorder_button' | t }} {% else %} {{ 'products.page.add_to_cart_button' | t }} {% endif %}"> {% if product.tags contains 'preorder' %} {{ 'products.page.preorder_button' | t }} {% else %} {{ 'products.page.add_to_cart_button' | t }} {% endif %} </span>
                <span class="add-to-cart__symbol">{% render 'theme-symbols', icon: 'cart' %}</span>
							</button>
							
              {% if section.settings.enable_payment_button %}
                {{ form | payment_button }}
              {% endif %}

              <span class="variant-quantity"></span>

            </div>

					{% endform %}

				</div>

			</div>

      <div class="product__description {{ section.settings.product_description_truncated }}">
        <div>
          {{ product.description }}
        </div>
      </div>

      {% if section.blocks.size > 0 %}

        <div class="toggles">

          {% for block in section.blocks %}

            {% if block.settings.product == blank or block.settings.product != blank and all_products[block.settings.product].handle == product.handle %}

              {% assign collection_check = false %}

              {% if block.settings.collection == blank %}
                {% assign collection_check = true %}
              {% else %}
                {% for collection in product.collections %}
                  {% if collection.handle == block.settings.collection %}
                    {% assign collection_check = true %}
                  {% endif %}
                {% endfor %}
              {% endif %}

              {% if collection_check %}

                <div class="toggle" {{ block.shopify_attributes }}>
                  <h3 class="toggle__title">{{ block.settings.title | escape }}</h3>
                  <div class="toggle__content">
                    {{ block.settings.body }}
                    {% unless block.settings.image == blank %}
                      {% render 'lazy-image', image: block.settings.image, type: 'image' %}
                    {% endunless %}
                  </div>
                </div>

              {% endif %}

            {% endif %}

          {% endfor %}

        </div>
        
      {% endif %}

 		</section> 
  
    {% if section.settings.show_share %}
      {% render 'share-popup', title: product.title, url: product.url, image: product.featured_media %}
    {% endif %}

 	</div>

  <div class="mobile-breadcrumb">{% render 'breadcrumb' %}</div>

	<section class="product__gallery {% if section.settings.gallery_style == 'slider' %} sticky {% endif %}">

		<div class="product-gallery product-gallery--{{ section.settings.gallery_style }} product-gallery--fit {% if section.settings.gallery_gutter %} product-gallery--gutter {% endif %} product-gallery--{{ section.settings.gallery_pagination }} product-gallery--mobile-variable" data-size="{{ product.media.size }}" data-mobile-style="product-gallery--fill-mobile" data-desktop-style="product-gallery--fit" data-video-looping="{{ section.settings.enable_video_looping }}">

			{% if product.media.size == 0 %} 
 
				<div class="product-gallery__item">
          <span class="onboarding-svg with-background">
            {{ 'product-1' | placeholder_svg_tag }}
          </span>
				</div>

			{% endif %}

			{% for media in product.media %}
        {% render 'product-media', media: media, enable_zoom: section.settings.enable_zoom, index: forloop.index0 %}
			{% endfor %}

		</div>

    {% assign first_3d_model = product.media | where: "media_type", "model" | first %}

    {% if first_3d_model %}
      <button
        aria-label="{{ 'products.page.view_in_space_label' | t }}"
        class="product-gallery__view-in-space"
        data-shopify-xr
        data-shopify-first-model3d-id="{{ first_3d_model.id }}"
        data-shopify-model3d-id="{{ first_3d_model.id }}"
        data-shopify-title="{{ product.title | escape }}"
        data-shopify-xr-hidden
      >{% render 'theme-symbols', icon: 'model-button' %}
        <span class='product-gallery__view-in-space-text'>{{ 'products.page.view_in_space' | t }}</span>
      </button>
    {% endif %}
  
    <div class="product-gallery__thumbnails product-gallery__thumbnails--{{ section.settings.gallery_pagination }}">
      <div class="thumbnails-holder">
        <ul class="thumbnails">
          {% for media in product.media %}
            <li class="thumbnail" {% if section.settings.gallery_pagination == 'thumbnails' %} tabindex="0" {% endif %}>

              {% if section.settings.gallery_pagination == 'thumbnails' %}
                <figure class="thumbnail__image lazy-image" data-ratio style="padding-top: 100%">
                  <img 
                    src="{{ media.preview_image | img_url: '64x64', crop: 'center' }}" alt="{{ media.alt | escape }}"
                    srcset="data&colon;image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                    data-srcset="{{ media.preview_image | img_url: '64x64', crop: 'center' }} 64w, {{ media.preview_image | img_url: '128x128', crop: 'center' }} 128w"
                    data-sizes="64px" class="lazyload"
                  />
                  {% if media.media_type == 'video' or media.media_type == 'external_video' %}
                    <span class="thumbnail__badge">{% render 'theme-symbols', icon: 'badge-video-thumbnail' %}</span>
                  {% elsif media.media_type == 'model' %}
                    <span class="thumbnail__badge">{% render 'theme-symbols', icon: 'badge-model-thumbnail' %}</span>
                  {% endif %}
                </figure>
              {% endif %}

            </li>
          {% endfor %}
        </ul>
      </div>
    </div>

	</section>

  {% unless product.empty == empty %}
    <script type="application/json" id="ProductJson-{{ section.id }}" class="product-json">
      {{ product | json }}
    </script>
    <script type="application/json" id="ModelJson-{{ section.id }}" class="model-json">
      {{ product.media | where: 'media_type', 'model' | json }}
    </script>
  {% endunless %}

</article>
  
{% if section.settings.show_reviews %}
  <div class="product-page-reviews">
    <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
    <style type="text/css">
      #shopify-product-reviews .spr-reviews .spr-pagination-next a:after {
        content: "{{ 'products.page.loading_reviews' | t }}";
      }
    </style>
  </div>
{% endif %}

{% if section.settings.hide_variants %}

  <script type="text/javascript">

    // (c) Copyright 2016 Caroline Schnapp. All Rights Reserved. Contact: mllegeorgesand@gmail.com
    // See https://docs.shopify.com/themes/customization/navigation/link-product-options-in-menus

    Shopify.arrayIncludes = function(e, t) {
      for (var n = 0; n < e.length; n++)
          if (e[n] == t) return !0;
      return !1
    }, Shopify.uniq = function(e) {
        for (var t = [], n = 0; n < e.length; n++) Shopify.arrayIncludes(t, e[n]) || t.push(e[n]);
        return t
    }

    Shopify.updateOptionsInSelector = function(selectorIndex, $product) {

      var productOptionsMap = $product.data('om');

      switch (selectorIndex) {
        case 0:
          var key = 'root';
          var selector = $product.find('.product__variant-holder:eq(0) .product__variant');
          break;
        case 1:
          var key = $product.find('.product__variant-holder:eq(0) .product__variant').val();
          var selector = $product.find('.product__variant-holder:eq(1) .product__variant');
          break;
        case 2:
          var key = $product.find('.product__variant-holder:eq(0) .product__variant').val();  
          key += ' / ' + $product.find('.product__variant-holder:eq(1) .product__variant').val();
          var selector = $product.find('.product__variant-holder:eq(2) .product__variant');
      }
      
      var initialValue = selector.val();
      selector.empty();    
      var availableOptions = productOptionsMap[key];

      $('.product__variant-holder').eq(selectorIndex).find('.regular-select-item').each(function(){
        $(this).removeClass('disabled');
        if ( $.inArray(decodeURIComponent($(this).data('value').toString()), availableOptions) < 0 ) {
          $(this).addClass('disabled');
          $(this).removeClass('selected');
        }
      });

      selector.find('option').each(function(){
        $(this).removeAttr('disabled', 'disabled');
        if ( ! $.inArray(decodeURIComponent($(this).val()), availableOptions) ) {
          $(this).attr('disabled', 'disabled')
        }
      })

      if ( availableOptions ) {
        for (var i=0; i<availableOptions.length; i++) {
          var option = availableOptions[i];
          var newOption = jQuery('<option></option>').val(option).html(option);
          selector.append(newOption);
        }
      }

      if (jQuery.inArray(initialValue, availableOptions) !== -1) {
        selector.val(initialValue);
      }
      selector.trigger('change');  
      
    };

    Shopify.linkOptionSelectors = function(product, $product) {
      var productOptionsMap = $product.data('om');
      // Building our mapping object.
      for (var i=0; i<product.variants.length; i++) {
        var variant = product.variants[i];
        if (variant.available) {
          // Gathering values for the 1st drop-down.
          productOptionsMap['root'] = productOptionsMap['root'] || [];
          productOptionsMap['root'].push(variant.option1);
          productOptionsMap['root'] = Shopify.uniq(productOptionsMap['root']);
          // Gathering values for the 2nd drop-down.
          if (product.options.length > 1) {
            var key = variant.option1;
            productOptionsMap[key] = productOptionsMap[key] || [];
            productOptionsMap[key].push(variant.option2);
            productOptionsMap[key] = Shopify.uniq(productOptionsMap[key]);
          }
          // Gathering values for the 3rd drop-down.
          if (product.options.length === 3) {
            var key = variant.option1 + ' / ' + variant.option2;
            productOptionsMap[key] = productOptionsMap[key] || [];
            productOptionsMap[key].push(variant.option3);
            productOptionsMap[key] = Shopify.uniq(productOptionsMap[key]);
          }
        }
      }
      // Update options right away.
      Shopify.updateOptionsInSelector(0, $product);
      if (product.options.length > 1) Shopify.updateOptionsInSelector(1, $product);
      if (product.options.length === 3) Shopify.updateOptionsInSelector(2, $product);
      // When there is an update in the first dropdown.
      $product.find(".product__variant-holder:eq(0) .product__variant").change(function() {
        Shopify.updateOptionsInSelector(1, $product);
        if (product.options.length === 3) Shopify.updateOptionsInSelector(2, $product);
        return true;
      });
      // When there is an update in the second dropdown.
      $product.find(".product__variant-holder:eq(1) .product__variant").change(function() {
        if (product.options.length === 3) Shopify.updateOptionsInSelector(2, $product);
        return true;
      });  
    };

</script>

{% 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": "<p>Add extra product information, such as size guides or technical data.</p>"
          },
          {
            "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 %}

 

0 Likes
Highlighted

@YanisM 

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 </div> which should be highlight a cream colour. So you will need to highlight everything between the first line below to the last </div>

<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.

example.JPG

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>

 

If my answer was helpful please Like and Accept my post as the Solution
Need help customizing your store? Contact me on email at Defineify@gmail.com
0 Likes
Highlighted
Excursionist
45 0 3

@Defineify Ok I found it thanks a lot!
But now on mobile the cart button appears at the top of the page

atelier17 page produit.PNG

0 Likes
Highlighted

@YanisM 

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

If my answer was helpful please Like and Accept my post as the Solution
Need help customizing your store? Contact me on email at Defineify@gmail.com
0 Likes