You may also like section

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:

@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 tag


Hi @manbru

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


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 on theme.liquid

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

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

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