How to adjust text alignment on a landing page slideshow?

shells · June 8, 2021, 11:41pm

Hi all,

I’m trying to adjust the alignment of text/title overlaid on an image on my landing page. I can’t identify the code. I want to move all text and ‘New Arrivals’ button to the left.

I’ve pasted the code below. Grateful if anyone can be so kind as to help me out!

Thank you!

.slideshow-wrapper { position: relative; } .slideshow { position: unset; overflow: hidden; margin-bottom: 0; height: 100vh; -webkit-transition: height .6s cubic-bezier(.44,.13,.48,.87); -o-transition: height .6s cubic-bezier(.44,.13,.48,.87); transition: height .6s cubic-bezier(.44,.13,.48,.87); } @media only screen and (min-width:750px) { .slideshow { position: relative; } } .slideshow .slick-list,.slideshow .slick-track,.slideshow .slideshow__slide { height: 100%; } .slideshow .slick-dots { bottom: 30px; z-index: 1; } @media only screen and (max-width:749px) { .slideshow .slick-dots { bottom: 10px; } } .slideshow--small { height: 175px; } @media only screen and (min-width:750px) { .slideshow--small { height: 50vh; } } .slideshow--medium { height: 270px; } @media only screen and (min-width:750px) { .slideshow--medium { height:70vh; } } .slideshow--large { height: 375px; } @media only screen and (min-width:750px) { .slideshow--large { height: 80vh; } } .slideshow__slide { position: relative; overflow: hidden; } .slideshow__link { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .slideshow__link:active,.slideshow__link:focus { opacity: 1; } @media only screen and (min-width:750px) { .slideshow__overlay::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: {{section.settings.bg_overlay}}; opacity: .4; z-index: 2; } .gradient_overlay:before{ background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); opacity: 1; } } .slideshow__image { -webkit-transition: opacity .8s cubic-bezier(.44,.13,.48,.87); -o-transition: opacity .8s cubic-bezier(.44,.13,.48,.87); transition: opacity .8s cubic-bezier(.44,.13,.48,.87); position: absolute; top: 0; left: 0; opacity: 0; height: 100%; width: 100%; background-repeat: no-repeat; background-size: cover; background-position: center center; background-color: transparent; z-index: 1; } .no-js .slideshow__image,.slick-initialized .slideshow__image { opacity: 1; } .slideshow__text-wrap { height: 100%; position: relative; } .slideshow__link .slideshow__text-wrap { cursor: inherit; } .slideshow__text-wrap--mobile { display: none; } @media only screen and (min-width:750px) { .slideshow__text-content { -webkit-transition: .6s cubic-bezier(.44,.13,.48,.87); -o-transition: .6s cubic-bezier(.44,.13,.48,.87); transition: .6s cubic-bezier(.44,.13,.48,.87); -webkit-transition-delay: .3s; -o-transition-delay: .3s; transition-delay: .3s; } } .slideshow__text-wrap--desktop .slideshow__text-content { position: absolute; width: 100%; top: 50%; opacity: 1; z-index: 2; padding: 0 50px; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); } .slideshow__text-wrap--desktop .slideshow__text-content li,.slideshow__text-wrap--desktop .slideshow__text-content .slideshow__btn-wrapper{ overflow: hidden; } .slideshow__text-wrap--desktop .slideshow__text-content li .slideshow__toptitle{ font-weight:500; letter-spacing: 0.3em; font-size: 16px; } .slideshow__text-wrap--desktop .slideshow__text-content li .slideshow__toptitle,.slideshow__text-wrap--desktop .slideshow__text-content li .slideshow__title,.slideshow__text-wrap--desktop .slideshow__text-content li .slideshow__subtitle ,.slideshow__text-wrap--desktop .slideshow__text-content .slideshow__btn{ transform: translateY(100%); } @media only screen and (min-width:750px) { .slideshow__text-content.slideshow__text-content--vertical-top { top: 120px; } .slideshow__text-content.slideshow__text-content--vertical-bottom { top: auto; bottom: 40px; } } .no-js .slideshow__text-content,.slick-initialized .slick-active .slideshow__text-content {} .no-js .slideshow__text-content,.slick-initialized .slick-active .slideshow__text-content li .slideshow__toptitle,.slick-initialized .slick-active .slideshow__text-content li .slideshow__title, .slick-initialized .slick-active .slideshow__text-content li .slideshow__subtitle,.slick-initialized .slick-active .slideshow__text-content .slideshow__btn{ transform: translateY(0); transition: transform 0.7s cubic-bezier(.29,.63,.44,1); transition-delay: .1s; } .slick-initialized .slick-active .slideshow__text-content li .slideshow__title{ transition-delay: .3s; } .slick-initialized .slick-active .slideshow__text-content li .slideshow__subtitle{ transition-delay: .4s; } .slick-initialized .slick-active .slideshow__text-content .slideshow__btn{ transition-delay: .5s; } .no-js .slideshow__text-content.slideshow__text-content--vertical-center,.slick-initialized .slick-active .slideshow__text-content.slideshow__text-content--vertical-center { /* -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); */ } .slideshow__text-content::after { content: ''; content: ''; display: block; width: 40px; height: 40px; position: absolute; margin-left: -20px; margin-top: -20px; border-radius: 50%; border: 3px solid #fff; border-top-color: transparent; -webkit-animation: spin .65s infinite linear; animation: spin .65s infinite linear; opacity: 1; -webkit-transition: all 1s cubic-bezier(.29,.63,.44,1); -o-transition: all 1s cubic-bezier(.29,.63,.44,1); transition: all 1s cubic-bezier(.29,.63,.44,1); bottom: -55px; left: 50%; } @media only screen and (max-width:749px) { .slideshow__text-content::after { content: none; } } .no-js .slideshow__text-content::after,.slick-initialized .slideshow__text-content::after { opacity: 0; visibility: hidden; content: none; } @media (min-width:750px) { .slideshow__text-content--mobile { display: none!important; } } .slideshow__text-content--mobile .container{ padding: 30px; } .slideshow__arrows--mobile~.slideshow__text-content--mobile { padding-top: 1.7rem; } @media only screen and (min-width:750px) { .slideshow__arrows--mobile~.slideshow__text-content--mobile { padding-top: 0; } } @media only screen and (min-width:750px) { .slideshow__text-content--mobile { padding-top: 0; } .slideshow__text-content--mobile::after { display: none; } } @media (min-width:992px) { .slideshow__title { font-size: 70px; font-weight: 400; line-height:1; } .mega-subtitle{ line-height: 1.6; } } @media (min-width:1600px) { .slideshow__title { line-height: 1; font-weight: 400; font-size: 96px; } } @media only screen and (max-width:749px) { .slideshow__subtitle,.slideshow__title,.slideshow__toptitle { display: none; } } .slideshow__title--mobile { margin-bottom: 0; font-size: calc(var(--g-font-size) + 30px); font-weight: 400; } .slideshow__title--mobile~.slideshow__subtitle--mobile { margin-top: 7px; font-size: var(--g-font-size); } .slideshow__subtitle--mobile,.slideshow__title--mobile { display: none; color: #3d4246; } @media only screen and (max-width:749px) { .slideshow__subtitle--mobile,.slideshow__title--mobile,.slideshow__toptitle--mobile { display: block; } } .slideshow__btn-wrapper { border: none; background-color: transparent; } @media only screen and (min-width:750px) { .slideshow__btn-wrapper--push { margin-top: 50px; } } @media only screen and (max-width:749px) { .slideshow__btn { display: none; } } .slideshow__btn--mobile { display: none; margin: 1.3rem auto 0; } @media only screen and (max-width:749px) { .slideshow__btn--mobile { display: inline-block; } } .slideshow .slick-prev { left: 25px; } .slideshow .slick-next { right: 25px; } .slideshow .slick-arrow { width: 50px; height: 50px; border-radius: 100%; color: #fff; } .slideshow .slick-arrow:before { color: {{section.settings.color_arrow}}; } .slideshow .slick-dots li button{ border-color:{{section.settings.color_dot_nav}}; } .slideshow .slick-dots li::hover button{ background:{{section.settings.color_dot_active}}; border-color:{{section.settings.color_dot_active}}; } .slideshow .slick-dots li.slick-active button{ border-color:{{section.settings.color_dot_active}}; background:{{section.settings.color_dot_active}}; } @media (max-width:991px) { .slideshow .slick-arrow { display: none!important; } }

{%- if section.settings.slideshow_height == ‘adapt’ -%}
{%- assign first_block = section.blocks[0] -%}
{%- if first_block.settings.image.aspect_ratio == blank -%}
{%- assign min_aspect_ratio = 2.0 -%}
{%- else -%}
{%- assign min_aspect_ratio = first_block.settings.image.aspect_ratio -%}
{%- endif -%}
{%- assign wrapper_height = 100 | divided_by: min_aspect_ratio -%}
{%- endif -%}

{%- if section.blocks.size > 0 -%}

{%- for block in section.blocks -%}
{%- assign text_alignments = block.settings.text_alignment | split: ’ ’ -%}
{%- assign text_horizontal_alignment = text_alignments.first -%}
{%- assign text_vertical_alignment = text_alignments.last | strip -%}

{%- if block.settings.image == blank -%}

{%- capture current -%}{%- cycle 1, 2 -%}{%- endcapture -%} {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}

{%- if section.settings.show_overlay -%}

{%- endif -%}

{%- else -%}

{%- if section.settings.show_overlay -%}

{%- endif -%}

{%- unless block.settings.slide_title == blank and block.settings.subheading == blank -%}

{{ block.settings.slide_toptitle }}
{{ block.settings.slide_title }}
{{ block.settings.subheading }}

{%- endunless -%}

{%- assign show_link_button = false -%}
{%- if block.settings.button_label != blank and block.settings.button_link != blank -%}
{%- assign show_link_button = true -%}
{%- endif -%}
{%- if show_link_button -%}

.slideshow__btn{{block.id}}{ background-color:{{block.settings.bg_button}}; color:{{block.settings.color_button}}; } .slideshow__btn{{block.id}}:before{ background-color:{{block.settings.bg_button_hover}}; } .slideshow__btn{{block.id}}:hover{ color:{{block.settings.color_button_hover}}; } .slideshow__btn{{block.id}}:hover:before{ background-color:{{block.settings.bg_button_hover}}; }

{%- endif -%}

{%- endfor -%}

{%- for block in section.blocks -%} {%- assign show_text = false -%} {%- unless block.settings.slide_title == blank and block.settings.subheading == blank -%} {%- assign show_text = true -%} {%- endunless -%} {%- assign show_link_button = false -%} {%- if block.settings.button_label != blank and block.settings.button_link != blank -%} {%- assign show_link_button = true -%} {%- endif -%} {%- if show_text or show_link_button -%}

{%- unless block.settings.slide_toptitle == blank -%}

{%- endunless -%} {%- unless block.settings.slide_title == blank -%}

{%- endunless -%} {%- unless block.settings.subheading == blank -%} {{ block.settings.subheading }} {%- endunless -%}

{%- if show_link_button -%}

.slideshow__btn{{block.id}}{ background-color:{{block.settings.bg_button}}; color:{{block.settings.color_button}}; } .slideshow__btn{{block.id}}:before{ background-color:{{block.settings.bg_button_hover}}; } .slideshow__btn{{block.id}}:hover{ color:{{block.settings.color_button_hover}}; } .slideshow__btn{{block.id}}:hover:before{ background-color:{{block.settings.bg_button_hover}}; } {{ block.settings.button_label | escape }} {%- endif -%}

{%- endif -%} {%- endfor -%}

{%- endif -%} {%- if section.blocks.size == 0 -%}

{%- endif -%}

{% schema %} { "name": "Slideshow 1", "class": "index-section index-section--slideshow", "max_blocks": 8, "settings": [ { "type": "select", "id": "slideshow_height", "label": "Slide height", "default": "adapt", "info": "Learn more about [slideshow guidelines]([https://help.shopify.com/en/manual/using-themes/themes-by-shopify/debut#slideshow-sections-specific](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/debut#slideshow-sections-specific))", "options": [ { "label": "Adapt to first image", "value": "adapt" }, { "label": "Small", "value": "small" }, { "label": "Medium", "value": "medium" }, { "label": "Large", "value": "large" } ] }, { "type": "checkbox", "id": "show_overlay", "label": "Show overlay", "default": true }, { "type": "checkbox", "id": "gradient_overlay", "label": "Gradient overlay", "default": true }, { "type": "color", "id": "bg_overlay", "label": "Background Overlay", "default": "#000" }, { "type": "checkbox", "id": "autorotate", "label": "Auto-rotate slides", "default": false }, { "type": "range", "id": "autorotate_speed", "label": "Change slides every", "max": 9, "min": 3, "step": 2, "unit": " s", "default": 5 }, { "type": "color", "id": "color_arrow", "label": "Color Arrow", "default": "#000" }, { "type": "color", "id": "color_dot_nav", "label": "Color Dot", "default": "#000" }, { "type": "color", "id": "color_dot_active", "label": "Color Dot Active", "default": "#C99A5C" } ], "blocks": [ { "type": "image", "name": "Image slide", "settings": [ { "type": "image_picker", "id": "image", "label": "Image" }, { "type": "select", "id": "alignment", "label": "Image position", "default": "center center", "options": [ { "label": "Top left", "value": "left top" }, { "label": "Top center", "value": "center top" }, { "label": "Top right", "value": "right top" }, { "label": "Middle left", "value": "left center" }, { "label": "Middle center", "value": "center center" }, { "label": "Middle right", "value": "right center" }, { "label": "Bottom left", "value": "left bottom" }, { "label": "Bottom center", "value": "center bottom" }, { "label": "Bottom right", "value": "right bottom" } ] }, { "type": "select", "id": "text_alignment", "label": "Text alignment", "default": "center center", "options": [ { "label": "Top left", "value": "left top" }, { "label": "Top center", "value": "center top" }, { "label": "Top right", "value": "right top" }, { "label": "Middle left", "value": "left center" }, { "label": "Middle center", "value": "center center" }, { "label": "Middle right", "value": "right center" }, { "label": "Bottom left", "value": "left bottom" }, { "label": "Bottom center", "value": "center bottom" }, { "label": "Bottom right", "value": "right bottom" } ] }, { "type": "color", "id": "bgwrap", "label": "Background Slide", "default": "#F8EDE7" }, { "type": "text", "id": "slide_toptitle", "label": "Top Title", "default": "Design by Shopifytemplate" }, { "type": "color", "id": "slide_toptitle_color", "label": "Top title color", "default": "#999" }, { "type": "text", "id": "slide_title", "label": "Heading", "default": "Image slide" }, { "type": "color", "id": "slide_title_color", "label": "Heading color", "default": "#fff" }, { "type": "textarea", "id": "subheading", "label": "Subheading", "default": "Tell your brand's story through images" }, { "type": "color", "id": "subheading_color", "label": "Subheading color", "default": "#fff" }, { "type": "text", "id": "button_label", "label": "Button label" }, { "type": "url", "id": "button_link", "label": "Button link" }, { "type": "checkbox", "id": "stylebtn", "label": "Enable Style Button" }, { "type": "color", "id": "bg_button", "label": "Background Button", "default": "#000" }, { "type": "color", "id": "color_button", "label": "Color Button", "default": "#fff" }, { "type": "color", "id": "bg_button_hover", "label": "Background Button Hover", "default": "#b6813c" }, { "type": "color", "id": "color_button_hover", "label": "Color Button Hover", "default": "#fff" } ] } ] } {% endschema %}

dmwwebartisan · June 9, 2021, 1:27am

@shells

Please share your store URL.

shells · June 9, 2021, 1:39am

Hi there!

https://www.feyrebaby.com.au/?_ab=0&_fd=0&_sc=1&key=30a6734db3eb469fc3230c658d16242280371e1607b73bea648483c69fcf28d8

shells · June 9, 2021, 1:43am

I think they’ve used Shopify’s debut slideshow template but I just can’t find where to adjust the margins

dmwwebartisan · June 9, 2021, 2:12am

@shells

I checked this website. The slider text already on left. Please provide a screenshot of which text you want to align?

shells · June 9, 2021, 2:16am

It is to the left already but I want it move it further to the left. How can I adjust that?

dmwwebartisan · June 9, 2021, 2:25am

@shells

Please add the following code at the bottom of your assets/theme.scss.liquid file.

.slideshow__text-wrap--desktop .slideshow__text-content{
    padding: 0 10px !important;
	}

Hope this works.

Thanks!

shells · June 9, 2021, 2:32am

Hi dmwwebartisan!

Thank you so much but it still doesn’t work. I want the three text: top title, mega title and sub text as well as the button to all shift a little bit to the left.

I’ve pasted it like so

Am I doing something wrongly?

shells · June 9, 2021, 2:46am

If I email you my login details, will you be able to help me fix it? Would really really appreciate it!

dmwwebartisan · June 9, 2021, 2:54am

@shells

Please remove old code and add this new code.

.slideshow__text-wrap--desktop .slideshow__text-content .container{
   margin-left: 20px !important;
}

Let me know if this works.

Thanks!

shells · June 9, 2021, 3:30am

Amazing. Thank you so so much.

On the same topic. I am editing the mobile version for this same slideshow. With the restrictions, the text goes under the photo. However, I don’t know how to change the colour of the background. The text is in white and it would be good if I can change the colour of the background and the button or just change the font colour to a darker colour without altering the white for the desktop page.

Would you be able to help me with this?

Thank you so much

dmwwebartisan · June 9, 2021, 3:34am

@shells

Please add the following code for the mobile.

@media only screen and (max-width: 749px){
.slideshow__subtitle--mobile, .slideshow__title--mobile, .slideshow__toptitle--mobile {
    color: #666666 !important;
}
}

Hope this works.

Thanks!

shells · June 9, 2021, 3:53am

You are amazing!! It looks really good now. Thank you!!!

Another issue I am encountering is the slash that I’ve circled. Im not sure where they are coming from. This is on the product page.

And for the description, the bullets are sitting outside the box. How can I fix this please?

dmwwebartisan · June 9, 2021, 8:06am

@shells

That “/” below the image you have to search in your product template liquid file. It is accidentally put there. So you have found and remove that.

As for the bullets in the description tab. You can add the following code.

.template-product #nav-tab-info ul {
    margin-left: 20px;
}

