Hi, with our current theme we are wanting to push all four of the pictured images together without the text underneath it. We’d really appreciate some help whether its with coding or a setting that we aren’t aware of.
Thank you!
Store url, example url , theme name, storefront password if applicable.
Others do not have your setup ALWAYS provide the info other people need to have context when seeking help.
Always communicate in concrete terms in technical issues and business itself.
Hi @cyrusnazari , This will need coding, can you share your store url?
Yes, here it is : https://cyrusnazari.com/
Store url is: https://cyrusnazari.com/
Theme Name is Fleetwood Cadillac
@cyrusnazari , I can’t locate the page in your screenshot.
Sorry, the screenshot is an edit we are doing. We just want to get rid of the titles on the categories in general and then mash them together as 4 images.
@cyrusnazari , you need something like that?:
Hi @cyrusnazari
This is Richard from PageFly - Shopify Page Builder App
Please add this code to your theme.liquid above the to get this solved
Step 1: Online Stores > Themes > More Actions > Edit code
Step 2: click on theme.liquid and paste the code above the
Hope this can help you solve the issue
Best regards,
Richard | PageFly
Yes, we want to be able to have 4 images all touching and can be interchangeable. We want to add text to the image instead of having text below the images. We will make and edit the images ourselves, but would like to know if we need to insert coding to achieve this goal.
??? There’s no such theme that’s an arbitrary renaming of a car model, the admin should tell you the exact real original theme name to reference when working on themes.
Regardless, first double check that that section does not have a setting for controlling the number of columns.
After that because this theme use grid classes which you would have to hard override in CSS to get a 2x2 grid pattern.
In that section use a custom css setting using CSS similar to the below.
https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css
@media screen and (min-width: 990px) {
slider-component .collection-list.grid--5-col-desktop .collection-list__item.grid__item {
width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2) !important;
max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2)!important;
}
}
Test it without the “!important” texts , as such declarations should be avoided unless absolutely necessary.
Alternatively backup the theme and edit the collection list section file itself or it’s snippets to find and replace the grid–5-col-desktop class with grid–2-col-desktop .
Also, is there a way to make it where they are still clickable? We are going to photoshop the titles onto new images like “dresses” “tops”, etc. and just want the image to be clickable.
Thank you.
