Moving "purchase/add-to-cart" and "add value/varients" drop down BELOW product description on mobile view

The "add to cart" or "purchase" buttons as well as the "select size" (or other variants) and "select value" drop down for gift cards are below the product description on desktop but above the product description on mobile view. I'm not sure why this is flipped.

I would like to have the product description be visible before the add-to-cart/purchase/select variant on mobile.  I am wondering if there is code to move both these items ('purchase' and 'select value').

This is important for gift card purchases, because I included an "instant delivery notice" blurb to alert customers that gift cards are sent immediately, as SquareSpace doesn't offer the option of having the gift card sent to a recipient at a later date. I don't want this info to be missed.

I found a thread with code to move the "purchase/add-to-cart" option but not the "add value" or "variants" options. 

Does anyone have code to move BOTH these two buttons/drop downs on the mobile view? It would be great if it moves this for all products, not just gift cards, but the swap for gift cards is my priority. Any help would be GREATLY appreciate! 

53 minutes ago, Laurelle said:

The "add to cart" or "purchase" buttons as well as the "select size" (or other variants) and "select value" drop down for gift cards are below the product description on desktop but above the product description on mobile view. I'm not sure why this is flipped.

@Laurelle This is by design 🙂

On desktop, there is enough space on the Product Detail Page (PDP) to show the product image(s), product title, product price and the product description and still leave enough space to show the all important Add to Cart button, without the user scrolling down the page.

As mobile screens are smaller, this isn't the case. The Add to Cart button is placed above the description so that this critical 'call-to-action' is visible without requiring the user to scroll. This has a number of important benefits:

• It reduces friction in the purchasing process, increasing conversions. 
• It increases the likelihood of a quick purchase, especially for returning customers or those who have already decided to buy the product.

That said, I agree that if products require an informed decision, it is better that users read the description first. If the Add to Cart button is too prominent, some users might skip the essential details and this can lead to dissatisfaction later. On my own site, most of my products have a three page description before the Add to Cart button can be clicked!

You can use some Custom CSS to move elements around on the page. The code may vary depending on the PDP layout you are using and the settings you have chosen. If you are using the default 'Simple' layout then this should allow you to move the Product Description up from position 5 to position 2, above the Variants and Add to Cart button:

@media screen and (max-width: 767px) {
    .tweak-product-basic-item-description-position-mobile-below-add-to-cart-button .product-details .ProductItem-details-excerpt-below-price {
  order: 2;
  }
}

If this doesn't work for you, please share a link to one of the product pages so we can take a look? Also, you may want to consider whether this works for all products or if you would prefer to change particular products instead.

Did this help? Please give feedback by clicking an icon below  ⬇️

Hi Paul,

Thank you for taking the time to write this response! I really appreciate it, including pointing out the reason behind this design. That absolutely makes sense. With this in mind, is it possible to use this code solely for Gift Cards? That's really where I need it, as gift cards are often purchased in advance and there is no way to delay delivery with SquareSpace. Also... just checked out your website. So impressed! Will definitely be spending some time on there and will be in touch with some questions! Thank you! 

6 minutes ago, Laurelle said:

Thank you for taking the time to write this response! I really appreciate it, including pointing out the reason behind this design.

You're very welcome 🙂.

6 minutes ago, Laurelle said:

is it possible to use this code solely for Gift Cards?

Yes, sure. You can do this in one of two ways:

1. If you have just one gift card product, we can write some CSS that specifies the individual product ID of the gift card. To identify the product ID, I'll need to be able to see the product page. Can you provide me with a link? If required, How to Post a Forum Question provides guidance on how to provide a link 🙂.

2. If you have multiple gift cards (or products where you want to modify the layout) you can add a specific 'tag' to each product and we can then write some CSS that modifies the PDPs of products with this tag.

Did this help? Please give feedback by clicking an icon below  ⬇️

Hi Paul,

Thank you again! 🙏 I have 4 gift cards/separate products (so option 2 that you suggested). The page is not yet published.  So, if I want to share a link, would I need to create a password for that page, and share the link and password here? Thank you SO much for your help!

Laurelle 

Hi Paul,

THANK YOU!!! So much! 🙏 This worked perfectly. I truly appreciate your time. And I'm so glad I found you! (This was my first post in the SS forums btw - great experience!)

With gratitude,

Laurelle 

You're very welcome 🙂