Solved

Spacing between varients

albertandkeefes
Tourist
8 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
1123 215 235

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
5127 1224 1498

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!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


View solution in original post

Replies 5 (5)

ThePrimeWeb
Shopify Partner
1171 305 232

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

techlyser_web
Shopify Partner
1123 215 235

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
8 0 4

Thank you so much for this! 😁

topnewyork
Trailblazer
215 25 27

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
5127 1224 1498

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!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com