Jump to content

2 columns of text/picture in product page for mobile version

Recommended Posts

12 hours ago, AlexaeWittock said:

Site URL: https://www.rewildoutfit.com

Hi
I tried all the codes you shared but nothing work... 
I would like to split in 2 columns my blocks text and/or pictures from my product page in mobile version to make it shorter and easier to purchase my products on the phone.

Also I would like the shop bag emoticon on top of mobile version

Thanks so much

Capture d’écran 2021-11-23 à 18.34.30.png

Capture d’écran 2021-11-23 à 18.34.42.png

Do you mean setting the layout of additional information? Making it into 2 column

image.png.4d8a60a34846d69405321cc710d4ca6f.png

Something like this?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

For previous issue, you can try adding to Home > Design > Custom Css

.ProductItem-additional .sqs-layout > .row > .col > .row:nth-child(2) .span-6 {
  width: 50% !important;
  float: left !important;
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
On 11/29/2021 at 1:24 AM, AlexaeWittock said:

Also an other question I dont succeed to remove that shop bag specific icon picture that I circled in red (not the squarespace one) - Can you help me please ? thx

Capture d’écran 2021-11-28 à 19.21.33.png

Use this CSS

header#header i.fa.fa-shopping-bag {
    visibility: hidden;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 11/30/2021 at 1:47 PM, AlexaeWittock said:

Can you help with this for my mobile version please ? 

You mean keep desktop - mobile same layout? With image on left - info on right?

https://rewildoutfit.com/en/hybrid/p/borealis-admiral

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 12/1/2021 at 11:13 PM, AlexaeWittock said:

Yes exactly on mobile version image on left and info (product title, price, quantity, and shop) on right

I think the layout won't be good. Add to Design > Custom CSS

/* Mobile products */
@media screen and (max-width:767px) {
.ProductItem-gallery {
    width: 40% !important;
    float: left !important;
}
.ProductItem .ProductItem-details {
    width: 60% !important;
    float: left !important;
    padding-left: 6vw !important;
}
.ProductItem .ProductItem-summary {
    flex-direction: row !important;
    align-items: flex-start !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
1 hour ago, tuanphan said:
/* Mobile products */
@media screen and (max-width:767px) {
.ProductItem-gallery {
    width: 40% !important;
    float: left !important;
}
.ProductItem .ProductItem-details {
    width: 60% !important;
    float: left !important;
    padding-left: 6vw !important;
}
.ProductItem .ProductItem-summary {
    flex-direction: row !important;
    align-items: flex-start !important;
}
}

You are right it is not good looking ! 

Can you help with code to then have :
1. Title on top of the picture but the title needs to be in my police "AUDREY"
2. I want side by side "Size" and "Quantity" on the same line

Thank you !

 

Link to comment
On 12/4/2021 at 4:37 PM, AlexaeWittock said:

You are right it is not good looking ! 

Can you help with code to then have :
1. Title on top of the picture but the title needs to be in my police "AUDREY"
2. I want side by side "Size" and "Quantity" on the same line

Thank you !

 

Keep left - right layout + do these or?

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 12/9/2021 at 6:45 PM, AlexaeWittock said:

Like in my screenshot attached - thx

Capture d’écran 2021-12-04 à 12.29.59.png

Add to Last Line in Settings > Advanced > Code injection > Footer > Then check again on real mobile

<script>
jQuery(document).ready(function($){
if (jQuery(window).width() < 767) {
$('h1.ProductItem-details-title').insertBefore('section.ProductItem-gallery');
  $('.product-quantity-input').appendTo('.product-variants');
}
});
</script>
<style>
  @media screen and (max-width:767px) {
  .product-variants {
    display: flex !important;
    width: 100% !important;
}
  }
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 weeks later...

Dear,

I have several issues, can you help please with codes ? 

A. MOBILE VERSION

1) Need shop bag in bold - you cannot clearly see it now (screenshot mobile 1)

2) Need title of the product less big - in 2 lines max (screenshot mobile 1)
3) Need Quantity square bloc same size than the size square bloc for good looking (screenshot mobile 2)

4) Need Add Shop Bag in my Audrey Police (screenshot mobile 2)

5) Need under title and price product, have the opportunity to select size, and add to shop direct with buttons without opening the product in other window (screenshot mobile 3)

6) Need to have 3 articles next to each other line by line (screenshot mobile 4)

B. LAPTOP VERSION

1) Need my police Audrey for my products titles (screenshot laptop 1)
2) Need shop bag in bold - you cannot clearly see it now (screenshot laptop 1)

3) Need all my other pages names wrote in black to be able to click and go back in other sections because like it is now we see noting as t is write in white with white color background (screenshot laptop 1)

