Solved

Urgent - Theme Motion: Featured collection on Home Page - 2 products per row

MaxCosta
Shopify Partner
246 2 59

Hello all,

 

This is my first post on this forum because I have an urgent problem with a Shopify store using the Motion theme.

I want to add a Featured Collection on my home page with 2 products per line and 3 product lines. As on this site: https://www.eliou-eliou.com/

When I add the "Featured collection" Section, the layout is perfect on computer, but on mobile, it looks like a "switcher" or "slider" form, and it doesn't suit me at all ...

Like on the site I sent you, I would like to have 2 products per line on mobile and keep this layout on my desktop.

The strangest thing is that on my Collection Page on Mobile, I have 2 products per line and it's perfect. But this change should only apply to the home page.

I tried a lot of things but can't find any solution ... you would save me if you could help me ..!

Here is a preview link of my site which is not yet live : https://v0b1y1qikmo74hph-47455862950.shopifypreview.com

 

Thank you in advance...

Max C.

Accepted Solutions (3)
KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@MaxCosta 

thanks for confirm please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second

@media only screen and (max-width: 589px) {
#shopify-section-16193798554af94825 .grid-overflow-wrapper {
    overflow: visible;
    overflow-x: visible;
}
#shopify-section-16193798554af94825 .grid-overflow-wrapper .grid {
    white-space: nowrap;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
#shopify-section-16193798554af94825 .grid-overflow-wrapper .grid__item {
width: 50%;
    flex: 0 0 50%;
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@MaxCosta 

thanks for your feedback yes, please add this code

@media only screen and (max-width: 589px) {
#CollectionSection-16193798554af94825 .page-width--flush-small {
    padding: 0 15px;
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@MaxCosta 

Thanks for the update, yes please add this code

.color-swatch--small:before, .color-swatch--small {border-radius: 100px;}
.grid-product__colors{justify-content:  center;}
@media only screen and (max-width: 589px) {
#shopify-section-16193798554af94825 .grid-overflow-wrapper .grid__item:first-child {margin-bottom: 30px;}
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 33 (33)

KetanKumar
Shopify Partner
36839 3635 11972

@MaxCosta 

do you have like this?

KetanKumar_0-1619709513766.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
MaxCosta
Shopify Partner
246 2 59

Thanks a lot for your answer. No not really, this is what I have:

screen1.png

 

 

So I don't understand why you have 3 products ...

 

Then here's what it does to me on mobile:

 

screen2.png

 

While I would like this ...:

 

180308766_3929882507125036_1205991510123494345_n.jpg

 

 

MaxCosta
Shopify Partner
246 2 59

Oh you probably have 3 products because you must be on the collection page. My problem concerns the home page.

 

Thanks in advance to all...

MaxCosta
Shopify Partner
246 2 59

Really sorry to reiterate but please someone already had this problem? This is very important to me ... Thanks in advance for your help

KetanKumar
Shopify Partner
36839 3635 11972

@MaxCosta 

can you please confirm this?

KetanKumar_0-1619726157999.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
MaxCosta
Shopify Partner
246 2 59

Thank you for your reply  @KetanKumar 

no,but the photo you just sent me is what I would like to have on my homepage

I have that: (this is a slider) 

F266E617-86AB-435D-93E0-5F29AC283219.png

MaxCosta
Shopify Partner
246 2 59

@KetanKumar @This is what I want !

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@MaxCosta 

thanks for confirm please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second

@media only screen and (max-width: 589px) {
#shopify-section-16193798554af94825 .grid-overflow-wrapper {
    overflow: visible;
    overflow-x: visible;
}
#shopify-section-16193798554af94825 .grid-overflow-wrapper .grid {
    white-space: nowrap;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
#shopify-section-16193798554af94825 .grid-overflow-wrapper .grid__item {
width: 50%;
    flex: 0 0 50%;
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
MaxCosta
Shopify Partner
246 2 59

it's much better but it does this to me:

E9F8A50C-3DF0-4121-8032-42FEF0A28782.png

77EE87B4-738C-4B95-AE5B-0A9424DBD416.png

In addition, would it be possible to create a small space (margin) at the edges of the screen? like this : 

7FB19F07-5E13-4875-AD1C-222ACA6D7E6D.png



🙏🙏🙏🙏🙏🙏🙏🙏ty 

MaxCosta
Shopify Partner
246 2 59

@KetanKumar @Like this without slider:

8C37F088-54E2-4E40-B79E-5290EC9EEB92.jpeg



thank you in advance 🙏

KetanKumar
Shopify Partner
36839 3635 11972

@MaxCosta 

yes please add this code

@media only screen and (max-width: 589px) {
#shopify-section-16193798554af94825 .grid-overflow-wrapper .grid__item:first-child {
    margin-left: 0;
}
}

after code view

KetanKumar_0-1619732179224.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
MaxCosta
Shopify Partner
246 2 59

Thank you so much ! !!

KetanKumar
Shopify Partner
36839 3635 11972

@MaxCosta 

it's my pleasure to help us

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
MaxCosta
Shopify Partner
246 2 59

Im so sorry @KetanKumar but I have a problem with your solution 

mobile rendering is this one : 

1D79E4AA-4EE0-480F-B4F5-BC6AC3E3FFCB.png

 

but i want this one : 

4AE487B3-8D4F-4D51-BE38-B64DAB0B7921.png

 can you create this spacing? and margins on the sides? you would save me 🙏🙏

 

Thank you in advance @KetanKumar 

 

My website : https://v0b1y1qikmo74hph-47455862950.shopifypreview.com

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@MaxCosta 

thanks for your feedback yes, please add this code

@media only screen and (max-width: 589px) {
#CollectionSection-16193798554af94825 .page-width--flush-small {
    padding: 0 15px;
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
MaxCosta
Shopify Partner
246 2 59

@KetanKumarhow to thank you.... you're the best bro thanks a lot

KetanKumar
Shopify Partner
36839 3635 11972

@MaxCosta 

it's my pleasure to help us

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
MaxCosta
Shopify Partner
246 2 59

Hello,

@KetanKumarI'm sorry to come back to you but I think you can help me.

screen.png

Still on the same site, I activated the colors swatches on my Featured Collection of Home Page.

I would like to :

- center the choice of colors

- slightly increase the spacing between lines? (because the colors swatches is very close to the bottom line)

- possibly slightly reduce the size of the product and price titles (for a balanced rendering)

- and above all to have colored circles instead of squares.

 

Do you think this is something that is achievable for you? I'm really sorry but it's manipulations that I'm not used to doing at all ... it allows me to learn at the same time

If it's too complicated for you, I would understand.

 

Thank you in advance,

Max

KetanKumar
Shopify Partner
36839 3635 11972

@MaxCosta 

Thanks for it 

yes, sure i will help i have share code soon

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
MaxCosta
Shopify Partner
246 2 59

@KetanKumarthank you so much.. !

KetanKumar
Shopify Partner
36839 3635 11972

@MaxCosta 

thanks for it 

sorry your link doesn't work now 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
MaxCosta
Shopify Partner
246 2 59

@KetanKumar,

Really ? I don't know why,

Please try it : https://s9hj7vdn12zjvbbv-47455862950.shopifypreview.com

 

Thank you in advance,

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@MaxCosta 

Thanks for the update, yes please add this code

.color-swatch--small:before, .color-swatch--small {border-radius: 100px;}
.grid-product__colors{justify-content:  center;}
@media only screen and (max-width: 589px) {
#shopify-section-16193798554af94825 .grid-overflow-wrapper .grid__item:first-child {margin-bottom: 30px;}
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
MaxCosta
Shopify Partner
246 2 59

Thanks a lot..!

MaxCosta
Shopify Partner
246 2 59

@KetanKumar iam sorry to come back...

C7E08728-D813-49D3-A24B-D14AE9591EDD.png

 A lot of times on mobile when I launch the store, the color variants are not displayed. Although they are visible in my « customize theme » section... but when I go to « preview » with my mobile, we do not see...

 

What do you think about that ?

 

max 

KetanKumar
Shopify Partner
36839 3635 11972

can you please share page url for  this issue 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
breeziecee
Tourist
10 0 2

Hello! I am needing help with my homepage. The section is .home_collection_section and I would like for there to be the three collections in a row and currently it is showing two collections in a row with the third underneath aligned to the left. https://originalsprout.com/

 

Here is the code I found in theme.scss.liquid

.home_collection_section {
width: 50%;
float: left;
margin: 30px 0px;
text-align: center;
.caption_text_collection{
font-size: 48px;
font-style: italic;
text-transform: capitalize;
font-family: 'Bodoni-BookItalic';
color: #666666;
text-shadow: none;
position: relative;
}

KetanKumar
Shopify Partner
36839 3635 11972

@breeziecee 

do you have like this look pleas confirm

KetanKumar_0-1635390289583.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
breeziecee
Tourist
10 0 2

Thats what I want it to look like right now it looks like this:

Capture.JPG

datboydami
Tourist
6 0 1

thanks a lot !

Rafie
Shopify Partner
2 0 0

THIS DOES NOT WORK ON THEIR LATEST THEME UPDATES STILL!

 

This is the same reason I removed this theme from my client's store! I don't understand why force everyone to display products as a slider on homepage. I want customers to see more products with a simple regular scroll. there should be an option to choose!

datboydami
Tourist
6 0 1

IT WORKS WITH THE LAST VERSION !

KetanKumar
Shopify Partner
36839 3635 11972

@datboydami 

thank for update

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing