Shopify themes, liquid, logos, and UX
This is an accepted solution.
Please Accept as solution so others can take benefit.
Thanks!
Hi yes, let me help you kindly do mail me with further details. Thanks and Best Regards
Please share screenshot What do you want !
Thanks!
I have attached screenshots of my homepage. I would like to create space between the slideshow and the picture with text below. the pictures are touching and I would like a little bit of margin above and below the picture of the three girls that will separate the slideshow above from it and the collections below it. Thanks so much!
Please add the following code at the bottom of your assets/theme.css file.
@media screen and (min-width: 641px){
.FeatureText--withImage { margin-top: 30px; margin-bottom: 30px;}
}
Hope this works.
Thanks!
Hi, just checking to see if you saw my response for the other code? thanks!
Please share your website URL and password if any. I will check and provide a solution here.
Thanks!
I understand but for the confirmation, Can you please provide a screenshot where you want a gap ?
It will be helpful.
Thanks!
Just for your confirmation. Do you want space between these 2 sections? check the screenshot below.
Yes absolutely🙏
Please add the following code at the bottom of your assets/theme.scss.liquid file.
.FlexboxIeFix{
margin-bottom:50px;
}
You can adjust margin as per your need,
Hope this helps.
Thanks!
This is an accepted solution.
Please Accept as solution so others can take benefit.
Thanks!
Hello @dmwwebartisan ,
this is a fantastic solution, exactly what I was looking for too.
Only if I paste the code the "spacer" appaers at the bottom of my homepage. How can I influence the position?
Thank you!
Katrin
Please share your website URL and password if any. I will check and provide a solution here.
Thanks!
Thank you @dmwwebartisan
The page is https://wearepari.com
I am currently using a workaround with Hypervisual for the below indicated spacer, and would love to build this within the code.
Could you please explain more?
Where or on which section you need space?
Hello @dmwwebartisan
Thank you for your answer. As indicated on the screenshot I would love to have two "section dividers" / space, one above and one below the collection overview.
Right now I inserted a hypervisual page with a white divider, however, I would like to remove hypervisual longterm.
When using the piece of code you mentioned in this thread it adds a relatively thick space at the bottom (see below).
I would appreciate your feedback very much! Thank you
Thanks for the explanation. Just to confirm. Do you want this?
let me know.
In your screenshot the space between the collection images is gone, which I do not want.
Visually, I don not want to change anything from what it looks right now, however, right now I have the spaces built with hypervisual and not the code. So I would love to remove hypervisual and add the spaces with the code? Sorry for any misunderstanding and thank you for your help.
In the below screenshot I did remove hyper visual. How can I add the space between the grey area and the collection overview?
Thanks for the explanation again.
You can add the following code at the bottom of your assets/theme.scss.liquid file to give space above your collection list.
div#shopify-section-collection-list {
margin-top: 30px;
}
Hope this works.
Thanks!
@dmwwebartisan Perfect, you are a star, thank you so much!
One last question: In case I want to add another space above the footer, I assume I copy and adjust the code, right?
Thank you so much!!
No, for the space above the footer. You can add the following code.
footer#section-footer {
margin-top: 20px;
}
We have to take section elements in CSS to do so. Hope this works.
Thanks!
It's my pleasure to help you !!
wow! thanks so much! it looks great. Can you send me a code for adding the space above the picture as well. I also need a margin / space above the picture and below my slideshow. Thanks again!
Please add the following code at the bottom of your assets/theme.css file.
.js .Slideshow--fullscreen { margin-bottom: 50px;}
Hope this works.
Thanks!
hello @dmwwebartisan
May I ask you again for your help? We currently do have two collection lists on our homepage, the desktop version shows the grid, however, on mobile we would like to have a spacer between the collections.
I did add your piece of code but I assume since we have 2 collection lists now, I need to adjust this?
Thank you!
Katrin
Please add the following code at the bottom of your assets/theme.css file.
div#shopify-section-1621417080045da5b1 {
margin-top: 15px;
}
Hope this works.
Thanks!
Hello,
Hoping for some help here too! Would like a space between the first parallax image and the section below on the home page. It's prestige theme. My website is www.headsandtails.shop
Many thanks!
I can't thank you enough for all your help. Can you help me with a code for space here? I will attach a picture and the url. @dmwwebartisan
Hello there! could you please help me . I would like to put a space between my slideshow and the rich text right below it in the gradient colour.
hello i have used this code youve provided and it has worked thank you !! although it doesn't work on mobile though is this another code i will need to input?
This worked for me! Thank you!!
Hello,
this is a fantastic solution, exactly what I was looking for too.
Only if I paste the code the "spacer" appaers at the bottom of my homepage. How can I influence the position?
Thank you!
Katrin
Hey, many thanks for this- super helpful!
Im just not sure where to add the code, i either find in asstes theme.ccs OR theme.liquid and not theme.scss.liquid (see screenshot) just want to make sure I put it where it supposed to me, can you help me? Thanks a lot!
Please share your problem with me and also share your store URL!
I can help you!
Thanks!
hi, thanks a lot!
the URL is: https://adadastore.com
and we want to have a space after the first section (the slideshow) ...its prestige theme but im not sure where to put the code in the html since I can't find assets/theme.scss.liquid.
thanks again
Inga
the store URL is adadastore.com and I cannot find the location: assets/theme.scss.liquid
Highly appreciate your help
Inga
Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024