4) Need also for laptop : under title and price product, have the opportunity to select size, and add to shop direct with buttons without opening the product in other window (screenshot mobile 3)

5) Need to have shop bag icon next to Shop page name (screenshot laptop 2)

In advance thank you so much for your precious help !!!!! 🙂

screenshot mobile 1.png

screenshot mobile 2.png

screenshot mobile 3.png

screenshot mobile 4.png

laptop 1.png

screenshot laptop 2.png

Link to comment
On 12/30/2021 at 6:49 PM, AlexaeWittock said:

Dear,

I have several issues, can you help please with codes ? 

A. MOBILE VERSION

1) Need shop bag in bold - you cannot clearly see it now (screenshot mobile 1)

2) Need title of the product less big - in 2 lines max (screenshot mobile 1)
3) Need Quantity square bloc same size than the size square bloc for good looking (screenshot mobile 2)

4) Need Add Shop Bag in my Audrey Police (screenshot mobile 2)

5) Need under title and price product, have the opportunity to select size, and add to shop direct with buttons without opening the product in other window (screenshot mobile 3)

6) Need to have 3 articles next to each other line by line (screenshot mobile 4)

B. LAPTOP VERSION

1) Need my police Audrey for my products titles (screenshot laptop 1)
2) Need shop bag in bold - you cannot clearly see it now (screenshot laptop 1)

3) Need all my other pages names wrote in black to be able to click and go back in other sections because like it is now we see noting as t is write in white with white color background (screenshot laptop 1)

4) Need also for laptop : under title and price product, have the opportunity to select size, and add to shop direct with buttons without opening the product in other window (screenshot mobile 3)

5) Need to have shop bag icon next to Shop page name (screenshot laptop 2)

In advance thank you so much for your precious help !!!!! 🙂

screenshot mobile 1.png

screenshot mobile 2.png

screenshot mobile 3.png

screenshot mobile 4.png

laptop 1.png

screenshot laptop 2.png

Mobile 1,2,3,6 Add to Design > custom CSS

/* Shop bag bold */
header#header svg.icon.icon--cart {
    stroke-width: 3;
}

/* Mobile */
@media screen and (max-width:767px) {
/* product titles */
h1.ProductItem-details-title {
    font-size: 30px;
}
/* quantity */
input[type="number"] {
    padding-bottom: 20px !important;
}
/* blog 2 columns */
.blog-basic-grid.collection-content-wrapper {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-column-gap: 10px;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 1/1/2022 at 10:21 AM, tuanphan said:

Mobile 1,2,3,6 Add to Design > custom CSS

/* Shop bag bold */
header#header svg.icon.icon--cart {
    stroke-width: 3;
}

/* Mobile */
@media screen and (max-width:767px) {
/* product titles */
h1.ProductItem-details-title {
    font-size: 30px;
}
/* quantity */
input[type="number"] {
    padding-bottom: 20px !important;
}
/* blog 2 columns */
.blog-basic-grid.collection-content-wrapper {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-column-gap: 10px;
}
}

 

Thank you it worked ! And for Mobile 4 and 5 ? + Laptop 1, 2, 3, 4 et 5 ?

THX a lot
 

Link to comment

4) Need Add Shop Bag in my Audrey Police (screenshot mobile 2)

I don't see the screenshot? Can you send it again?

5) Need under title and price product, have the opportunity to select size, and add to shop direct with buttons without opening the product in other window (screenshot mobile 3)

No idea

1) Need my police Audrey for my products titles (screenshot laptop 1)

You mean change logo color on product page?

Add to Design > Custom CSS

/* Products header */
body.collection-type-products.view-item {
/* logo */
header#header img {
    filter: invert(1);
    -webkit-filter: invert(1);
}
header#header .header-nav-item a {
    color: black !important;
}}

2) Need shop bag in bold - you cannot clearly see it now (screenshot laptop 1)

Which pages?

3) Need all my other pages names wrote in black to be able to click and go back in other sections because like it is now we see noting as t is write in white with white color background (screenshot laptop 1)

It looks like 1-3 same?

4) Need also for laptop : under title and price product, have the opportunity to select size, and add to shop direct with buttons without opening the product in other window (screenshot mobile 3)

No idea

5) Need to have shop bag icon next to Shop page name (screenshot laptop 2)

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
19 hours ago, tuanphan said:

4) Need Add Shop Bag in my Audrey Police (screenshot mobile 2)

I don't see the screenshot? Can you send it again?

5) Need under title and price product, have the opportunity to select size, and add to shop direct with buttons without opening the product in other window (screenshot mobile 3)

No idea

1) Need my police Audrey for my products titles (screenshot laptop 1)

You mean change logo color on product page?

Add to Design > Custom CSS

