move add to cart button and price

Solved
taron86
Tourist
30 0 2

Hi can anyone please help.

I have the minimal theme, i am trying to move the add to cart button and the price in my product page under the image. i also want to move the product description up a bit further.

 

Anyone's help would be very much appreciated.

thanks

0 Likes

This is an accepted solution.

Hello taron86,

From Shopify Admin select Online Store and click on Themes
Choose your main theme
Click the . . . on the top left-right (see below) and hit Edit code
1. Open Sections ->product.template.liquid File find below code:

 <div class="product-single__prices{% if shop.taxes_included or shop.shipping_policy.body != blank %} product-single__prices--policy-enabled{% endif %}">
            <span id="PriceA11y" class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
            <span id="ProductPrice" class="product-single__price" itemprop="price" content="{{ product.price | divided_by: 100.00 }}">
              {{ product.price | money }}
            </span>

            {% if product.compare_at_price > product.price %}
              <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="false">{{ 'products.product.sale_price' | t }}</span>
              <s id="ComparePrice" class="product-single__sale-price">
                {{ product.compare_at_price_max | money }}
              </s>
            {% else %}
              <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="true">{{ 'products.product.sale_price' | t }}</span>
              <s id="ComparePrice" class="product-single__sale-price hide">
                {{ product.compare_at_price_max | money }}
              </s>
            {% endif %}
          </div>

         {% form 'product', product, class:productform_class %}
            <select name="id" id="ProductSelect-{{ section.id }}" class="product-single__variants">
              {% for variant in product.variants %}
                {% if variant.available %}

                  <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

                {% else %}
                  <option disabled="disabled">
                    {{ variant.title }} - {{ 'products.product.sold_out' | t }}
                  </option>
                {% endif %}
              {% endfor %}
            </select>

            <div class="product-single__quantity{% unless section.settings.product_quantity_enable %} is-hidden{% endunless %}">
              <label for="Quantity">{{ 'products.product.quantity' | t }}</label>
              <input type="number" id="Quantity" name="quantity" value="1" min="1" class="quantity-selector">
            </div>

            <button type="submit" name="add" id="AddToCart" class="btn {{ btn_class }}{% if section.settings.enable_payment_button %} btn--secondary{% endif %}">
              <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
            </button>
            {% if section.settings.enable_payment_button %}
              {{ form | payment_button }}
            {% endif %}
          {% endform %}

2. Cut above code

3. Then search below code:

{% if section.settings.product_image_zoom_type == 'lightbox' %}
        <ul class="gallery" class="hidden">
          {% for image in product.images %}
          <li data-image-id="{{ image.id }}" class="gallery__item" data-mfp-src="{{ image | img_url: '1024x1024', scale: 2 }}"></li>
          {% endfor %}
        </ul>
        {% endif %}

below this code paste code you have cut

 

 

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
JackyNikson
Excursionist
41 0 5

Hello!
You can try to make changes within your theme settings.
Head into Customize > Navigate to a Product page on your site so the Sections update in the theme editor > Under Sections click into Product > Scroll to "Description position" and check the "Below add to cart" option: 

0 Likes
taron86
Tourist
30 0 2

ou are amazing it worked, thank you so much, just one more thing. do you know to move the add to cart button to the right so it sits opposite the price in the same position?  

0 Likes

Yes sure share your URL i will help you on this.

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
taron86
Tourist
30 0 2

completehikingbackpacks-com.myshopify.com password taron1

0 Likes

hello
Add this css in theme.scss.liquid

span#ProductPrice {
    float: left;
}
button#AddToCart {
    width: 50%;
    margin-left: 2%;
}

  

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
taron86
Tourist
30 0 2

sorry where do i add this?

and i need to make the add to cart button half the size and height.

thanks

 

0 Likes

Hello 

span#ProductPrice {
    float: left;
}
button#AddToCart {  
  width: 30%;   
margin-left: 2%; }

 

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
taron86
Tourist
30 0 2

on what line or section would i add this, and do i add the whole line?

0 Likes