How can I decrease the gap between products in featured collection ? Impact theme

Store Design
, ,
1

Oguzsanci_0-1721658438413.png
Oguzsanci_0-1721658438413.png1231×884 102 KB

Basically i want just a little gap between products i cant seem to do that though.

Here’s the link to the store

2

Hi @Oguzsanci ,

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

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Here is result:

BSSCommerceHDL_0-1721659085624.png
BSSCommerceHDL_0-1721659085624.png1881×564 158 KB

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 :heart_eyes:

3
  • Here is the solution for you @Oguzsanci
  • Please follow these steps:

step.png
step.png1865×854 125 KB

  • Then find the base.css or theme.css file.
  • Then add the following code at the end of the file and press ‘Save’ to save it.
.product-list {
     gap: inherit !important;
}
.product-card {
     width: 92% !important;
}
  • Here is the result you will achieve:

BSSTekLabs_0-1721659266283.png
BSSTekLabs_0-1721659266283.png1895×869 179 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
4

Hello @Oguzsanci

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

#shopify-section-template--22728085602626__featured_collection_dWUCtz product-card { width: 100% !important; }

techlyser_web_0-1721590144319.png
techlyser_web_0-1721590144319.png1320×585 399 KB

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

5

Hi @Oguzsanci

Add the css code at the end in theme.css file
Go to online store > themes > actions > edit code >theme.css

product-card.product-card {
width: 100%;
}

6

thank you for everyone that replied all were excellent solutions :heart: