Solved

Need help moving product image navigation dots to the left on mobile view - Focal Theme

Logototheleft
Tourist
20 0 0

Have tried messing with the code but they stay centered no matter what. Is there a way to do this in the code?

Accepted Solutions (3)
ThePrimeWeb
Shopify Partner
2127 608 473

This is an accepted solution.

Hey @Logototheleft,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
@media only screen and (max-width: 989px) {
    flickity-controls.product__media-nav {
        justify-content: flex-start !important;
    }
    
    .dots-nav.dots-nav--centered.hidden-lap-and-up {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
    }    
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1712664979518.jpeg

 

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!

View solution in original post

ThePrimeWeb
Shopify Partner
2127 608 473

This is an accepted solution.

Hey @Logototheleft,

 

Add this code below <head> in theme.liquid, same instructions as above.

<style>
button.checkout-button.button.button--primary.button--full[form="mini-cart-form"] {
    color: rgb(var(--button-background)) !important;
    position: relative !important;
}

button.checkout-button.button.button--primary.button--full[form="mini-cart-form"]:after {
    content: "Proceed to checkout" !important;
    color: #fff !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-size: 11px !important;
}
</style>

 

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!

View solution in original post

ThePrimeWeb
Shopify Partner
2127 608 473

This is an accepted solution.

Not sure what you mean, but if it's a mobile OS functionality, highly unlikely.

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!

View solution in original post

Replies 26 (26)

ThePrimeWeb
Shopify Partner
2127 608 473

Hey @Logototheleft,

 

Can you share the link to your store?

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!
Logototheleft
Tourist
20 0 0

Hi here is the site,

https://568839.myshopify.com/

ThePrimeWeb
Shopify Partner
2127 608 473

This is an accepted solution.

Hey @Logototheleft,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
@media only screen and (max-width: 989px) {
    flickity-controls.product__media-nav {
        justify-content: flex-start !important;
    }
    
    .dots-nav.dots-nav--centered.hidden-lap-and-up {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
    }    
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1712664979518.jpeg

 

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!
Logototheleft
Tourist
20 0 0

Thank you! Is it possible for you to solve another problem I have not found a solution for? 

What I would like to do is reduce the size of the paddings on the sides of everything on the whole website.

ThePrimeWeb
Shopify Partner
2127 608 473

Hey @Logototheleft,

 

Use the same instructions and paste this code as well.

 

Change the two values 7% to whatever value you like for how much space you want on the left and right. I purposely made it an odd number so you can easily notice it. Make sure both values are the same after editing.

<style>
@media only screen and (min-width: 990px) {
    .container, .shopify-policy__container.shopify-policy__container {
        max-width: 100% !important;
        padding-left: 7% !important;
        padding-right: 7% !important;
    }
    
    .faq__wrapper {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .product.product--thumbnails-bottom {
        margin: 0 !important;
    }
    
    [dir=ltr] .product__media {
        padding-left: 0 !important;
    }    
}
</style>

 

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!
Logototheleft
Tourist
20 0 0

Do I add this code right under head or under the previous code you gave me?

ThePrimeWeb
Shopify Partner
2127 608 473

Right under <head>

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!
Logototheleft
Tourist
20 0 0

Did not affect anything on the site on mobile view. What I'd like is all the content on product page like (product name, price add to cart button) to be closer to the edges (wider) also the hamburger and cart icon on the header. Is there an easy way to do this?

 

ThePrimeWeb
Shopify Partner
2127 608 473

The code I gave you is for desktop. I didn't think you'd need mobile since mobile is already very close to the edges. 

 

Also I saw that you changed it to 20%. That does nothing anyway because 20+20 = 40%. So you are asking the page to leave 40% whitespace. Make it lower like 5%.

 

 

For mobile use the code below. Same instructions. Paste below <head>

 

Again, change the 6px to a value you like but not too high, your current one is about 20px. So obviously, go lower than that.

<style>
@media only screen and (max-width: 989px) {
    .container, .shopify-policy__container.shopify-policy__container {
        padding-left: 6px;
        padding-right: 6px;
    }    
}
</style>

 

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!
Logototheleft
Tourist
20 0 0

Now the site moves sideways when I reduce the side paddings. Is it because the product image is still as wide as before? How to make everything to the same padding px 

ThePrimeWeb
Shopify Partner
2127 608 473

What do you mean moves sideways? Can you share a screenshot?

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!
Logototheleft
Tourist
20 0 0

E233EB39-ABA1-4551-8A59-41E1D6BC250E.png

Logototheleft
Tourist
20 0 0

1E5EFBB0-C06A-48FD-8D2F-FF04E6DB68B9.jpeg

 On the bottom you can see the scroller that is usually only on the side

ThePrimeWeb
Shopify Partner
2127 608 473

Hmm. Just remove that code. Your theme is causing too many issues for me to fix if that code is changed. 

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!
Logototheleft
Tourist
20 0 0

Alright, thanks for all the help today

Logototheleft
Tourist
20 0 0

Actually one more thing, removing the price from checkout button in the cart folder. Reply if you see this and I’ll remove the store password.

ThePrimeWeb
Shopify Partner
2127 608 473

If the code is seperated it would be possible but if it's written in one line "Checkout ($xx.xx)" in the code, then it wouldn't be, but I need to take a look and see.

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!
Logototheleft
Tourist
20 0 0

I removed the password so you can check it out

Logototheleft
Tourist
20 0 0

Its the Proceed to checkout button, you can see it when you add an item to the cart 

ThePrimeWeb
Shopify Partner
2127 608 473

This is an accepted solution.

Hey @Logototheleft,

 

Add this code below <head> in theme.liquid, same instructions as above.

<style>
button.checkout-button.button.button--primary.button--full[form="mini-cart-form"] {
    color: rgb(var(--button-background)) !important;
    position: relative !important;
}

button.checkout-button.button.button--primary.button--full[form="mini-cart-form"]:after {
    content: "Proceed to checkout" !important;
    color: #fff !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-size: 11px !important;
}
</style>

 

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!
Logototheleft
Tourist
20 0 0

Thanks!

Logototheleft
Tourist
20 0 0

Do you know if the new one page checkout page is customizable in code? I would like to make the round edges of in there sharp and remove the cart icon that takes the visitor to the cart page (not cart drawer) which I don’t want to be accessible.

ThePrimeWeb
Shopify Partner
2127 608 473

No, the checkout page is not customizable.

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!
Logototheleft
Tourist
20 0 0

Is there a way to remove the small tap area black box that flashes quickly when you press something on mobile?

ThePrimeWeb
Shopify Partner
2127 608 473

This is an accepted solution.

Not sure what you mean, but if it's a mobile OS functionality, highly unlikely.

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!
Logototheleft
Tourist
20 0 0

Can I still reach you on this thread? I need some help changing the color of the space where website url is showing on mobile. I remember you were able to change this in the normal color settings when I was using a free theme. I guess it has to be changed in the code with this theme. Reply if you see this and I'll remove the password again.