How can I adjust padding and add unique subtitles on product pages?

Store Design
1

Hey you guys,

Another question from me. I want to make the distance smaller between the title and cta button on my product pages. I can add padding but I don’t know how to reduce it. In Theme.css.liquid I added this code, but that doesn’t reduce enough of the space between the 2 sections.

.tt-row-custom-01  {  padding-top: 0px;}

I also would like to add a subtitle under the title. Only problem is that it’s not a standard subtitle. It’s different with every product, so I’m not sure if this is even possible.

Thanks in advance!

daisyweber_0-1643968364690.png
daisyweber_0-1643968364690.png1475×738 155 KB

2

Hi @daisyweber

Would you mind sharing your store’s URL so we can provide a solution for the spacing?

As for the subtitle, you can use Metafields to create a field input for every product called “Subtitle” and then you can add this to your code for every product to display if it’s filled.

This should help get you started: Metafields · Shopify Help Center

Cheers!

3

@daisyweber ,

your site is password protected

please send your site password

4

Hi @JHKCreate here’s the link https://4v3tna3svzg7xt7f-58174800078.shopifypreview.com

In menu please go to Administratie en financien > boekhouding > e-boekhouding

Funny, I’ve already added Metafields to my apps, but not sure how to work with it. I will take another look. Thank you!

5

@daisyweber you seem to have the price field still showing, if you’re sure it shouldn’t show anywhere use the following code to remove the section and pad things better:

.tt-product-single-info .tt-price {
    display: none;
}

I also see you have a “Collapsible Title”, that is taking the lower padding with white space, let me know if this should be removed as well.

Should that help answer your query, we always appreciate liking & marking an as answer to let the community find quality solutions faster. Thanks!

6

@daisyweber ,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > theme.css and paste this at the bottom of the file:
.tt-product-single-info .tt-wrapper {
    margin-top: 20px !important;
}
.tt-product-single-info .tt-price{
    display: none;
}

Thanks!

7

Thanks @JHKCreate and @infoatcodelab7 that worked perfectly for me :grinning_face_with_smiling_eyes: