making Recommended Products section full width

Isa_Abrera
Tourist
4 0 1

Hello! I followed the instructions to add a recommended products section (https://help.shopify.com/en/themes/customization/products/features/recommend-related-products#sectio...) but it shows up under my product description on the right column. I'm using the Brooklyn theme

I couldn't figure out how to make the section go underneath the product photo and description sections, so it would take the entire width of the page and not just in a column. Much like a "footer" of the page.

Replies 26 (26)
Jackzsan
New Member
3 0 0

Hi there, i am having pretty much the same issue. 

I am using Debut theme. 

Is there a way to make Recommended products section full width so it stays full width wherever page the section is on ? 

Many thanks for you help ! 

😄 

suyash1
Shopify Partner
5394 627 892

@Jackzsan - we need to edit css to make section full width, can you please share page link where you have this section?

You are welcome to contact me - suyash.patankar@gmail.com, My timezone is GMT+5:30, to build shopify pages use pagefly | want to support?
Jackzsan
New Member
3 0 0

Hi suyash1,  

Wow !! Fastest answer ever ! 😄 


here you go : https://maisondereviere.com/products/carre-de-soie-mia-rouge  

Pw : shonta 

suyash1
Shopify Partner
5394 627 892

@Jackzsan - please add given css to the end of your theme.css file and check, you can adjust numbers as per need 

#shopify-section-product-recommendations .page-width {max-width: 100%; padding-left: 15px;
    padding-right: 15px;}
You are welcome to contact me - suyash.patankar@gmail.com, My timezone is GMT+5:30, to build shopify pages use pagefly | want to support?
Kinjaldavra
Shopify Partner
2302 569 1405

hello @Jackzsan  please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

#shopify-section-product-recommendations  .page-width 
{
   max-width: 100%; 
   padding-left: 12px !important;
    padding-right: 12px !important;
}

 

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
Build your professional store with GemPage Page Builder
Jackzsan
New Member
3 0 0


Many thanks @suyash1 & @Kinjaldavra for the given code... However it doesn't seems to be working. 

Would it be possible to have 6 products in recommendations row so it appears full width  ?  

suyash1
Shopify Partner
5394 627 892

@Jackzsan - please check line 7039 and 7050 in your css file... one bracket is extra, if you want ocde in media query then you need to remove bracket on line 7039 and if no then 7050.

 

also, css lines do not have semicolons. please check that too, any error can cause css to not work. If you find it difficult then please add me to staff,  I will check it

You are welcome to contact me - suyash.patankar@gmail.com, My timezone is GMT+5:30, to build shopify pages use pagefly | want to support?
Kinjaldavra
Shopify Partner
2302 569 1405

@Jackzsan  please insert code in your file after line  75 

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
Build your professional store with GemPage Page Builder
RubenTantä
Excursionist
42 0 4

Please can you help me to do the same in my alchemy theme?

 

This is the link but is with password now https://tantarainwear.myshopify.com/ 

This is a password: sheuso

 

Also i need to do in the product card.

Kinjaldavra
Shopify Partner
2302 569 1405

hello @RubenTantä 

please share a screenshot in which section do you want to make Products section full width

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
Build your professional store with GemPage Page Builder
suyash1
Shopify Partner
5394 627 892

@RubenTantä- please add given css to the end of your styles.css file and check

#shopify-section-template--15390678647023__recommendations .container {
    width: calc(100% - 30px); max-width: 100%;
}
You are welcome to contact me - suyash.patankar@gmail.com, My timezone is GMT+5:30, to build shopify pages use pagefly | want to support?
RubenTantä
Excursionist
42 0 4

In the end of the home section. 

 

Captura de pantalla 2021-11-24 a las 9.37.20.png

RubenTantä
Excursionist
42 0 4

Thanks and sorry but it doesn't work. 

 

Is here? in te assets?

 

Captura de pantalla 2021-11-24 a las 9.40.42.png

suyash1
Shopify Partner
5394 627 892

@RubenTantä- yes in assets

You are welcome to contact me - suyash.patankar@gmail.com, My timezone is GMT+5:30, to build shopify pages use pagefly | want to support?
RubenTantä
Excursionist
42 0 4

doesn't work- 😞

suyash1
Shopify Partner
5394 627 892

@RubenTantä- i can not see the code added to styles.css file

You are welcome to contact me - suyash.patankar@gmail.com, My timezone is GMT+5:30, to build shopify pages use pagefly | want to support?
RubenTantä
Excursionist
42 0 4

sorry, I have put it in the duplicate test template that is not published. And I have deleted it again. Do I have to add it to the published template?

suyash1
Shopify Partner
5394 627 892

@RubenTantä- to check on live site, you need to put on published theme

You are welcome to contact me - suyash.patankar@gmail.com, My timezone is GMT+5:30, to build shopify pages use pagefly | want to support?
RubenTantä
Excursionist
42 0 4

Ok, now is published