How to remove left space in product page and decrease horizontal space between image DAWN

Solved

How to remove left space in product page and decrease horizontal space between image DAWN

NOT1
Shopify Partner
272 2 117

NOT1_0-1726233035849.png

I want to decrease the left space and the space between images 

 

 

Accepted Solutions (4)

Moeed
Shopify Partner
5346 1444 1729

This is an accepted solution.

Hey @NOT1 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.slider {
    gap: 0 !important;
}
</style>

RESULT:

Moeed_0-1726233203133.png

 

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

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


View solution in original post

Tech_Coding
Shopify Partner
301 76 67

This is an accepted solution.

Hello @NOT1 

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>
@media screen and (min-width: 750px) {
   product-info .page-width {
     padding-left: 8px !important; /*adjust according to you*/ 
   }
}
</style>

Tech_Coding_0-1726233414511.png

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.

View solution in original post

Moeed
Shopify Partner
5346 1444 1729

This is an accepted solution.

Hey @NOT1 

 

Try this updated code with the same steps

{% if template == 'product' %}
<style>
.slider {
    gap: 0 !important;
}
.page-width {
    margin: 0 !important;
    max-width: 100%;
}
</style>
{% endif %}

RESULT:

Moeed_0-1726233619048.png

 

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

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


View solution in original post

websensepro
Shopify Partner
1214 135 156

This is an accepted solution.

Hi @NOT1 ,

 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

 

<style>
.slider {
    gap: 0 !important;
}
product-info .page-width {
     padding-left: 5px !important; 
   }
</style>

websensepro_0-1726233592872.png

 

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

Free Shopify Beginner Tutorial

View solution in original post

Replies 6 (6)

Moeed
Shopify Partner
5346 1444 1729

This is an accepted solution.

Hey @NOT1 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.slider {
    gap: 0 !important;
}
</style>

RESULT:

Moeed_0-1726233203133.png

 

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

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


NOT1
Shopify Partner
272 2 117

Thanks it worked and how can i decrease the left padding  ?

Moeed
Shopify Partner
5346 1444 1729

This is an accepted solution.

Hey @NOT1 

 

Try this updated code with the same steps

{% if template == 'product' %}
<style>
.slider {
    gap: 0 !important;
}
.page-width {
    margin: 0 !important;
    max-width: 100%;
}
</style>
{% endif %}

RESULT:

Moeed_0-1726233619048.png

 

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

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


Tech_Coding
Shopify Partner
301 76 67

This is an accepted solution.

Hello @NOT1 

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>
@media screen and (min-width: 750px) {
   product-info .page-width {
     padding-left: 8px !important; /*adjust according to you*/ 
   }
}
</style>

Tech_Coding_0-1726233414511.png

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.
NOT1
Shopify Partner
272 2 117

appreciate it

websensepro
Shopify Partner
1214 135 156

This is an accepted solution.

Hi @NOT1 ,

 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

 

<style>
.slider {
    gap: 0 !important;
}
product-info .page-width {
     padding-left: 5px !important; 
   }
</style>

websensepro_0-1726233592872.png

 

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

Free Shopify Beginner Tutorial