After setting my product variants to a square layout, there are still gaps between the squares. The squares also appear uneven some are larger than others. I’d like all the squares to be the exact same size**, perfectly aligned, and connected with no gaps at all.
I’d also like to remove the pre-selected size variant, so that no size is automatically chosen when a customer opens a product page.
Does anyone know how to fix these issues? Any help or code snippets would be greatly appreciated!
The content of the options selectors are variable in the amount of text they contain so you’d need to just style them to be OVERSIZED from the get go; or drastically change font sizes.
For variant auto selection theme behaviors always check the theme for a related setting first, e.g. select first option or other verbiage; otherwise search first it comes up alot.
Not all themes can be fixed with a forum post advanced theme customizations are beyond the scope of the forums.
Honestly, and no offense to you but, you’ve been trying to customize dawn for a year and a half. You can get a better theme. They do exist… there are so many Shopify themes out there that you don’t need to waste so much time on. People literally make a living designing web templates.
A saner approach that works across themes and channels can be to normalize the options so they are always the exact same text length.
Eg. UK3 => UK03.0 (or UK-3.0), UK11 => UK11.0 etc or other verbiage that creates a character based padding.
But consumer expectations can be greater than sanity.
Some people only have limited time to work on things, weekends… holidays.
So the duration may be years long but the period(?interval?) of time spent is still in days/weeks. I have no good analogy for this besides 9 women can’t make a baby in 1 month, bleh
Unfortunately not everyone can know how to do requirements building, or see the ROI in bothering with such a thing in advance.
New merchants/learners can figure out which features/customizations might be needed can by first going through a free theme and building it out.
It is a valid process for feature discovery and should be encouraged as a form of MVP or prototyping ; with an upshot of possibly minimize buyers remorse before blowing four hundred bucks.
In tandem with trying to maximize modularity/portability of customizations for the inevitable premium upgrade. Which is also why I think it should be a rule that design posts should encourage CSS-settings first before file changes.
But at least they are consistent for a single project/website and the poster doesn’t appear to be work farmer.
Unfortunately OP literally has multiple posts with the same type of duplicated issues going far back.
The problem is the duplicate posts not respecting contributors efforts so far by building on those efforts.
Nor even bothering to mark solutions, if any, nor putting in the effort to make sure there are solutions .
Your size chart button is still rogue …
Also, redrawing of the header looks irritating – this will hurt most visitors=> your conversions.
Though maybe the announcement bar is a culprit – and scroll also too jerky to my eyes.
Use display: grid, gap: 0 and aspect-ratio: 1/1 for the swatch container and items-this forces perfectly even squares with no gaps.
Use object-fit: cover for images inside swatches.
Run small script on page load that clears any checked radios or selects and disables add to cart button until customer actively chooses the options(also remove ?variant= from the URL if present)
Script example
<script>
document.addEventListener('DOMContentLoaded', function () {
const productForm = document.querySelector('form.product-form');
if (!productForm) return;
// Uncheck any selected radio/checkbox on load
productForm.querySelectorAll('input[type="radio"], input[type="checkbox"]').forEach(i => {
if (i.checked) i.checked = false;
});
// For selects, set to a placeholder if exists, otherwise set no selection
productForm.querySelectorAll('select').forEach(sel => {
if (sel.querySelector('option[value=""]')) {
sel.value = '';
} else {
// if no empty option, insert a placeholder option at top
const placeholder = document.createElement('option');
placeholder.value = '';
placeholder.text = 'Choose an option';
placeholder.selected = true;
placeholder.disabled = true;
sel.insertBefore(placeholder, sel.firstChild);
}
});
// Disable Add to cart until all options selected
const addToCartBtn = productForm.querySelector('[name="add"], button[type="submit"], .product-form__cart-submit');
if (addToCartBtn) addToCartBtn.disabled = true;
// Helper to check if all option sets have a selection
function allOptionsChosen() {
let ok = true;
// each option block (Dawn uses [data-product-option] or .product-form__option)
const optionBlocks = productForm.querySelectorAll('[data-product-option], .product-form__option');
optionBlocks.forEach(block => {
const checked = block.querySelector('input:checked, select');
if (!checked || (checked.tagName === 'SELECT' && checked.value === '')) ok = false;
});
return ok;
}
// On change, enable add-to-cart when options are all chosen
productForm.addEventListener('change', function () {
if (addToCartBtn) addToCartBtn.disabled = !allOptionsChosen();
});
// Remove variant param from URL if present to avoid auto-selection via ?variant=#####
if (window.location.search.includes('variant=')) {
const url = new URL(window.location);
url.searchParams.delete('variant');
window.history.replaceState({}, document.title, url.toString());
}
});
</script>
.