Hope this works.

Thanks!

shells · June 9, 2021, 8:12am

Thank you @dmwwebartisan !!

Do I add the code at the end? I just tried and it didn’t work…

As for the / / I can’t find it! Would it just be as ‘/’ stuck somewhere?

shells · June 9, 2021, 8:14am

.modal-backdrop.show{ display:none !important; } #productrelated { margin-top: 70px } .product-modal__image { display: block; position: relative; top: 50%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); display: block; max-height: 95%; max-width: 95%; margin: 0 auto; cursor: auto } .no-csstransforms .product-modal__image { top: 2.5% } #nav-tab-info .nav-tabs { border-bottom: none; text-align: center; justify-content: center; } #nav-tab-info .nav-tabs .nav-link { border: none; border-bottom: 2px solid transparent; color: #222; font-size: 16px; } #nav-tab-info .nav-tabs .nav-link.active { border-bottom: 2px solid {{settings.color_primary}}; } #nav-tab-info .nav-tabs .nav-item { text-transform: capitalize; padding:0; margin:0 5rem -2px 0; font-weight: normal; background-color: transparent; font-size: 16px; padding:5px 0; } .nav-link .spr-badge-starrating { display: none } .social-sharing .col-title { font-size: 14px; line-height: 1.8; min-width: 75px; } .safe-checkout-detail { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .product-form__quantity-submit { display: flex; align-items: center; padding-top: 10px; } .product-form__quantity-submit .product-form__item--submit { margin-left: 10px; } .selector-wrapper { margin: 15px 0; } #shopify-section-{{ section.id }} .product-single__info-wrapper{ padding:0rem 0rem 0rem 3rem; } .template-product .main-content{ padding-top:80px; } .product-form-select .selector-wrapper{ flex: 0 0 50%; max-width: 50%; } @media (max-width:1100px) { #shopify-section-{{ section.id }} .product-single__info-wrapper{ padding:0rem 0rem 0rem 0rem; } .product-form__quantity-submit{ display: block; } .product-form__item--quantity{ width: 130px; margin-bottom: 10px; } .product-form__quantity-submit .product-form__item--submit{ margin:0 0 10px 0 !important; } .product-form__buynow{ margin:0; } } @media (max-width:767px) { .main-content { padding-top: 20px; } }

