Shopify themes, liquid, logos, and UX
Hello,
I hope someone can help. I have the Prestige Theme, version 1, I believe, and the Product Description & Specification section overlaps with Review Section & Recently Viewed. I have noticed this tends to be the case when the description or specifications section is long.
Here are some images below of the issue:
I would also love to have the Product Description & Specification sections be under the product image instead of to the side, so that it is wider.
@LadyP- this will need code editing, can you please share your page link where you have this issue?
@LadyP- we will need to make multiple settings to make it like this
Okay. What will these settings be?
@LadyP- please add given css to the very end of your theme.scss.css file and check, then we can make more adjustments needed
@media screen and (min-width: 1008px) {
.Product__InfoWrapper {position: initial;}
.template-product .Product__Wrapper{display: flex; max-width: 100%;}
}
To verify I am inputting the given code after the end of what is circled in the picture below?
@LadyP- yes... after the last "}"
Okay. I have added it.
@LadyP- it is not overlapped on my screen now
I just checked and the overlapping issue seems to be fixed.
Thank you!
Will the next steps you mentioned be about getting the description to be under the product image instead of to the right?
@LadyP- do you want text under image?
I am not sure if by text under image we are referencing the same thing, however, I am thinking something similar to this if a simple coding will fix it, where the product information is below the product image like below from this website.
I believe we are talking about the same thing. But yes, I want for the product information to be below the product information if a simple coding can fix it. Similar to the below image from this website.
Okay. I have posted my response twice only to see it disappear. Not sure what is going on but I will try again.
I want for the product information to be below the product image if a simple coding can fix it. Similar to the below image.
@suyash1 Okay now I have an even bigger problem. While the code given took care of the issue with overlapping, it now has caused my product images to no longer show and I am in the middle of running ads!
Below is the image of what is seen in place of the product images. I am going to remove that code for now until a better solution can be provided.
I also see the following message in the theme editor:
Convert .scss and .scss.liquid files to .css or .css.liquid for a better performing online store and theme editor.
Could this be the reason why the provided code caused my product images to disappear? I really want to get this resolved as quickly as possible. Please anyone who can help kindly advise.
User | RANK |
---|---|
236 | |
159 | |
64 | |
55 | |
46 |
Thanks to all Community members that participated in our inaugural 2 week AMA on the new E...
By Jacqui Mar 10, 2023Upskill and stand out with the new Shopify Foundations Certification program
By SarahF_Shopify Mar 6, 2023One of the key components to running a successful online business is having clear and co...
By Ollie Mar 6, 2023