/* Products header */
body.collection-type-products.view-item {
/* logo */
header#header img {
    filter: invert(1);
    -webkit-filter: invert(1);
}
header#header .header-nav-item a {
    color: black !important;
}}

2) Need shop bag in bold - you cannot clearly see it now (screenshot laptop 1)

Which pages?

3) Need all my other pages names wrote in black to be able to click and go back in other sections because like it is now we see noting as t is write in white with white color background (screenshot laptop 1)

It looks like 1-3 same?

4) Need also for laptop : under title and price product, have the opportunity to select size, and add to shop direct with buttons without opening the product in other window (screenshot mobile 3)

No idea

5) Need to have shop bag icon next to Shop page name (screenshot laptop 2)

+ For Mobile and Laptop version : Button" Add Shop Bag" I want it write in my Audrey Police (screenshot mobile 2 attached)

+ For Laptop version : For all my products, I want the titles (Legging, Tank Top, Cover Top, etc) of my products in my police Audrey for my products titles (screenshot laptop 1 attached)

+ For my Laptop version : You can see on the screenshot laptop 1 that the whole banner is white, so we cannot see the names (Sustainability, We Act, Shop, etc.) of my website pages (because they are wrote in white also) --> so for my products pages I would like to have those pages names link wrote in Black to be able to see them and click on them 

+ For my Laptop and Mobile version : I want the icon "picture" of shop bag on the left (not on the right side) because it is too close of EN and FR (screenshot laptop 2)

screenshot mobile 2.png

laptop 1.png

screenshot laptop 2.png

Link to comment
On 1/5/2022 at 10:54 AM, AlexaeWittock said:

+ For Mobile and Laptop version : Button" Add Shop Bag" I want it write in my Audrey Police (screenshot mobile 2 attached)

+ For Laptop version : For all my products, I want the titles (Legging, Tank Top, Cover Top, etc) of my products in my police Audrey for my products titles (screenshot laptop 1 attached)

+ For my Laptop version : You can see on the screenshot laptop 1 that the whole banner is white, so we cannot see the names (Sustainability, We Act, Shop, etc.) of my website pages (because they are wrote in white also) --> so for my products pages I would like to have those pages names link wrote in Black to be able to see them and click on them 

+ For my Laptop and Mobile version : I want the icon "picture" of shop bag on the left (not on the right side) because it is too close of EN and FR (screenshot laptop 2)

screenshot mobile 2.png

laptop 1.png

screenshot laptop 2.png

???

Link to comment
20 hours ago, AlexaeWittock said:

???

You post too many questions in one post, I don't usually respond to such posts. You can post 1-2 questions in each separate topic, I believe you will get answers from some contributors.

+ For my Laptop and Mobile version : I want the icon "picture" of shop bag on the left (not on the right side) because it is too close of EN and FR (screenshot laptop 2)

Move to (1) or (2)?

image.thumb.png.638991964d95db056a3adf3fc7ee20e7.png

+ For my Laptop version : You can see on the screenshot laptop 1 that the whole banner is white, so we cannot see the names (Sustainability, We Act, Shop, etc.) of my website pages (because they are wrote in white also) --> so for my products pages I would like to have those pages names link wrote in Black to be able to see them and click on them 

Strange. I remember I sent code in previous comment. Have you tried it yet?

/* Products header */
body.collection-type-products.view-item {
/* logo */
header#header img {
    filter: invert(1);
    -webkit-filter: invert(1);
}
header#header .header-nav-item a {
    color: black !important;
}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
9 hours ago, tuanphan said:

You post too many questions in one post, I don't usually respond to such posts. You can post 1-2 questions in each separate topic, I believe you will get answers from some contributors.

+ For my Laptop and Mobile version : I want the icon "picture" of shop bag on the left (not on the right side) because it is too close of EN and FR (screenshot laptop 2)

Move to (1) or (2)?

image.thumb.png.638991964d95db056a3adf3fc7ee20e7.png

+ For my Laptop version : You can see on the screenshot laptop 1 that the whole banner is white, so we cannot see the names (Sustainability, We Act, Shop, etc.) of my website pages (because they are wrote in white also) --> so for my products pages I would like to have those pages names link wrote in Black to be able to see them and click on them 

Strange. I remember I sent code in previous comment. Have you tried it yet?

/* Products header */
body.collection-type-products.view-item {
/* logo */
header#header img {
    filter: invert(1);
    -webkit-filter: invert(1);
}
header#header .header-nav-item a {
    color: black !important;
}}

 

Oh okay sorry... Regarding your red arrows --> Move to 2 please for laptop version + also on mobile version if he can switch place with the 2 lines (see new screenshot)

YES SUPER thx it worked the code for black header !!!! 🙂 

 

Capture d’écran 2022-01-10 à 17.08.03.png

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.