Shopify themes, liquid, logos, and UX
Hi @Shopify
I am using "custom content section" to create a BUY NOW button to place it in the home page.
But I realize that the "custom contect section" occupied big space, which make the "button" was placed far from the upper section. so I was trying to edit the code to decrease the height. Please let me know how, thank you. my theme is Debut.
John
Solved! Go to the solution
This is an accepted solution.
Hello There,
1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.css and paste this at the bottom of the file:
div#shopify-section-1620876630cd872b4c {
padding-top: 0;
height: auto;
}
div#shopify-section-1620876630cd872b4c center a.btn.hero__btn {
margin-top: 0;
}
This is an accepted solution.
Hello,
Welcome to the shopify Community.
Please Go to Online Store -> Themes -> Edit code -> Assets -> theme.scss.liquid and paste this code at the end of this file.
#shopify-section-1620876630cd872b4c {
padding-top: 0px;
}
#shopify-section-1620876630cd872b4c .custom__item {
margin-bottom: 0px;
}
Hello, @John-Yixiaobao
Welcome to the Shopify Community.
I read your problem and it seems that I need to analyze your website to provide solution here.
Would you please share your website URL and if your website is password protected then also provide password.
This is an accepted solution.
Hello,
Welcome to the shopify Community.
Please Go to Online Store -> Themes -> Edit code -> Assets -> theme.scss.liquid and paste this code at the end of this file.
#shopify-section-1620876630cd872b4c {
padding-top: 0px;
}
#shopify-section-1620876630cd872b4c .custom__item {
margin-bottom: 0px;
}
Thank you Hardik, it was solved. Thank you for your code. You are all Pros
Kindly feel free to get back to me if you need any further assistance Thanks!
here is the final layout, I like it
@ZestardTechand @Hardik29418 please can you assist me?
I want to do the same thing but I can't make it work with the code you've provided.
My website is www.electricrideco.com
I have a custom html section on my homepage containing icons and I would like to change the height of the section.
I would like the section to be changed to approx. the height of the red box in the screenshot below:
Thanks in advance for your help.
In line 5501 of your theme's file assets/theme.scss you will find this code:
.section-block--padding {
padding: 30px; }
You can change it to something like this:
.section-block--padding {
padding: 10px 30px;
}
Thanks for your input. This works, however it changes the padding of all my custom html sections and I only want to change this one section.
The section that I want to change is "shopify-section-1641540086e4ae1f73".
Please can you assist with code for changing only this one section?
@guyv
Sure, you can add an extra style targeted to that specific section:
.section-block--padding {
padding: 30px; }
#shopify-section-1641540086e4ae1f73 .section-block--padding {
padding: 10px 30px;
}
Hope this helps.
You can add an extra line to the stylesheet to target that block when it's inside the section you've just mentioned:
From this
.section-block--padding {
padding: 30px;
}
To this:
.section-block--padding {
padding: 30px;
}
#shopify-section-1641540086e4ae1f73 .section-block--padding {
padding: 10px 30px;
}
Hope this helps.
I am also hoping to adjust the height of a couple of sections on the homepage - I have tried this code targeting the sections and they don't seem to work for me. Any tips? url: https://afca7f-2.myshopify.com/
Trying to target the following so that the top and bottom white space matches the border between the images. Same spacing on all sides basically.
Hello There,
Please share your store URL and password.
So that I will check and let you know the exact solution here.
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community!😊
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
Hi,
LIke the others have said in the forum, it's a bit difficult to diagnose without seeing the website.
Having said that, if you can see the section id for this block, that could be something like this:
<div id="shopify-section-161916007858df887d" class="shopify-section index-section ">
More HTML code including the button
</div>
You could then adjust the padding of the block adding this code to your CSS file (note that in your case the section id will be different)
#shopify-section-161916007858df887d {
padding-top: 20px;
padding-bottom: 20px;
}
Hope this helps or at least puts you in the right direction.
sorry, my bad, forget to list the url, please help to look
This is an accepted solution.
Hello There,
1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.css and paste this at the bottom of the file:
div#shopify-section-1620876630cd872b4c {
padding-top: 0;
height: auto;
}
div#shopify-section-1620876630cd872b4c center a.btn.hero__btn {
margin-top: 0;
}
Solved. Thank you Pallavi
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024