product page details

Store Design
1

hi everyone, i have a few questions

  1. is there a way to hide the price until the cursor hovers over the product?

  2. how can i add the material as a sort of subtitle/subheading, both above the price on the collection page and product page?

  3. how can i change my ‘select size’ to open up as a side page, rather than a dropdown menu?

  4. how do i add a size guide to show up as a side page?

  5. how can i change my ‘place in cart’ to not be a single color, and instead have this white lines design?

asherherbert_0-1730942290907.jpeg
asherherbert_0-1730942290907.jpeg274×400 5.88 KB

asherherbert_1-1730942291126.jpeg
asherherbert_1-1730942291126.jpeg248×400 6.82 KB

asherherbert_2-1730942290906.jpeg
asherherbert_2-1730942290906.jpeg347×400 12.6 KB

asherherbert_3-1730942290935.jpeg
asherherbert_3-1730942290935.jpeg324×400 5.29 KB

apologies for the number of questions, thanks in advance.

2

Hi @asherherbert ,

Please send the website link, I will check it for you

3

https://asherherbert.com/
password: shuler

thanks!

4

Hi @asherherbert ,

I checked and you are using Dawn theme?

5

yes, will probably have to use css i’m assuming

6

Hi @asherherbert ,

It will take more than just the CSS code for the Dawn theme if you want to do all this. It will include Liquid, HTML and JS changes.

Therefore, I recommend you hire a professional for it.

I hope it helps!

7

okay, will they all require professional help? or some can be done?

8

Hi @asherherbert ,

1: You can use CSS code for it, it won’t work 100% like demo, but it will work.

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

@media screen and (min-width: 990px) {
    .product-card-wrapper .card-information {
        visibility: hidden;
    }
    .product-card-wrapper.card-wrapper:hover .card-information {
        visibility: visible;
    }
}

2: It will need you to add Metafield for this, do you have experience with code?

3, 4: You should hire a professional for it.

5: Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.product-form__submit.button:after {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    margin: 5px 0;
    border-radius: 0;
}
9

okay, thank you very much for your help!

10

Hi @asherherbert ,

You’re welcome and happy to help :slightly_smiling_face: