Removing the top part of the product

[omar_ab]

How do I remove this part on my store? Thanks:

 

[BSSCommerce-HDL · Accepted solution]

Hi @omar_ab, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag: 

<style>
.breadcrumb[role="navigation"] {
    display: none !important;
}
</style>

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[BSSCommerce-HDL · Accepted solution]

Hi @omar_ab, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag: 

<style>
 @media only screen and (max-width: 767px) {
    main#MainContent {
       padding-top: 0!important;
    }
    .container:has(.photos-sticky) {
       padding: 0 !important;
    }
}
</style>

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[niraj_patel]

Hello @omar_ab 

would you like to share your store URL and password if any please.
so i can check and provide you possible solution for your question.

[omar_ab]

Yes, moroccanplus.com

[omar_ab]

I also want to make the image on the product cover the page width wise, like this for example:

 

[niraj_patel]

Hello @omar_ab 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (max-width: 767px) {
.template-product .main-content {
padding-top: 0 !important;
}
div.container.js-recently-view {
padding: 0 !important;
}
.product-single__meta.small--text-center {
padding: 0 20px !important;
}
}
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[BSSCommerce-HDL · Accepted solution]

Hi @omar_ab, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag: 

<style>
.breadcrumb[role="navigation"] {
    display: none !important;
}
</style>

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[omar_ab]

Thank you! Could you also assist with making the image full width wise to cover the page and also cover that space on top?

[BSSCommerce-HDL · Accepted solution]

Hi @omar_ab, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag: 

<style>
 @media only screen and (max-width: 767px) {
    main#MainContent {
       padding-top: 0!important;
    }
    .container:has(.photos-sticky) {
       padding: 0 !important;
    }
}
</style>

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[omar_ab]

The wording is too close too the border, any way that the wording can be away from it, like back to the original picture?

[BSSCommerce-HDL]

Hi @omar_ab, Please, add this code in the <style></style> tag above: 

.product-single__meta {
    padding: 0 15px !important;
}

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[omar_ab]

Where do I put this code? I didn't understand the location.

[BSSCommerce-HDL · Accepted solution]

Hi @omar_ab, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag: 

<style>
@media only screen and (max-width: 767px) {
 .product-single__meta {
    padding: 0 15px !important;
  }
}

</style>

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[omar_ab]

Your awesome! Thank you 🙂 god bless.

[BSSCommerce-HDL]

@omar_ab No Problem. Have a good day 😍

[AK_Design_Dev]

You can uncheck of customized of the in product page or you can add css display:none; for product page