{% assign product_image_size = '480x480' %} {% assign current_variant = product.selected_or_first_available_variant %}

{%- assign featured_image = current_variant.featured_image | default: product.featured_image -%} {%- for image in product.images -%} {% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %} {{ image.alt | escape }}

{%- endfor -%}

${{ featured_image.alt | escape }}$ {% include 'productVideo' %}

{%- if product.images.size > 1 -%}

{%- for image in product.images -%}

{% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %} {{ image.alt | escape }}

{%- endfor -%}

{%- endif -%} {% if section.settings.positiontab == "left" %}

{% if section.settings.enable_tabvertical %} {%- include 'product-information-vertical' -%} {% else %} {%- include 'product-information' -%} {% endif %}

{% endif %}

{{ product.title }}^{{{ 'products.product.on_sale' | t }}}

{% if product.metafields.info.shortdesc != blank %}

{% endif %}

{%- unless product.compare_at_price_max > product.price -%} {{ 'products.product.regular_price' | t }} {%- endunless -%} {{ current_variant.price | money }}
{{ 'products.product.regular_price' | t }} ~~{{ current_variant.compare_at_price | money }}~~

{%- if section.settings.stock_enable -%}

{%- include 'productStock' -%}

{% if product.metafields.info.affiliate_link != blank %}{% comment %}AFFILIATE PRODUCT{% endcomment %}

