Shopify themes, liquid, logos, and UX
How do i add these imaging below my payment methods, example:
https://mauro-milan.nl/collections/bestsellers/products/milan-trousers-donkerblauw
This is Richard from PageFly - Shopify Page Builder App
Hi @NinoB97 Please check again your editor theme have provide option add image below method payment ? If not we need add code in your footer theme.
Please check again and tell me , if need I will send you this code.
Thanks you,
Best regards,
Richard | PageFly
Please let me know if it works by giving it a Like or marking it as a solution!
➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)
All features are available from Free plan. Live Chat Support is available 24/7.
no doesnt show it
@NinoB97 Please add code in your theme like image here:
This is code show image:
<div class="logo-container img_footer">
<img src="https://st2.depositphotos.com/4035913/6124/i/950/depositphotos_61243733-stock-illustration-business-company-logo.jpg" alt="Logo" class="logo" alt="" />
</div>
<style>
.logo-container {
height: 300px;
display: flex;
width: 100%;
justify-content: center;
align-items: center;
}
.logo {
max-width: 100%;
max-height: 300px;
object-fit: contain;
}
</style>
Thanks you.
Please let me know if it works by giving it a Like or marking it as a solution!
➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)
All features are available from Free plan. Live Chat Support is available 24/7.
Hi @NinoB97
Step 1. Go to Admin -> Online store -> Theme > Edit code
Step 2. Find the file theme.js or global.js. Search for the following CSS snippet
document.addEventListener('DOMContentLoaded', function() {
// Create a new div element
var newDiv = document.createElement('div');
newDiv.style.display = 'flex';
newDiv.style.justifyContent = 'center';
newDiv.style.marginTop = '20px';
newDiv.style.marginBottom = '20px';
// Create a new image element
var newImg = document.createElement('img');
newImg.src='https://cdn.shopify.com/s/files/1/0787/4369/9783/files/Tekst_zonder_schaduw.png?v=1720644560';
newImg.alt = 'Product Image';
newImg.style.width = '300px';
newImg.style.height = 'auto';
// Append the image to the div
newDiv.appendChild(newImg);
// Find the element with the class "payment-icons"
var paymentIcons = document.querySelector('.payment-icons');
// Insert the new div after the "payment-icons" element
if (paymentIcons) {
paymentIcons.parentNode.insertBefore(newDiv, paymentIcons.nextSibling);
}
});
The result
If it helps you, please like and mark it as the solution.
B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.
B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.
B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.
BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now
@BSSCommerce-B2Bmaybe i did something wrong but that didn't work, please remember its for this site: https://auraliving.nl/products/flame-aroma-diffuser-deluxe-1
please change to it
const loop = setInterval(() => {
if(document.querySelector('.payment-icons')) {
clearInterval(loop)
addIcon()
}
}, 100)
setTimeout(() => {
clearInterval(loop)
}, 10000)
function addIcon() {
// Create a new div element
var newDiv = document.createElement('div');
newDiv.style.display = 'flex';
newDiv.style.justifyContent = 'center';
newDiv.style.marginTop = '20px';
newDiv.style.marginBottom = '20px';
// Create a new image element
var newImg = document.createElement('img');
newImg.src='https://cdn.shopify.com/s/files/1/0787/4369/9783/files/Tekst_zonder_schaduw.png?v=1720644560';
newImg.alt = 'Product Image';
newImg.style.width = '300px';
newImg.style.height = 'auto';
// Append the image to the div
newDiv.appendChild(newImg);
// Find the element with the class "payment-icons"
var paymentIcons = document.querySelector('.payment-icons');
// Insert the new div after the "payment-icons" element
if (paymentIcons) {
paymentIcons.parentNode.insertBefore(newDiv, paymentIcons.nextSibling);
}
}
Add this JavaScript code at the end of the global.js file.
B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.
B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.
B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.
BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now
@BSSCommerce-B2Bi added the code u gave me here to the global.js at the bottom of the file and saved it and now its still not showing, anything else i need to do ?
Hi @NinoB97
The selector has been changed; I don’t understand why
Please change to it
const loop = setInterval(() => {
if(document.querySelector('.list.list-payment')) {
clearInterval(loop)
addIcon()
}
}, 100)
setTimeout(() => {
clearInterval(loop)
}, 10000)
function addIcon() {
// Create a new div element
var newDiv = document.createElement('div');
newDiv.style.display = 'flex';
newDiv.style.justifyContent = 'center';
newDiv.style.marginTop = '20px';
newDiv.style.marginBottom = '20px';
// Create a new image element
var newImg = document.createElement('img');
newImg.src='https://cdn.shopify.com/s/files/1/0787/4369/9783/files/Tekst_zonder_schaduw.png?v=1720644560';
newImg.alt = 'Product Image';
newImg.style.width = '300px';
newImg.style.height = 'auto';
// Append the image to the div
newDiv.appendChild(newImg);
// Find the element with the class "payment-icons"
var paymentIcons = document.querySelector('.list.list-payment');
// Insert the new div after the "payment-icons" element
if (paymentIcons) {
paymentIcons.parentNode.insertBefore(newDiv, paymentIcons.nextSibling);
}
}
The result
B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.
B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.
B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.
BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now
Doesnt do anything man
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024