Uncategorized

Truncate title on product page Shopify

by

Added this to base.css

.product-title-truncate {
font-family: var(–font-subheading–family) !important;
font-size: 16px !important;
font-weight: var(–font-subheading–weight) !important;
line-height: var(–font-subheading–line-height) !important;
letter-spacing: var(–font-subheading–letter-spacing) !important;
margin: 0 !important;
}

Create custom Liquid to show title on product page

<h1 class=”product-title-truncate”>
{% assign words = closest.product.title | split: ‘ ‘ %}

{% if words.size > 10 %}
{{ words | slice: 0, 10 | join: ‘ ‘ }}…
{% else %}
{{ closest.product.title }}
{% endif %}
</h1>

Sticky Buy now button

by

/* Sticky Buy Now Button – Mobile */
@media screen and (max-width: 749px) {

.shopify-payment-button {
position: fixed !important;
left: 12px;
right: 12px;
bottom: 12px;
z-index: 9999;
margin: 0 !important;
padding: 0 !important;
}

.shopify-payment-button .shopify-payment-button__button–unbranded {
width: 100% !important;
min-height: 54px !important;
border-radius: 12px !important;

display: flex !important;
align-items: center;
justify-content: center;

font-size: 0 !important;
font-weight: 600;
color: transparent !important;

padding: 6px 20px !important;
margin: 0 !important;

box-shadow: 0 -4px 20px rgba(0,0,0,.15) !important;
}

.shopify-payment-button .shopify-payment-button__button–unbranded::after {
content: “Pay online & get 10% OFF”;
color: #fff;
font-size: 16px;
font-weight: 600;
}

/* Prevent page content from being hidden behind the fixed button */
body {
padding-bottom: 80px;
}
}

using this with Releasit COD Form

Truncate product title in Shopify collection in Horizon theme

by

Go to Blocks>product.title.liquid and find this line

{% assign product_title = ‘<p role=”heading” aria-level=”3″>’ | append: closest.product.title | append: ‘</p>’ %}

Replace with this

{% assign title_words = closest.product.title | split: ‘ ‘ %}

{% if title_words.size > 25 %}
{% assign short_title = title_words | slice: 0, 25 | join: ‘ ‘ | append: ‘…’ %}
{% else %}
{% assign short_title = closest.product.title %}
{% endif %}

{% assign product_title = ‘<p role=”heading” aria-level=”3″>’ | append: short_title | append: ‘</p>’ %}

25 is the value you need to change accordingly