{{product.metafields.info.affiliate_button}}

{% else %} {% comment %}NORMAL PRODUCT{% endcomment %}
{% capture “form_class” %}product-form {% if section.settings.product_selector == ‘select’%} product-form-select{% endif %} {% if section.settings.enable_payment_button %} product-form–payment-button{% endif %}{%- endcapture %}
{% capture “form_id” %}AddToCartForm-{{ section.id }}{%- endcapture %}
{% form ‘product’, product, class:form_class, id:form_id %}
{% unless product.has_only_default_variant %}
{% for option in product.options_with_values %}

{{ option.name }} {% include 'productOption' %}

{% endfor %} {% endunless %}

{% unless current_variant.available %} {{ 'products.product.sold_out' | t }} {% else %} {{ 'products.product.add_to_cart' | t }} {% endunless %}

{% if section.settings.enable_payment_button %}

{{ form | payment_button }} {% if current_variant.available == false %}.shopify-payment-button{display:none}{% endif %}

{% endif %}

{% if settings.enable_compare %} {%- include 'icon-exchange' -%} {%- include 'icon-close' -%} {{ 'products.product.compare_text' | t }} {% endif %} {% if settings.enable_wishlsit %} {%- include 'icon-heart' -%} < class="wishlist-text">{{ 'products.product.wishlist_text' | t }}</ {% endif %}

