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

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

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

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

Something like this?

Hi
Yes exactly! 

But also for the whole product page so also with products title, price, quantity, shop bag, and colors next to the picture and not under

Thx !

Can you please give me the coding code for that ?

Hi
Yes exactly! 

But also for the whole product page so also with products title, price, quantity, shop bag, and colors next to the picture and not under

Thx !

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

Yes it worked thx ! 

And to have products title, price, quantity, shop bag, and colors next to the picture --> what is the code ? 
Like in laptop (see screenshot)

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

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

Use this CSS

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

3 hours ago, tuanphan said:

Use this CSS

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

 

perfect thx

On 11/28/2021 at 6:54 PM, AlexaeWittock said:

Yes it worked thx ! 

And to have products title, price, quantity, shop bag, and colors next to the picture --> what is the code ? 
Like in laptop (see screenshot)

Can you help with this for my mobile version please ? 

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

6 hours ago, tuanphan said:

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

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

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

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;
}
}

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 !

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?

On 12/8/2021 at 11:11 AM, tuanphan said:

Keep left - right layout + do these or?

Like in my screenshot attached - thx

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

Like in my screenshot attached - thx

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>

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 !!!!! 🙂

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 !!!!! 🙂

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;
}
}

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
 

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)

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)

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)

???

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)?

+ 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;
}}

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)?

+ 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 !!!! 🙂