Dawn Theme Product Page Back Button and View All

[Andy106]

Currently I have created this by creating a new back-button.liquid:

Go Back

.backButton { margin: 1rem auto; }

View All Products

.viewallbutton { position: absolute; right: 170px; margin: -5.85rem auto; }

However, I want to be able to customize the buttons (e.g make font smaller/make it rounder/change colo etc).

Also, the View All button doesn’t work, when you click on it nothing happens. The view all button, I want to take me to view all collections.

Back button works well.

I would appreciate any help. Thanks

[ExpertRookie]

Hi @Andy106

To change the style of the button you can try use this css code:

/*change the style of the back button*/
.backButton button {
font-size: 10px;
background: red;
}

To make the button view all you can try to use this code

View All Products

[Andy106]

Thank you for your reply! View All button now works correctly.

Heading towards the required result, However, I still have some other issues, please see picture:

I can’t get the View All button to be aligned in the same level as the Back button. I want them to be on the same level.

Also I cant get the boarder (outline) of the button to become circular rather than square. If you also know how to adjust the outline’s thickness is also something I am interested in.

Preview here: https://b3tqgwmtqccnef8v-68796285242.shopifypreview.com

My code is now:

Show More

View All Products

Thanks again!

[ExpertRookie]

You can try to use this code:

View All Products

[Andy106]

Hello and thanks for the reply. I replaced the code with the one provided and I get this result:

View All Button is gone and the Go Back button has not visible change from before.

https://2k9aygm7r49pkwam-68796285242.shopifypreview.com

[Andy106]

any update to this?

[ExpertRookie]

I Just reply on this topic: https://community.shopify.com/c/shopify-design/back-button-and-view-all-doesn-t-work-on-mobile/td-p/1857953