{%- include 'productSizeGuide' -%}

{% if section.settings.social_sharing_products %}

{% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}

{% endif %}

{% endform %} {% include 'notifySoldoutProduct' %} {% endif %}

{% if section.settings.product_vendor_enable %}

{{'products.product.vendor' | t }}: {{ product.vendor }}

{% endif %} {% if section.settings.product_type_enable %}

{{'products.product.type' | t }}: {{ product.type }}

{% endif %} {% if section.settings.variant_sku_enable %}

{{'products.product.sku' | t }}: {{ current_variant.sku | default:'null' }}

{% endif %} {% if section.settings.variant_available_enable %}

{{'products.product.available' | t }}: {% if current_variant.available %}{{ 'products.product.available' | t }}{% else %}{{'products.product.sold_out' | t }}{% endif %}

{% endif %}

{% if settings.safe_checkout_detail != blank %}

{% endif %}

{% include 'fake-viewer' %} {% include 'free-shipping' %} {% include 'shipping-time' %} {% if settings.enable_countdown_page %} {% include 'product-countdown' %} {% endif %}

{% if section.settings.positiontab == “right” %}
{% if section.settings.enable_tabvertical %}
{%- include ‘product-information-vertical’ -%}
{% else %}
{%- include ‘product-information’ -%}
{% endif %}
{% endif%}

