I am ready to take my store live with the refresh theme, however I would like to have separate slideshows for Mobile and Desktop.
I was able to upload a 10 second GIF to give the homepage banner a video effect. It looks perfect on mobile but the desktop is blurry. I would like to just offer a different image on the desktop, thanks for the help in advance.
My store is currently live with another theme, but we are transitioning to refresh in a few days.
You have to add the different schema code for desktop and mobile for uploading the images.
Then have to call those images in HTML.
It will took 2-3 Hours approx.
Please let me know if need any help,
Contact info is in signature.
Thanks
You can add 2 separate Slideshow sections and then add those codes to make them appear separate for mobile and desktop.
Add this code to Custom CSS code of the section that you want to hide on the mobile.
@media (max-width: 749px) {
slideshow-component {
display: none !important;
}
}
Add this code to the Slideshow section you want to hide on the desktop
@media (min-width: 768px) {
slideshow-component {
display: none;
}
}
Perfect! Thank you. This worked and took me about 30 seconds to make it happen 
While I have you, quick question:
I am trying to add an image/pattern image to the footer of my refresh theme.
The website is www.NardosNatural.com
Our live store is currently using a different theme but we are transitioning to the refresh theme soon.
Do you mean add image as background of your footer?
Correct
Please add this code to Custom CSS of Footer section. Change your-image-URL in code with your product image URL
footer {
background-image: url('your-image-URL');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Thanks, it looks perfect on desktop. Mobile is an extreme close up however. Should I just make the image smaller and have it repeat? Or do you have another option?
Could you share the preview URL of the Refresh theme?
I just made the store live at www.NardosNatural.com
Update code
footer {
background-image: url(https://cdn.shopify.com/s/files/1/0174/4610/files/Nardos_Natural_Organic_Skincare_Pattern_bf8bc1db-69da-4fdf-80eb-f25240169202.jpg?v=1705634771);
background-position: center;
background-repeat: repeat;
background-size: contain;
}
@media (max-width: 749px) {
footer {
background-size: cover !important;
}
}
When the phone is upright its zoomed in and blurry (same as before)..If I turn the phone horizontal its good.
Could you try to use this code
footer {
background-image: url(https://cdn.shopify.com/s/files/1/0174/4610/files/Nardos_Natural_Organic_Skincare_Pattern_bf8bc1db-69da-4fdf-80eb-f25240169202.jpg?v=1705634771);
background-position: center;
background-repeat: repeat;
background-size: contain;
}
Thank you, that worked! I just sent you a PayPal tip for being so helpful! If you wouldn’t mind helping with a few small things, I would be happy to send another tip
The theme looks like it was built in with black buttons and black form fields. I was able to change most buttons with the basic theme editor. However there are a few I was not able to change.
I put this code below in for the Add to Cart Buttons on the home page and collection pages. I love it, however I noticed now the choose options text on the buttons have disappeared. Choose options is for products with any items that contain variants. For example: https://www.nardosnatural.com/collections/lip-care
you will see the Choose options text is missing
I found this code from another Shopify forum, this is what I added it to the base.css
.quick-add__submit {
background-color: #fff;
color: #fff;
}
.quick-add__submit span {
color: #282828;
}
As for the black buttons and black form fields, I would like the following black buttons to match the add to cart buttons on the homepage (the add to cart buttons have a teal outline, white button and dark grey text).
-Homepage just above the footer “ Unlock Healthy Skincare”
Form fields:
-Log in page - please help change the black form field to white form field with dark grey outline
-Create an account page - please help change the black form field to white form field with dark grey outline
-Reset Your password page - please help change the black form field to white form field with dark grey outline
-Black Search Bar, after an item is searched - the bar turns black - Make White search field with dark grey outline.
I sincerely appreciate your assistance!
Let me check and give the code
Code update for Choose options button
.quick-add__submit {
background-color: #fff;
color: #282828;
}
.quick-add__submit span {
color: #282828;
}
Add this code to Custom CSS of section has Unlock Healthy Skincare button
.button {
background: #fff;
color: #282828;
}
Add this code to base.css file to change the background of form fields
.search__input.field__input,
.customer .field input {
background: #fff !important;
}
Awesome, This worked! I just sent another tip
I noticed when digging deeper into the site, there are still a few black & dark grey colors from the main theme settings still.
I have highlighted them in the screen shots.
Your cart page - the black buttons (match the white buttons with teal outline and dark grey text)
When clicking on “choose options” the pop up appears - the “x” needs to be changed to be visible
When using search bar - the “Blog” Badge is black - Please match the sale badge on the screenshot.
Please add this code to base.css
.template-search__results .badge,
.quick-add-modal__content-info .quick-add-modal__toggle,
quantity-popover .quantity {
background: #fff !important;
}
Please update the code
.template-search__results .badge,
quick-add-modal .quick-add-modal__toggle,
quantity-popover .quantity {
background: #fff !important;
}