Can the mobile 'Shop Now' button position be changed in Symmetry theme?

Technical Q&A
, , ,
1

Hello,

I am wondering if there is a way to reposition the “Shop Now” button in the slide display on mobile. For desktop we have the button position in “Bottom Left”, but on the mobile display it gets positioned in center automatically.

Screen Shot 2023-05-18 at 9.09.25 PM.png
Screen Shot 2023-05-18 at 9.09.25 PM.png770×984 193 KB

Can this be changed? Our site is built on the Symmetry theme by Clean Canvas.

Thanks

2

Hi @bijonari

Can you share with me the URL - and password if password protected. I will help you check it.

3

  1. In the list of files on the left-hand side, find and click on “theme.scss.liquid” or “theme.css.liquid” to open the file in the code editor.

  2. Scroll to the bottom of the file or to a section where you can add your custom CSS code.

  3. Add the following CSS code to reposition the “Shop Now” button on mobile:

@media only screen and (max-width: 767px) {
  .your-slide-class .your-button-class {
    /* Add your desired styles to reposition the button on mobile */
    /* For example, to align the button to the right, you can use: */
    text-align: right;
  }
}

Replace .your-slide-class with the appropriate CSS class of the slide element and .your-button-class with the CSS class of the “Shop Now” button. You may need to inspect the HTML structure or consult the theme documentation to find the correct classes for your specific slide and button.