Product title and price above product image on mobile only

Dclootbox
Excursionist
30 0 5

Hello.

 

How can i get the product titel and price above product image on mobile only?

Like this 👇🏻

 

Skærmbillede 2023-10-20 kl. 11.43.55.png

 

Link here

 

Thanks. 

Replies 9 (9)
Artzen_tech
Shopify Partner
521 105 105

Hello @Dclootbox 
Its Artzen Technologies! We will be happy to help you today.


Please send your store url


Let me know if need further assistance
Regards,
Artzen Technologies

If helpful, please Like and Accept this Solution to help others
Artzen Technologies | A Shopify Development Agency
WhatsApp - 9877983930

Book FREE CONSULTATION who want to migrate to Shopify or want to start an eCommerce business with Shopify
Dclootbox
Excursionist
30 0 5
Moeed
Shopify Partner
3046 760 924

Hey @Dclootbox 

 

Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Dclootbox
Excursionist
30 0 5
chenlay
Shopify Partner
8 1 0

I've already tested it on your Shopify store, and it worked perfectly, 100%. You can take this code and paste it into your Shopify theme.

 

chenlay_1-1697797032998.png

 

To add the provided CSS code to the Shopify theme's header in the theme.liquid file, you can follow these steps:

  1. Log in to your Shopify admin.

  2. From the Shopify admin, go to "Online Store" and select "Themes."

  3. Find the theme you want to edit and click on the "Actions" button, then choose "Edit code."

  4. In the left sidebar, under the "Layout" section, click on "theme.liquid" to open the file for editing.

  5. Within the <head> section of your theme.liquid file, you can include your CSS code wrapped in <style> tags. Here's how to do it:

 

 

    @media screen and (max-width: 600px) {
        #main .product {
            position: relative;
        }

        #main .product safe-sticky.product-info .product-info__title {
            position: absolute;
            top: 0;
            margin-top: 15px;
            margin-bottom: 30px;
        }

        #main .product safe-sticky.product-info .product-info__price {
            position: absolute;
            top: 0;
            margin-top: 45px;
        }

        #main .product .product-gallery__media {
            margin-top: 100px;
        }
    }

 

 

 

        6. After adding the code, click the "Save" button to save your changes.

 

This will add the provided CSS code to the <head> section of your Shopify theme, applying the specified styles for screens with a maximum width of 600px. Make sure to test your store after making these changes to ensure that the CSS is being applied correctly and doesn't conflict with any existing styles in your theme.

chenlay_0-1697796938171.png

If my comments have been beneficial to you, please consider expressing your appreciation by marking my response as the accepted solution on this channel.
--
Chen Lay
Dclootbox
Excursionist
30 0 5

THANKS! it worked perfect !

 

Another question.. Do you know how i can add another price, so i have one price above image and one above the buy know botton? i have tried some solution, but its only 1 price, it dosnt change when i change varients.

 

Can you help me here aswell? 🙂

chenlay
Shopify Partner
8 1 0

I've prepared these JavaScript codes specifically for your store to meet your requirements. These codes are designed to work exclusively on smaller screen sizes. You can copy and test them on your store by injecting them through the Chrome or Firefox development tools. I've thoroughly tested them on your store, and they work perfectly.

Feel free to give them a try for testing at: [https://lootbox.dk/products/iphone-8-plus]

 

chenlay_0-1697815456222.png

I assume you can inject the codes into your theme.liquid file, and I won't go through the process of explaining how to add the code again. If you encounter any difficulties adding the code, I'll be available to guide you through it.

function initializePriceDisplay() {
  const basketButton = document.querySelector(".product-info__buy-buttons");
  const eventsOccur = document.querySelector(".product-info__variant-picker");
  const salePriceElement = document.querySelector(".text-lg");

  // Function to update the price
  function updatePrice() {
    const salePriceText = salePriceElement.textContent;
    const priceMatch = salePriceText.match(/(\d+,\d{3} kr)/);

    if (priceMatch) {
      const extractedPrice = priceMatch[0];
      const formattedPrice = `Price: ${extractedPrice}`;

      const priceContainer = document.createElement("p");
      priceContainer.textContent = formattedPrice;

      // Apply styling to the price container
      priceContainer.className = "mobile-price";
      priceContainer.style.fontSize = "25px";
      priceContainer.style.fontWeight = "500";

      // Remove any existing price element
      const existingPriceElement = document.querySelector(".mobile-price");
      if (existingPriceElement) {
        existingPriceElement.remove();
      }

      basketButton.parentNode.insertBefore(priceContainer, basketButton);
    }
  }

  // Function to check if the device is mobile
  function isMobileDevice() {
    return window.matchMedia("(max-width: 768px)").matches;
  }

  // Call updatePrice immediately when the page loads if the device is mobile
  if (isMobileDevice()) {
    updatePrice();
  }

  // Attach event listeners for click and change events
  eventsOccur.addEventListener("click", updatePrice);
  eventsOccur.addEventListener("change", updatePrice);
}

// Call the initialization function when the page loads
initializePriceDisplay();

 

If my comments have been beneficial to you, please consider expressing your appreciation by marking my response as the accepted solution on this channel.
--
Chen Lay
Dclootbox
Excursionist
30 0 5

or ... if the product title is so long it fills to lines, the price is on top of the product title..

 

Skærmbillede 2023-10-20 kl. 13.25.52.png

chenlay
Shopify Partner
8 1 0

I'd like to suggest improving your products by truncating the title if it's too long, rather than breaking it into two lines. If you're interested in making this change, please update the CSS code provided below.

@media screen and (max-width: 600px) {
        #main .product {
            position: relative;
        }

        #main .product safe-sticky.product-info .product-info__title {
            position: absolute;
            top: 0;
            margin-top: 15px;
            margin-bottom: 30px;
            width: 100%;
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        #main .product safe-sticky.product-info .product-info__price {
            position: absolute;
            top: 0;
            margin-top: 45px;
        }

        #main .product .product-gallery__media {
            margin-top: 100px;
        }
    }

 
Here's how the changes will appear once you've updated the CSS code as mentioned above:

chenlay_0-1697812074561.png

 

If my comments have been beneficial to you, please consider expressing your appreciation by marking my response as the accepted solution on this channel.
--
Chen Lay