How To Move Country/Region Selector Horizontally and Vertically On PC

Store Design
, , , , ,

Topic summary

A user seeks CSS code to reposition their store’s country/region selector in the footer—specifically moving it horizontally (left) and vertically (up/down) on desktop only.

Solutions Provided:

  • Made4uo-Ribe offered CSS to adjust the footer wrapper’s max-width to 100%, allowing horizontal repositioning
  • PageFly-Henry suggested adding CSS with position: absolute and max-width: 100% to the .footer__content-bottom-wrapper.page-width class in base.css
  • BSS-TekLabs provided a media query targeting desktop screens (min-width: 750px) with padding adjustments (30px top/bottom) for the localization form select element

Implementation Steps:

All solutions involve editing the theme’s CSS file (base.css, style.css, or theme.css) via Online Store > Themes > Edit code, then pasting the provided code at the bottom of the file.

Current Status:

The user confirmed they only need vertical positioning adjustments (padding-based) without scroll-following behavior. The discussion remains open as the user evaluates which CSS approach best meets their needs.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
1

Thanks in advance!

I am looking to move my country/region selector in the footer section to the left and eventually up/down so if there was a code for moving it horizontally & vertically for pc only, that would be much appreciated! Example shown below.

Screenshot 2024-06-28 095948.png
Screenshot 2024-06-28 095948.png1116Ă—266 1.97 KB

https://decemberschild.com/

password: dc

1 Like
2

Hi @MMast

Do you mean like this?

Made4uoRibe_0-1719585578451.png
Made4uoRibe_0-1719585578451.png1873Ă—197 2.13 KB

Is this only on the desktopn screen?

Check this one.

  1. From you Admin page, go to Online Store > Themes
  2. Select the theme you want to edit
  3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  4. Then place the code below at the very bottom of the file.
.footer__content-bottom-wrapper.page-width {
    max-width: 100%;
}
  • And Save.
1 Like
3

Is there a way to move the country/region selector up/down (vertically) if need be?

4

Hi @MMast

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

.footer__content-bottom-wrapper.page-width {

margin: 0 !important;

max-width: 100% !important;

position: absolute;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

5 
@media screen and (min-width: 750px) {
    .footer__content-bottom-wrapper.page-width {
        max-width: 100% !important;
    }
 .localization-form__select {
 padding-top: 30px !important;
    padding-bottom: 30px !important;
}
}

Hi @MMast Here is the solution for you

1 Like
6

Do you mean up and down in the footer?

7

Yes

8

Do you want the currency will go with the flow when scrolling the page(this needs a develper to write the code)?

or just change position up and down in the footer we can do by css code, but if you like a default buttons to make it move then that is another developer to do it.

9

Just the position up and down (padding). I don’t need it to go with the flow when scrolling :slightly_smiling_face: