Would anyone be able to help me with the following points? I would appreciate your assistance.
How can I customize the button styles?
How can I change the font styles across my entire Shopify store?
How do I create a responsive grid layout for my Shopify collection pages?
Thank you for your assistance!
Hi @Anonymous , Can you kindly share the details of your problem (screenshot) with us? We will check it and suggest you a solution if possible.
Hello! @Anonymous Please follow these steps to add this CSS code:
/* Custom button styles */
.btn {
background-color: #007bff;
color: #fff;
border-radius: 5px;
padding: 10px 20px;
font-weight: bold;
}
/* Hover effect */
.btn:hover {
background-color: #0056b3;
}
/* Global font style */
body {
font-family: 'Arial', sans-serif;
font-size: 16px;
color: #333;
}
/* Responsive grid layout */
.product-grid {
display: grid;
gap: 20px;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.product-grid-item {
border: 1px solid #ddd;
padding: 10px;
text-align: center;
}
If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.
Best regards
Kaushik
i add this code in to my file but i did’t see any chenge could you tell me exactly where I can add the code I am using the refresh theme
@Anonymous Open your base.css file and add the code above.
And One more thing please add your class name ill add the class name just for a demo and if you don’t know how to do this then please send your store URL ill add this code for you one more thing, please add your class name. I’ll add “class name” just for a demo. If you don’t know how to do this, please send your store URL. I’ll add this code for you.
Thank you, we’ll do that.
It’s working Kaushik thanks
welcome @Anonymous ,Let me know if you need further assistance.
@Kaushik_7 How do I hide specific sections on mobile devices only
How can I add custom hover effects to product images like a zoom effect
@Anonymous Please follow the above same steps to add this CSS code:
@media (max-width: 749px) {
.section-class-name {
display: none;
}
}
@litica726, please try this code and remember to replace your class name.
.product-grid-item img {
transition: transform 0.3s ease;
}
.product-grid-item img:hover {
transform: scale(1.1);
}
If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.
Both are working,
i need to creat image with text section can you help me to how I can add this section
Sure, @Anonymous Allow me some time, I’ll provide the code.
Add successfully thank you Kaushik
Most Well-Come @Anonymous 
Hello @Anonymous , If the solution presented meets your needs and addresses your query effectively, I encourage you to accept it as the chosen answer. This will acknowledge your support and aid fellow community members in identifying reliable and effective solutions for their similar concerns.
Thank you 
Sure Kaushik, Thank you for your assistance. Your knowledge is truly impressive, and I greatly appreciate your help.