{% if section.settings.positiontab == "bottom" %} /

/

{% if section.settings.enable_tabvertical %} {%- include 'product-information-vertical' -%} {% else %} {%- include 'product-information' -%} {% endif %}

{% endif %}

{% for block in section.blocks %} {% if block.type == 'html' %} {%- include 'html-product' -%} {% elsif block.type == 'video' %} {%- include 'video-product'-%} {% elsif block.type == 'related-product' %} {%- include 'related-products' -%} {% elsif block.type == 'service' %} {%- include 'service-pro' -%} {% endif %} {% endfor %}

{%- include 'cross-sell' -%} {%- include 'upsell' -%} {%- include 'next-prev-product' -%} {%- include 'photoswipe' -%} {%- include 'sticky-cart' -%}

{% schema %}
{
“name”: “Product template 1”,
“settings”: [
{
“type”: “checkbox”,
“id”: “stock_enable”,
“label”: “Show stock when less than 10 products available”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “enable_payment_button”,
“label”: “Show dynamic checkout button”,
“info”: “Each customer will see their preferred payment method from those available on your store, such as PayPal or Apple Pay. Learn more”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “social_sharing_products”,
“label”: “Enable product sharing”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “next_prev_enable”,
“label”: “Enable next/previous products”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “product_vendor_enable”,
“label”: “Show product vendor”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “product_type_enable”,
“label”: “Show product type”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “variant_sku_enable”,
“label”: “Show variant sku”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “variant_available_enable”,
“label”: “Show variant availability”,
“default”: true
},
{
“type”: “select”,
“id”: “product_selector”,
“label”: “Option type”,
“options”: [
{
“value”: “radio”,
“label”: “Button”
},
{
“value”: “select”,
“label”: “Dropdown”
}
]
},
{
“type”: “header”,
“content”: “Size guide”
},
{
“type”: “checkbox”,
“id”: “sizeguide_enable”,
“label”: “Enable”,
“default”: true
},
{
“type”: “text”,
“id”: “sizeguide_title”,
“label”: “Title”,
“default”: “Size guide”
},
{
“type”: “page”,
“id”: “sizeguide_page”,
“label”: “Select page”,
“info”: “Create new page and enter your HTML size guide”
},
{
“type”: “header”,
“content”: “Short description”
},
{
“type”: “paragraph”,
“content”: " Enter content for each product here."
},
{
“type”: “paragraph”,
“content”: " Can use plain text or HTML code"
},
{
“type”: “header”,
“content”: “Fake viewer”
},
{
“type”: “checkbox”,
“id”: “fake_view_enable”,
“label”: “Enable”,
“default”: true
},
{
“type”: “range”,
“id”: “fake_view_min”,
“min”: 10,
“max”: 110,
“step”: 1,
“label”: “Min value”,
“default”: 12
},
{
“type”: “range”,
“id”: “fake_view_max”,
“min”: 25,
“max”: 125,
“step”: 1,
“label”: “Max value”,
“default”: 30
},
{
“type”: “range”,
“id”: “fake_view_duration”,
“min”: 1,
“max”: 20,
“step”: 1,
“unit”: “s”,
“label”: “Duration time”,
“default”: 3
},
{
“type”: “text”,
“id”: “fake_view_text_prefix”,
“label”: “Pretext”,
“default”: “Currently there are "
},
{
“type”: “text”,
“id”: “fake_view_text_suffix”,
“label”: “Subtext”,
“default”: " peoples are currently looking at this product”
},
{
“type”: “header”,
“content”: “General tabs”
},
{
“type”: “text”,
“id”: “gtab_des”,
“label”: “Title (Description tab)”,
“default”: “Description”
},
{
“type”: “checkbox”,
“id”: “gtab_review_enable”,
“label”: “Review tab”,
“default”: true,
“info”:“Install review application here”
},
{
“type”: “text”,
“id”: “gtab_review”,
“label”: “Title (Review tab)”,
“default”: “Review”
},
{
“type”: “header”,
“content”: “Special tabs”
},
{
“type”: “paragraph”,
“content”: " Enter content of each tab here"
},
{
“type”: “paragraph”,
“content”: " Can use plain text or HTML code"
},
{
“type”: “paragraph”,
“content”: " Set blank to disable."
},
{
“type”: “select”,
“id”: “positiontab”,
“label”: “Position Tab”,
“default”:“right”,
“options”: [
{
“value”: “left”,
“label”: “Tab Left”
},
{
“value”: “right”,
“label”: “Tab Right”
},
{
“value”: “bottom”,
“label”: “Tab Bottom”
}
]
},
{
“type”: “checkbox”,
“id”: “enable_tabvertical”,
“label”: “Enable Tab Vertical”
},
{
“type”: “text”,
“id”: “stab_title1”,
“label”: “Title 1”,
“default”: “Specific tab 1”
},
{
“type”: “text”,
“id”: “stab_title2”,
“label”: “Title 2”,
“default”: “Specific tab 2”
},
{
“type”: “text”,
“id”: “stab_title3”,
“label”: “Title 3”,
“default”: “Specific tab 3”
},
{
“type”: “text”,
“id”: “stab_title4”,
“label”: “Title 4”,
“default”: “Specific tab 4”
},
{
“type”: “header”,
“content”: “Sticky Cart”
},
{
“type”: “checkbox”,
“id”: “enable”,
“label”: “Enable”,
“default”: true
},
{
“type”: “color”,
“id”: “mix_1”,
“label”: “Mix color 1”,
“default”: “#262626”
},
{
“type”: “color”,
“id”: “mix_2”,
“label”: “Mix color 2”,
“default”: “#c0c0c0”
},
{
“type”: “color”,
“id”: “text_cl”,
“label”: “Text”,
“default”: “#fff”
},
{
“type”: “color”,
“id”: “cart_bg”,
“label”: “CTA Button Background”,
“default”: “#b7001d”
},
{
“type”: “color”,
“id”: “cart_cl”,
“label”: “CTA Button Text”,
“default”: “#fff”
}
],
“blocks”: [
{
“type”: “related-product”,
“name”: “Related Product”,
“limit”: 1,
“settings”: [
{
“type”: “select”,
“id”: “setwidthcontent”,
“label”: “Width Content”,
“default”:“container”,
“options”: [
{
“value”: “container”,
“label”: “Container”
},
{
“value”: “container-fluid”,
“label”: “Container Fluid”
},
{
“value”: “”,
“label”: “Full No Padding”
}
]
},
{
“type”: “text”,
“id”: “relate_products_title”,
“label”: “Title”,
“default”: “Related product”
},
{
“type”: “range”,
“id”: “show”,
“min”: 1,
“max”: 5,
“step”: 1,
“label”: “Show”,
“default”: 4
},
{
“type”: “checkbox”,
“id”: “arrows”,
“label”: “Arrows”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “draggable”,
“label”: “Draggable”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “dots”,
“label”: “Dots”,
“default”: true
}
]
},
{
“type”: “html”,
“name”: “Html”,
“settings”: [
{
“type”: “select”,
“id”: “setwidthcontent”,
“label”: “Width Content”,
“default”:“container”,
“options”: [
{
“value”: “container”,
“label”: “Container”
},
{
“value”: “container-fluid”,
“label”: “Container Fluid”
},
{
“value”: “”,
“label”: “Full No Padding”
}
]
},
{
“id”: “content_html”,
“type”: “html”,
“label”: “HTML”
}
]
},
{
“type”: “video”,
“name”: “Video”,
“limit”: 1,
“settings”: [
{
“type”: “select”,
“id”: “setwidthcontent”,
“label”: “Width Content”,
“default”:“container”,
“options”: [
{
“value”: “container”,
“label”: “Container”
},
{
“value”: “container-fluid”,
“label”: “Container Fluid”
},
{
“value”: “”,
“label”: “Full No Padding”
}
]
},
{
“type”: “select”,
“id”: “align”,
“label”: “Text align”,
“default”: “right”,
“options”: [
{
“label”: “Left”,
“value”: “left”
},
{
“label”: “Center”,
“value”: “center”
},
{
“label”: “Right”,
“value”: “right”
}
]
},
{
“type”: “range”,
“id”: “padding_desktop”,
“min”: 100,
“max”: 500,
“step”: 10,
“unit”: “px”,
“label”: “Padding desktop”,
“default”: 300
},
{
“type”: “range”,
“id”: “padding_mobile”,
“min”: 0,
“max”: 300,
“step”: 10,
“unit”: “px”,
“label”: “Padding mobile”,
“default”: 80
},
{
“type”: “color”,
“id”: “bg_box”,
“label”: “Background Boxed”,
“default”: “#fff”
},
{
“type”: “range”,
“id”: “opacity_bgbox”,
“min”: 0,
“max”: 1,
“step”: 0.1,
“label”: “Opacity Background Boxed”,
“default”: 1
},
{
“type”: “text”,
“id”: “title”,
“label”: “Title”,
“default”: “Elements”
},
{
“type”: “color”,
“id”: “title_color”,
“label”: “Title”,
“default”: “#fff”
},
{
“type”: “textarea”,
“id”: “subtext”,
“label”: “Subtitle”,
“default”: “Protection from the”
},
{
“type”: “color”,
“id”: “subtitle_color”,
“label”: “Title”,
“default”: “#fff”
},
{
“type”: “text”,
“id”: “button”,
“label”: “Button text”,
“default”: “discover now”
},
{
“type”: “url”,
“id”: “link”,
“label”: “Link”,
“info”: “Optional”
},
{
“type”: “textarea”,
“id”: “link_video”,
“label”: “Link Video”,
“info”: “Upload video in your host”
}
]
},
{
“type”: “service”,
“name”: “Service”,
“limit”: 1,
“settings”: [
{
“type”: “select”,
“id”: “setwidthcontent”,
“label”: “Width Content”,
“default”:“container”,
“options”: [
{
“value”: “container”,
“label”: “Container”
},
{
“value”: “container-fluid”,
“label”: “Container Fluid”
},
{
“value”: “”,
“label”: “Full No Padding”
}
]
},
{
“type”: “select”,
“id”: “style_service”,
“label”: “Style Service”,
“default”: “pro__ser_1”,
“options”: [
{
“value”: “pro__ser_1”,
“label”: “Style 1”
},
{
“value”: “pro__ser_2”,
“label”: “Style 2”
}
]
},
{
“type”: “image_picker”,
“id”: “icon_1”,
“label”: “Icon Image 1”
},
{
“type”: “html”,
“id”: “ser_1”,
“label”: “Text Service 1”
},
{
“type”: “image_picker”,
“id”: “icon_2”,
“label”: “Icon Image 2”
},
{
“type”: “html”,
“id”: “ser_2”,
“label”: “Text Service 2”
},
{
“type”: “image_picker”,
“id”: “icon_3”,
“label”: “Icon Image 3”
},
{
“type”: “html”,
“id”: “ser_3”,
“label”: “Text Service 3”
},
{
“type”: “image_picker”,
“id”: “icon_4”,
“label”: “Icon Image 4”
},
{
“type”: “html”,
“id”: “ser_4”,
“label”: “Text Service 4”
},
{
“type”: “image_picker”,
“id”: “icon_5”,
“label”: “Icon Image 5”
},
{
“type”: “html”,
“id”: “ser_5”,
“label”: “Text Service 5”
}
]
}
]
}
{% endschema %}

