Solved

How can I adjust spacing between product variants in a pop-up modal?

albertandkeefes
Tourist
9 0 4

Hi guys, I've recently added a pop up modal to my products and I'm struggling to adjust the space between the link and the other options shown below. Is anybody able to help? 🙂

 

Screenshot 2024-01-24 at 13.02.57.png

 

store URL is http://albertandkeefes.com

pw: galoch

 

Thank you 

Accepted Solutions (2)

techlyser_web
Shopify Partner
1611 299 322

This is an accepted solution.

Hello @albertandkeefes 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid

<style>
  .product__info-wrapper .product__info-container>*+* {
       margin: unset !important;
  }
</style>

techlyser_web_0-1706103163708.png

 

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

View solution in original post

Made4uo-Ribe
Shopify Partner
6381 1532 1902

This is an accepted solution.

Hi @albertandkeefes 

Check this one. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

#ProductInfo-template--22006392127809__main > div:nth-child(3), div#shopify-block-judgeme_preview_badge_product_page_84a3970d {
    margin: 0px;
    display: none !important;
}
div#price-template--22006392127809__main {
    margin-bottom: 0px;
}
modal-opener.product-popup-modal__opener.no-js-hidden.quick-add-hidden {
    margin: 0px;
}
div#Quantity-Form-template--22006392127809__main {
    margin-top: 0px;
}

 

And Save. 

Result:

Made4uoRibe_0-1706109989589.png

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.

View solution in original post

Replies 5 (5)

ThePrimeWeb
Shopify Partner
2138 614 487

Hey @albertandkeefes,

Can you try adding this CSS in the theme.
Go to Edit Code in your theme and look for theme.css, base.css, or styles.css and add the following

div#shopify-block-judgeme_preview_badge_product_page_84a3970d {
    display: none;
}

#ProductInfo-template--22006392127809__main div:has(#product-form-installment-template--22006392127809__main) {
    display: none;
}

modal-opener[data-modal="#PopupModal-popup_MLwMga"] {
    margin: 0
}

#price-template--22006392127809__main {
    margin-bottom: 0;
}

 

Alternatively, adding it in the Custom CSS in the Theme Customizer -> Settings sometimes works too. 

ThePrimeWeb_0-1706102341423.png

 

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

techlyser_web
Shopify Partner
1611 299 322

This is an accepted solution.

Hello @albertandkeefes 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid

<style>
  .product__info-wrapper .product__info-container>*+* {
       margin: unset !important;
  }
</style>

techlyser_web_0-1706103163708.png

 

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
albertandkeefes
Tourist
9 0 4

Thank you so much for this! 😁

topnewyork
Navigator
298 34 45

Hi Albertandkeefes,

Go to "Online Store" > "Themes" > "Customize.
You may need to use custom CSS. In the "Additional CSS" section, add:

.product__info-container>*+* {
    margin: 0 !important;
}


 Or

In Shopify Admin, navigate to "Edit theme code", then open the "base.css" file and add the following code at the end:

.product__info-container>*+*{
     margin: 0 !important;
}


If I managed to help you then, don't forget to Like it and Mark it as Solution!

Need a Shopify developer?
Hire us at topnewyorkwebdesign.com
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel

Made4uo-Ribe
Shopify Partner
6381 1532 1902

This is an accepted solution.

Hi @albertandkeefes 

Check this one. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

#ProductInfo-template--22006392127809__main > div:nth-child(3), div#shopify-block-judgeme_preview_badge_product_page_84a3970d {
    margin: 0px;
    display: none !important;
}
div#price-template--22006392127809__main {
    margin-bottom: 0px;
}
modal-opener.product-popup-modal__opener.no-js-hidden.quick-add-hidden {
    margin: 0px;
}
div#Quantity-Form-template--22006392127809__main {
    margin-top: 0px;
}

 

And Save. 

Result:

Made4uoRibe_0-1706109989589.png

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.