Product title and price above product image on mobile only

[Dclootbox]

Hello.

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

Like this

Link here

Thanks.

[Artzen_tech]

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

[Moeed]

Hey @Dclootbox

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

Best Regards,
Moeed

[chenlay]

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.

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 section of your theme.liquid file, you can include your CSS code wrapped in 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 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.

[Dclootbox]

https://lootbox.dk/products/iphone-11-pro

[Dclootbox]

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?

[Dclootbox]

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

[Dclootbox]

https://lootbox.dk/products/iphone-11-pro

[chenlay]

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]

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]

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();