How to remove "view in your space" AR button in dawn theme

Store Design
,
1

Hey, i want to remove this view in your space button next to the 3D model, i only want this button below the model. Please help. Thanks in advance.

IMG_0140.jpg
IMG_0140.jpg1170×1795 70.1 KB

2

Hi @suryagoswami7 ,

Please share your store URL. So that we can help you.

Thank you.

3

sure.

URL: https://thesmugglerstore.in/

Product pag: https://thesmugglerstore.in/products/case-testing

4

Hello @suryagoswami7 ,

You can follow these steps:

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

GemPages_0-1676948160738.png
GemPages_0-1676948160738.png400×193 29.2 KB

  1. Open your theme.liquid file, paste the below code before

GemPages_1-1676948178060.png
GemPages_1-1676948178060.png1506×945 74.6 KB

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

5

Hey @GemPages , I tried the code but it didn’t worked for me. Still facing the same issue.

6

Hey @PageFly-Kate , Did you found a solution for it?

7

Hi @suryagoswami7

We noticed in the file component-product-model.css, there is a line of code that hides all those buttons:

button.button.button--full-width.product__xr-button {
    display: none !important;
}

You should remove !important. To be able to display a button, please add the following line of code at the end of the base.css file:

@media screen and (max-width: 749px) {
  .slider.slider--mobile .product__xr-button[data-shopify-xr-hidden] {
     display: none !important;
  }
  .product__media-wrapper .product__xr-button[data-shopify-xr-hidden] {
     display: block !important;
     visibility: initial !important;
  }
}

I hope that this can help you.

8

Hey @BSS-Commerce , I tried the code you gave, but its not working. Still the button is next to the 3D Model, and in tablet view i am seeing 2 view in your space buttons.

Phone View
Phone View1170×1774 39.9 KB

Tablet View
Tablet View1102×1326 71.9 KB

9

Hi @suryagoswami7

You can try again with the following code and you should make sure to remove the !important as we mentioned in the previous reply:

@media screen and (max-width: 749px) {
  .slider.slider--mobile .product__xr-button[data-shopify-xr-hidden] {
     display: none !important;
  }
  .product__media-wrapper .product__xr-button[data-shopify-xr-hidden] {
     display: block;
     visibility: initial !important;
  }
}

If it still doesn’t work, please provide us with the product link again (currently, we can not access it).

10

Hey @BSS-Commerce , I tired this code but it didn’t worked, the view in your space button got disappeared.

product link:- https://thesmugglerstore.in/products/euphoria-iphone-glass-case

11

Hi @suryagoswami7

You find the file component-product-model.css and find the end of the file with the following code:

button.button.button--full-width.product__xr-button {
    display: none !important;
}

And then remove the !important. You add the code to the theme.liquid file after :

Hope that it will work for you.

12

Hey @BSS-Commerce , I followed all the steps, but it still didn’t worked for me. attaching the screenshot of the result after using your code. Both the buttons disappeared.

IMG_0291 2.jpg
IMG_0291 2.jpg1170×1966 69.6 KB

button.button.button--full-width.product__xr-button {
    display: none !important;
}

I found this code on shopify community, to remove the button as our website is live and we don’t want our customers to see two “View in your space” buttons, That’s why we used this code.