Changing the margin/padding between the sections and pictures of products

New Member
8 0 0

Hello, may I know how do you change the margin/padding between the different sections as well as the products. I have created several sections in my website: rich text, featured products, our collection and newsletter. There is however, a large white gap between the 'our collection' section and the pictures from the featured products. So:

1. How do I remove the white gap between the two elements?

2. How do I reduce/alter the gap size between the featured products and the pictures below it (I attached 3 pictures below my 'featured product' section?

Thanks!

Nicholas.

 

0 Likes
Shopify Staff
Shopify Staff
335 31 78

Hello, Nicholas!

This is May from Shopify.

Thank you for posting your questions! I am not an expert in coding, however this looks like some adjustments that can be done by editing your theme code. In the steps below, I will base my tutorial on the Brooklyn theme, since it is one of the most popular free themes. Now, let’s begin!

1. How do I remove the white gap between the two elements?

     i. For starters, from your admin, you’ll want to go to ‘Online Store > Actions > Edit code’.

     ii. Inside your ‘Assets’ folder, select ‘theme.scss.liquid’.

     iii. Search for ‘.shopify-section {‘. You can press Command + F if you are on a mac or Control + F on Windows.

     iv. To adjust the spacing, you can change ‘margin-top’ by entering a number, or change the operations. For example:

margin-top: 50px;

Or

margin-top: $gutter * 2; //value of $gutter multiplied by 2

v. Click ‘Save’.

Please note that once you make changes to ‘theme.scss.liquid’, you cannot revert back to older versions. Therefore, I strongly recommend making a duplicate of your theme, to ensure that you have a backup in case there are any unintended results.

2. How do I reduce/alter the gap size between the featured products and the pictures below it?

     i. From your theme editor, open ‘featured-products.liquid’, which can be found inside the ‘Sections’ folder.

     ii. Find this line of code ‘<div class="section-header text-center">’. If you have not made any adjustment to this file,  you can find this code on line 4.

     iii. Inside the triangle brackets, add ‘style="margin-bottom: 0px;’. You can change ‘0px’ with any numbers you think is suitable for your website. Your code should look like:

<div class="section-header text-center" style="margin-bottom: 0px;">

     iv. Click ‘Save’.

Unlike ‘theme.scss.liquid’, with ‘featured-products.liquid’ file, you can roll back to an older version if you ever want to revert your code back to original. If you are not comfortable with making these changes, I highly suggest reaching out to our Shopify Experts, or contact our support and we can check if your account is eligible for theme customizations requests.

Let me know if this helps. Feel free to reply back to this thread or contact our 24/7 support, and we’ll happily help!

Kind Regards,

May

Shopify Support

May | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

1 Like
New Member
8 0 0

Dear May,

Thanks for your prompt reply! You managed to solve all my problems. PERFECT!!! Super thanks and a big like for you :)

Nick.

0 Likes
Shopify Staff
Shopify Staff
335 31 78

Hey, Nicholas!

That is so awesome to hear! I am very glad that you are able to make these changes. Thank you very much for your feedback!

Cheers,

May
Shopify Support

May | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
New Member
1 0 0

Hey, these steps don't work with the Boundless theme. The keywords you mentioned are not present. Can you help?

 

0 Likes