{% include 'icon-close' %}

{% unless product == empty %} {% if section.settings.stock_enable %} {% endif %} {% endunless %}

{% if collection %}

{% include 'icon-arrow-thin-left' %} {{ 'products.product.collection_return' | t: collection: collection.title }}

{% endif %}

@dmwwebartisan Are you able to see the / / here?

dmwwebartisan · June 9, 2021, 8:15am

@shells

Yes, please add at the bottom of your assets/theme.scss.liquid file.

The code should work.

dmwwebartisan · June 9, 2021, 8:17am

@shells

Please check here. Try to remove it.

shells · June 9, 2021, 8:37am

You are amazing. Thank you so much

shells · June 9, 2021, 8:41am

Also wondering if you can help with this. How can I change the colour of the date to white and also reduce the size of the blog title? This is on my home page under Latest News.

I’m so close to completing my website and really am grateful for your help.

Topic		Replies	Views
Can the slideshow button in the Brooklyn theme be repositioned to the bottom? Store Design	6	82	September 17, 2021
The slideshow photos seem different on mobile version Store Design	8	73	January 11, 2022
Need help with a clickable slideshow in Brooklyn theme Store Design	5	196	May 23, 2022
How can I adjust the size of slideshow arrows in the Brooklyn theme? Store Design	2	39	August 18, 2021
#ERROR! Technical Q&A	0	19	July 21, 2021

How to adjust text alignment on a landing page slideshow?

{{ block.settings.slide_title }}

{{ block.settings.slide_title }}

{{ product.title }} {{ 'products.product.on_sale' | t }}

Related topics

{{ product.title }}^{{{ 'products.product.on_sale' | t }}}