Re: Product title and price above product image on mobile only
Hello.
How can i get the product titel and price above product image on mobile only?
Like this 👇🏻
Link here
Thanks.
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:
Log in to your Shopify admin.
From the Shopify admin, go to "Online Store" and select "Themes."
Find the theme you want to edit and click on the "Actions" button, then choose "Edit code."
In the left sidebar, under the "Layout" section, click on "theme.liquid" to open the file for editing.
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.
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();
or ... if the product title is so long it fills to lines, the price is on top of the product title..
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:
Community Blog Articles
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024
Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024
Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024