Minimal theme--Reduce space between title, price and variant

Solved
Highlighted
Excursionist
21 0 5

Hi,

I'm using Minimal theme.

Here is my online store Preview link 

I want to reduce space between title, price and variant on the product page.

Please refer to the below image. The red circle shows the space. Thank you!

 

P1.png

1 Like
Highlighted
Shopify Partner
7687 1058 2674

This is an accepted solution.

@smilemerry007 

Thanks for post

1. Go to Online Store->Theme->Edit code
2. Asset->/timber.scss.liquid->paste below code at the bottom of the file.

.product-single__title {
    margin-bottom: 10px;
}
.product-single__prices {
margin-bottom: 0;
}

change the value if add more spacing 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Excursionist
21 0 5

@KetanKumar 

You are always the best! 

It worked!

Thank you so much.

0 Likes
Highlighted
Excursionist
27 0 10

Hi Ketan - i have the opposite problem, I'd like to add space between the variant and Add to Cart - you can see in this image, the variant shows as "Select Time" as we're using a booking app

we have Minimal Theme - and i have hidden the price 

Vnsa_1-1596642265765.png

 

1 Like
Highlighted
Shopify Partner
7687 1058 2674

Hello, @Vnsa 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Excursionist
27 0 10

If this helps - here's some of the code from the product template i'd like to alter

I added in the code in blue to hide the price for this product which may be one of the issues with the placement of the variant button?

 

<div class="grid__item post-large--one-half">
{% if section.settings.product_vendor_enable %}
<span class="h3" itemprop="brand">{{ product.vendor }}</span>
{% endif %}
<h1 itemprop="name">{{ product.title }}</h1>

<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
{% assign variant = product.selected_or_first_available_variant %}

<meta itemprop="priceCurrency" content="{{ shop.currency }}">
<link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">

<div class="product-single__prices">
{% if product.compare_at_price > product.price %}
<span id="ComparePriceA11y" class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
{% else %}
<span id="PriceA11y" class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
{% endif %}
{% unless product.price <= 0 %}
<span id="ProductPrice" class="product-single__price" itemprop="price" content="{{ product.price | divided_by: 100.00 }}">
{{ product.price | money }}
{% endunless %}
</span>

{% if product.compare_at_price > product.price %}
<span id="PriceA11y" class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<s id="ComparePrice" class="product-single__sale-price">
{{ product.compare_at_price_max | money }}
</s>
{% endif %}
</div>

<div class="product-description rte" itemprop="description">
{{ product.description }}
</div>

0 Likes
Highlighted
Excursionist
27 0 10

I thought maybe i need to add something here - this seems to be the section for variants and add to cart :

 

<form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm">
<select name="id" id="ProductSelect-{{ section.id }}" class="product-single__variants">
{% for variant in product.variants %}
{% if variant.available %}

<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

{% else %}
<option disabled="disabled">
{{ variant.title }} - {{ 'products.product.sold_out' | t }}
</option>
{% endif %}
{% endfor %}
</select>

<div class="product-single__quantity{% unless section.settings.product_quantity_enable %} is-hidden{% endunless %}">
<label for="Quantity">{{ 'products.product.quantity' | t }}</label>
<input type="number" id="Quantity" name="quantity" value="1" min="1" class="quantity-selector">
</div>

<button type="submit" name="add" id="AddToCart" class="btn">
<span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>
</form>

0 Likes
Highlighted
Tourist
5 1 4

Hi @Vnsa 

It's Karmel from Sesami, I'm happy to help.

Mostly, You'll be able to add some spaces between the "SELECT TIME" and Add to Cart buttons by appending the following snippet of CSS to one of your style files.

.sesami__buttonWrapper {
    margin-bottom: 10px;
}

 

If that doesn't work, Please feel free to submit a ticket for the support team here and we will make sure it will be fixed in couple of hours. Moreover, We recommend you to have a look into our helpdesk if you're looking for a best practices, tips, tricks, or FAQs.

 

Thank you!

2 Likes
Highlighted
Excursionist
27 0 10

Thank you!

I added the code to the bottom of the themes file and it worked , i'm guessing i could change 10px to make the gap larger?

0 Likes
Highlighted
Tourist
5 1 4

You're welcome!

If you want a larger gap, Just increase the 10px to any value you want. 

1 Like