You may also like section

manbru · ‎09-26-2024

Hey,

I've created "You may also like" section and you can scroll through it, but it looks like it's only two products showing and I want the second product to only be shown like 70% of.

my productpage: https://r1vex.myshopify.com/products/akpase-rondane-frost-forest-green

Here's mine:

Here's what I would want, so that the second product is not fully being shown so you know you can scroll:

BSSCommerce-B2B · ‎09-26-2024

@manbru ,

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

Step 2: Search for the file theme.liquid

Step 3: Add this code before </body> tag

<style>
@media screen and (max-width: 749px) {
    .grid--2-col-tablet-down .grid__item {
        width: calc(62% - var(--grid-mobile-horizontal-spacing) / 2)!important;
        max-width: 100%!important;
    }
}
</style>

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.

B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.

B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.

BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

View solution in original post

BSSCommerce-B2B · ‎09-26-2024

@manbru ,

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

Step 2: Search for the file theme.liquid

Step 3: Add this code before </body> tag

<style>
@media screen and (max-width: 749px) {
    .grid--2-col-tablet-down .grid__item {
        width: calc(62% - var(--grid-mobile-horizontal-spacing) / 2)!important;
        max-width: 100%!important;
    }
}
</style>

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.

B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.

B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.

BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

Dan-From-Ryviu · ‎09-26-2024

Hi @manbru

Please add this code to theme.liquid file, after <head> in Online Store > Themes > Edit code

<style>
@media (max-width: 749px) {
    .product product-recommendations .grid--2-col-tablet-down .grid__item {
        width: calc(60% - var(--grid-mobile-horizontal-spacing) / 2);
    }
}
</style>

- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Tech_Coding · ‎09-26-2024

Hello @manbru

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: 749px) {
.related-products .grid--2-col-tablet-down .grid__item {
width: calc(60% - var(--grid-mobile-horizontal-spacing) / 2) !important;
}
.related-products .grid {
column-gap: 10px !important;
}
}
</style>

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

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee☕ Tips adds a little sweetness to my day.

GTLOfficial · ‎09-26-2024

Hello @manbru
Go to online store ---------> themes --------------> actions ------> edit code------->assets-----> template-collection.css
add this code at the end of the file.

@media screen and (max-width: 989px) {
.collection .slider--tablet.product-grid {
scroll-padding-left: 1.5rem;
width: 110% !important;
}
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: [email protected] - Skype: ritesh_27dh

You may also like section

You may also like section

Community Blog Articles