Hey, i want to display payment icons below atc button. Did it with custom liquid, problem is now that the placement is bleep on mobile. On Desktop its how i want it to be.
Can anyone give me a code to add to custom liquid so its only displayed on desktop? And one so its only shown on mobile as i will use less icons and other placement for mobile than.
My custom liquid:
.icon-list-custom {
display: flex;
flex-wrap: wrap;
list-style: none;
justify-content: center;
margin: 0;
gap: 8px;
padding: 0;
margin-top: -1rem;
margin-left: -9rem;
}
{% assign enabled_payment_types = 'paypal,visa,master,klarna,apple_pay,shopify_pay,unionpay,google_pay,maestro' | remove: ' ' | split: ',' %}
{% for type in enabled_payment_types %}
- {{ type | payment_type_svg_tag: class: 'icon-svg' }}
{%- endfor -%}
https://candle-concepts.de/products/secret-message-candle-personalisierbar
burtah
To control the visibility of your payment icons on mobile and desktop separately, you can use CSS media queries. Here’s how to modify your code to show the icons only on desktop or mobile.
Solution: Separate Mobile and Desktop Payment Icons1. Desktop-Only Code: Wrap your payment icons in a div with a class (e.g., .desktop-only) and add a media query in CSS to only display it on larger screens.
- Mobile-Only Code: Duplicate the payment icons list with different icons if needed, and wrap it in a div with a class (e.g., .mobile-only). Add a CSS media query to show this only on mobile.
Here’s how you can set it up:
/* General styling for the payment icons */
.icon-list-custom {
display: flex;
flex-wrap: wrap;
list-style: none;
justify-content: center;
margin: 0;
gap: 8px;
padding: 0;
}
.desktop-only {
display: flex;
}
.mobile-only {
display: none;
}
/* Show desktop-only icons on screens wider than 768px */
@media (min-width: 768px) {
.desktop-only {
display: flex;
}
.mobile-only {
display: none;
}
}
/* Show mobile-only icons on screens narrower than 768px */
@media (max-width: 767px) {
.desktop-only {
display: none;
}
.mobile-only {
display: flex;
justify-content: center;
margin-top: 0.5rem;
}
}
{% assign enabled_payment_types = 'paypal,visa,master,klarna,apple_pay,shopify_pay,unionpay,google_pay,maestro' | remove: ' ' | split: ',' %}
{% for type in enabled_payment_types %}
- {{ type | payment_type_svg_tag: class: 'icon-svg' }}
{% endfor %}
{% assign enabled_payment_types_mobile = 'visa,master,paypal' | remove: ' ' | split: ',' %}
{% for type in enabled_payment_types_mobile %}
- {{ type | payment_type_svg_tag: class: 'icon-svg' }}
{% endfor %}
Explanation:- Desktop-only Icons: The .desktop-only div only appears on screens 768px wide or larger.
- Mobile-only Icons: The .mobile-only div appears only on screens narrower than 768px.
- Separate Icon Lists: You can set different payment icons for mobile by adjusting enabled_payment_types_mobile.
This setup will ensure different icons display based on device size, improving the user experience on both desktop and mobile.
Make your store’s experience even more seamless with the Debales AI Chatbot on Shopify! Guide your customers effortlessly—let’s chat!
Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!