Hi everyone,
I’m building my own website and would like to customize my product page, thanks in advance!https://didime.it/
Below are the specific changes I would like to implement:
Product Image Display
Adjust the width of your product images so that they take up half the page.
Product Description
Is it possible to add a top margin to the text, like this image?
Reposition the size options so they appear directly after the “Size” label, removing the surrounding box around the size number.
Dropdown Text Enhancement
https://advenedesign.com/products/the-age-bag-dark-taupe
Thank you very much for the help!
Hi @salina123 , For the first two use a theme css setting , with some of the css below.
For the third item to make collapsible row content show in a side drawer that is an advanced theme customization in themes not already built to do that.
If you need that reach out to me for customization services, contact info in signature .
salina123:
Product Image Display
Adjust the width of your product images so that they take up half the page. Product Description
Is it possible to add a top margin to the text, like this image?
https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css
Either in the product templates or as a global using something like the following
/* make product image 'width' ~%50 */
.product.row .container.product__outer {
padding-left: 0;
gap: 0;
}
/* margin top of product entire text area */
.product__info-container {
margin-top: 0;
}
/* margin top of product description area */
.product__description {
margin-top: 0;
}
Thank you @PaulNewton for the support.
I attempted to add the code to the CSS of the product page, but nothing changed or took effect. Am I missing something?
That looks like the comments are missing the starting slash /.
I’ve tried also with the / but still
oh there’s a missing dot on the container class name, use this:
/* make product image 'width' ~%50 */
.product.row .container.product__outer {
padding-left: 0;
gap: 0;
}
Thank you Paul, the description margin is functioning correctly now.
Regarding the side drawer customization, I understand it’s more advanced, but could you also assist with the initial request regarding the size button? Specifically, I need to reposition the size options to appear immediately after the “Size” label, and remove the surrounding box around the size number.
Thank you!
Images are literally ~half width in chrome
The size option and it’s inputs are put on the same layout-line using something like the following
#SingleOptionSelector-1 legend { float: left; }
You’ll have to spend the time tweaking a lot of things to get something good looking.
Also keep in mind that #SingleOptionSelector-1 applies specifically when the size option is the second option.
Good Hunting..
Thank you Paul for the reply!
I see that, but for example the first images is full width, while the second and the third have different width now.
It’s a problem of size of images?
