product page details

Store Design

Topic summary

Customizations requested for a Shopify Dawn store’s collection/product pages: hide price on hover, add material as a subtitle, change “select size” to a side panel, add a size guide side panel, and restyle the add-to-cart button with white lines.

Theme confirmed as Dawn. Several changes require more than CSS, involving Liquid (Shopify’s templating language), HTML, and JavaScript; professional help is recommended for the side-panel features.

Implemented/Actionable:

  • Hide price until hover (desktop): CSS provided to toggle card information visibility on hover in base.css; works but not fully like the demo.
  • Add-to-cart styling: CSS provided in base.css to add white top/bottom borders and remove border radius via the button’s :after pseudo-element.

Partially addressed:

  • Material subtitle: requires setting up a Metafield (custom data field) and theme code changes; coding experience asked.

Not addressed without custom development:

  • “Select size” opening as a side page.
  • Size guide as a side page.

Images are included to illustrate desired button design and layout. Outcome: partial CSS solutions shared; next steps include adding Metafields and likely hiring a developer for side-panel features. Discussion ends amicably; some items remain open.

Summarized with AI on December 15. AI used: gpt-5.
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!

1 Like
10

Hi @asherherbert ,

You’re welcome and happy to help :slightly_smiling_face: