How to move my compare at price to sit to the right of my Price on the same Line?

Solved
Highlighted
Tourist
14 0 1

I would like to try and move my compare at price to the right or left of my price on the same line just like it shows in my collections page as at the moment it seems to clash with my afterpay text and is sitting below the text. 

https://www.livindreamz.com/collections/kids-cars/products/disney-captain-america-ride-on-car

0 Likes
Highlighted

This is an accepted solution.

Hi @Maj79 

I think you can use this code, just paste it to the bottom of the style.css.liquid file.

 

 

.product-details-content .product-details-price{
	flex-direction: row!important;
    flex-wrap: wrap!important;
}
.product-details-content .product-details-price #ProductPrice {
	order: 1;
}
.product-details-content .product-details-price #ComparePrice {
	order: 2;	
	margin-bottom: 10px;
}
.product-details-content .product-details-price .afterpay-paragraph {
	order: 3;
}

 

 

If it works, please like and mark it as a solution :")

Footnote: The anatomy of a good product page.

- Tips to optimize website loadspeed: academy.pagefly.io/how-to-speed-up-website

- Do you need to customize your landing page, product page, blog, coming soon, FAQ, about us pages? Check out PageFly - Advanced Shopify Page Builder.
2 Likes
Shopify Partner
2763 602 743

Hey @Maj79,

To do so you have to change your sections/product-template.liquid code a little bit. Just move to compare price code next to the price.

Please check the screenshot given below.

move-compare-price.jpg

 

Let me know if you can do that or provide me with code here.

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Tourist
14 0 1

Thank you this has worked by pasting to my style.css file.  I have one other question though as now from my collections page if i quick view a product the compare at price looks the same as my other price so 2 prices side by side the compare at price needs to show with the line through it. 

0 Likes
Highlighted
Tourist
14 0 1

@dmwwebartisan wrote:

Hey @Maj79,

To do so you have to change your sections/product-template.liquid code a little bit. Just move to compare price code next to the price.

Please check the screenshot given below.

 

Sorry my issue is now to do with no line through my compare at price in the product quick view clicking in from my home page. 

But This is my whole code in that file i cant see anything like your above code. 



{%- assign on_sale = false -%}
{%- if product.compare_at_price > product.price -%}
{%- assign on_sale = true -%}
{%- endif -%}

{%- assign sold_out = true -%}
{%- if product.available -%}
{%- assign sold_out = false -%}
{%- endif -%}

{%- assign current_variant = product.selected_or_first_available_variant -%}
<div class="product-details-area pt-100 pb-95">
<div class="container">
<div class="row{% if section.settings.content_handle == 'content_in_left' and section.settings.product_style != 'slider' %} flex-row-reverse{% endif %}">
{%- if section.settings.product_style == 'tab_style_1' -%}
{%- include 'tab-style-1' -%}

{%- elsif section.settings.product_style == 'tab_style_2' -%}
{%- include 'tab-style-2' -%}

{%- elsif section.settings.product_style == 'tab_style_3' -%}
{%- include 'tab-style-3' -%}

{%- elsif section.settings.product_style == 'gallery' -%}
{%- include 'gallery-style' -%}

{%- elsif section.settings.product_style == 'sticky' -%}
{%- include 'sticky-style' -%}

{%- elsif section.settings.product_style == 'slider' -%}
{%- include 'slider-style' -%}
{%- endif -%}
</div>
</div>
</div>

{% style %}
.dynamic_btn {
max-width: 340px;
margin-bottom: 20px;
}
.dynamic_btn button {
padding: 23px 38px;
border-radius: 0;
background-color: {{ section.settings.dynamic_btn_bg }};
font-size: {{ section.settings.dynamic_btn_size }}px;
}
.dynamic_btn button:hover {
background-color: {{ settings.color_primary }} !important;
}
{% if section.settings.show_variant_image %}
.swatch-element.color > label {
height: 30px;
width: 30px;
}
{% endif %}
{% endstyle %}

{% schema %}
{
"name": "Product",
"settings": [
{
"type": "header",
"content": "Product Style"
},
{
"type": "radio",
"id": "content_handle",
"label": "Content Position",
"options": [
{
"label": "Left",
"value": "content_in_left"
},
{
"label": "Right",
"value": "content_in_right"
}
],
"default": "content_in_right"
},
{
"type": "select",
"id": "product_style",
"label": "Product Style",
"options":[
{
"label": "Tab 1",
"value": "tab_style_1"
},
{
"label": "Tab 2",
"value": "tab_style_2"
},
{
"label": "Tab 3",
"value": "tab_style_3"
},
{
"label": "Gallery",
"value": "gallery"
},
{
"label": "Sticky",
"value": "sticky"
},
{
"label": "Slider",
"value": "slider"
}
],
"default": "tab_style_1"
},
{
"type": "header",
"content": "Product Zoom"
},
{
"type": "checkbox",
"id": "product_zoom_enable",
"label": "Product Zoom Enable",
"default": true
},
{
"type": "select",
"id": "zoom_type",
"label": "Zoom Type",
"options":[
{
"label": "Lens",
"value": "lens"
},
{
"label": "Window",
"value": "window"
},
{
"label": "Inner",
"value": "inner"
}
],
"default": "inner"
},
{
"type": "header",
"content": "Video Button"
},
{
"type": "checkbox",
"id": "show_video",
"label": "Enable Video Button",
"default": true
},
{
"type": "checkbox",
"id": "show_video_icon",
"label": "Show Video Icon",
"default": true
},
{
"type": "text",
"id": "video_btn",
"label": "Button Text",
"default": "View Video"
},
{
"type": "paragraph",
"content": "=> Use Shortcode in your product description to show Video tab- [product_video]Video ID[/product_video]"
},
{
"type": "paragraph",
"content": "[How to Get Video ID](https:\/\/image.prntscr.com/image/P7-HVQuzSlyPO2vOpHX5LQ.png)"
},
{
"type": "header",
"content": "Image Popup"
},
{
"type": "checkbox",
"id": "product_popup_enable",
"label": "Product Popup Enable",
"default": true,
"info": "When 'Product Zoom' enabled and product style 'Default' then it applicable"
},
{
"type": "header",
"content": "Product SKU"
},
{
"type": "checkbox",
"id": "product_sku_enable",
"label": "Show Product SKU",
"default": true
},
{
"type": "text",
"id": "product_sku_title",
"label": "SKU Title",
"default": "SKU:"
},
{
"type": "header",
"content": "Product Review"
},
{
"type": "paragraph",
"content": "To enable product review, go to 'Theme settings > Product Settings'"
},
{
"type": "header",
"content": "Product Description"
},
{
"type": "radio",
"id": "product_description_handle",
"label": "Description Handle",
"options":[
{
"label": "Full Description",
"value": "full_description"
},
{
"label": "Short Description",
"value": "short_description"
},
{
"label": "Without Description",
"value": "without_description"
}
],
"default": "short_description"
},
{
"type": "number",
"id": "truncatewords_count_handle",
"label": "Description Word Count",
"default": 35,
"info": "If 'Short Description' is selected and the shortcode is not used, then it will be applicable"
},
{
"type": "header",
"content": "Product Meta"
},
{
"type": "checkbox",
"id": "product_meta_enable",
"label": "Product Meta Enable",
"default": true
},
{
"type": "text",
"id": "product_meta_title",
"label": "Meta Title",
"default": "Book Name:"
},
{
"type": "text",
"id": "product_meta_author",
"label": "Meta Author",
"default": "Author Name"
},
{
"type": "text",
"id": "product_meta_type",
"label": "Meta Product Type",
"default": "Product Type"
},
{
"type": "text",
"id": "product_meta_date",
"label": "Meta Publish Date",
"default": "Item Publish Date"
},
{
"type": "text",
"id": "product_meta_barcode",
"label": "Meta Barcode",
"default": "Barcode"
},
{
"type": "header",
"content": "Product Variant"
},
{
"type": "radio",
"id": "product_variant_handle",
"label": "Variant Option",
"options":[
{
"label": "Select Option",
"value": "product_variant_select_option"
},
{
"label": "Swatch Option",
"value": "product_variant_swatch_option"
},
{
"label": "Without Variant",
"value": "product_variant_without_option"
}
],
"default": "product_variant_swatch_option"
},
{
"type": "checkbox",
"id": "show_variant_image",
"label": "Variant image enable",
"default": false,
"info": "The variant image will replace in color field if each variant each image selected. It's applicable for 'Swatch Option'"
},
{
"type": "header",
"content": "Dynamic Checkout Buttons"
},
{
"type": "checkbox",
"id": "dynamic_checkout_button_enable",
"label": "Enable Dynamic Checkout Buttons",
"default": true
},
{
"type": "color",
"id": "dynamic_btn_bg",
"label": "Button BG Color",
"default": "#1f2226"
},
{
"type": "range",
"id": "dynamic_btn_size",
"min": 12,
"max": 40,
"step": 1,
"label": "Button Font Size",
"unit": "px",
"default": 16
},
{
"type": "header",
"content": "Social Share Option"
},
{
"type": "checkbox",
"id": "social_share_enable",
"label": "Show Social Share",
"default": true
},
{
"type": "text",
"id": "social_share_title",
"label": "Social Share Title",
"default": "Share:"
},

{
"type": "header",
"content": "Category"
},
{
"type": "checkbox",
"id": "show_cat",
"label": "Show Category",
"default": true
},
{
"type": "text",
"id": "cat_title",
"label": "Category Title",
"default": "Categories: "
},
{
"type": "header",
"content": "Tag"
},
{
"type": "checkbox",
"id": "show_tag",
"label": "Show Tag",
"default": true
},
{
"type": "text",
"id": "tag_title",
"label": "Tag Title",
"default": "Tag: "
},
{
"type": "header",
"content": "Payment Option"
},
{
"type": "checkbox",
"id": "payment_option_enable",
"label": "Show Payment Option",
"default": true
},
{
"type": "text",
"id": "payment_information",
"label": "Information",
"default": "Guaranteed safe checkout"
},
{
"type": "image_picker",
"id": "payment_image",
"label": "Payment Image"
},
{
"type": "radio",
"id": "payment_icon",
"label": "Payment Icon",
"options":[
{
"label": "Automatic",
"value": "automatic"
},
{
"label": "Custom Icon",
"value": "custom_icon"
}
],
"default": "custom_icon"
}
],
"blocks":[
{
"type": "amazon_payments",
"name": "Amazon Payments",
"limit": 1
},
{
"type": "american_express",
"name": "American Express",
"limit": 1
},
{
"type": "apple_pay",
"name": "Apple Pay",
"limit": 1
},
{
"type": "bitcoin",
"name": "Bitcoin",
"limit": 1
},
{
"type": "dankort",
"name": "Dankort",
"limit": 1
},
{
"type": "diners_club",
"name": "Diners Club",
"limit": 1
},
{
"type": "discover",
"name": "Discover",
"limit": 1
},
{
"type": "dogecoin",
"name": "Dogecoin",
"limit": 1
},
{
"type": "dwolla",
"name": "Dwolla",
"limit": 1
},
{
"type": "forbrugsforeningen",
"name": "Forbrugsforeningen",
"limit": 1
},
{
"type": "google_pay",
"name": "Google Pay",
"limit": 1
},
{
"type": "jcb",
"name": "Jcb",
"limit": 1
},
{
"type": "klarna",
"name": "Klarna",
"limit": 1
},
{
"type": "litecoin",
"name": "Litecoin",
"limit": 1
},
{
"type": "maestro",
"name": "Maestro",
"limit": 1
},
{
"type": "master",
"name": "Master",
"limit": 1
},
{
"type": "paypal",
"name": "Paypal",
"limit": 1
},
{
"type": "shopify_pay",
"name": "Shopify Pay",
"limit": 1
},
{
"type": "sofort",
"name": "Sofort",
"limit": 1
},
{
"type": "visa",
"name": "Visa",
"limit": 1
}
]
}
{% endschema %}


{%- if section.settings.product_zoom_enable -%}
<script src="{{ 'jquery.elevateZoom-3.0.8.min.js' | asset_url }}"></script>
{%- endif -%}

{%- if section.settings.product_popup_enable -%}
{{ 'jquery.fancybox.css' | asset_url | stylesheet_tag }}
<script src="{{ 'jquery.fancybox.min.js' | asset_url }}"></script>

<script>
$(document).ready(function() {
$('.fancybox').fancybox();
});
</script>
{%- endif -%}

{%- if section.settings.product_style == 'product_sticky' -%}
<script src="{{ 'ResizeSensor-StickySidebar.js' | asset_url }}"></script>
<script>
var sidebar = new StickySidebar('#product-content', {
containerSelector: '#product-details-with-gallery',
innerWrapperSelector: '.product-content-inner',
topSpacing: 20,
bottomSpacing: 20,
minWidth: 992,
});
</script>
{% endif %}


<script>
var selectCallback = function(variant, selector) {
timber.productPage({
money_format: "{{ shop.money_format }}",
variant: variant,
selector: selector
});

if (variant) {

// Current variant select+
var form = jQuery('#' + selector.domIdPrefix).closest('form');
for (var i=0,length=variant.options.length; i<length; i++) {
var val = variant.options[i].replace(/'/g,"&#039;");
var radioButton = form.find(".swatch[data-option-index='" + i + "'] :radio[value='" + val +"']");
if (radioButton.size()) {
radioButton.get(0).checked = true;
}
}

// Current sku pass
$('.variant-sku').text(variant.sku);
}else {
$('.variant-sku').empty();
}

{% comment %}
// in stock / out stock product start
if (variant) {
if (variant.inventory_management == "shopify" && variant.inventory_policy != "continue") {
if (variant.inventory_quantity > 0) {
jQuery('#variant-inventory').text(variant.inventory_quantity + ' in stock');
} else {
jQuery('#variant-inventory').text("Out of stock");
}
} else {
jQuery('#variant-inventory').text("In stock");
}
} else {
jQuery('#variant-inventory').text("");
}
{% endcomment %}


{%- if section.settings.product_zoom_enable -%}
// product image zoom with variant
if (variant && variant.featured_image) {
jQuery('#ProductThumbs a[data-image-id="' + variant.featured_image.id + '"]').trigger('click');
}
{%- endif -%}

};

jQuery(function($) {
new Shopify.OptionSelectors('productSelect', {
product: {{ product | json }},
onVariantSelected: selectCallback,
enableHistoryState: true
});

// Add label if only one product option and it isn't 'Title'. Could be 'Size'.
{% if product.options.size == 1 and product.options.first != 'Title' %}
$('.selector-wrapper:eq(0)').prepend('<label for="productSelect-option-0">{{ product.options.first | escape }}</label>');
{% endif %}

// Hide selectors if we only have 1 variant and its title contains 'Default'.
{% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}
$('.selector-wrapper').hide();
{% endif %}
});

{%- if section.settings.product_zoom_enable -%}
function productZoom(){
$(".product-zoom").elevateZoom({
gallery: 'ProductThumbs',
galleryActiveClass: "active",
zoomType: "{{ section.settings.zoom_type }}",
cursor: "crosshair"
});
{%- if section.settings.product_popup_enable -%}
$(".product-zoom").on("click", function(e) {
var ez = $('.product-zoom').data('elevateZoom');
$.fancybox(ez.getGalleryList());
return false;
});
{% endif %}
};
function productZoomDisable(){
if( $(window).width() < 767 ) {
$('.zoomContainer').remove();
$(".product-zoom").removeData('elevateZoom');
$(".product-zoom").removeData('zoomImage');
} else {
productZoom();
}
};

productZoomDisable();

$(window).resize(function() {
productZoomDisable();
});
{%- endif -%}

</script>

0 Likes
Highlighted
Shopify Partner
2763 602 743

Hey @Maj79,

If your problem has been solved then no need to do that.

In that case, you have to modify the liquid code of sections/product-template.liquid file ( for your information ). Is this code of product-template liquid file?

But your problem solved then no need to change liquid code. If you feel that, you have problem with devices then you can think about it. But for now I can see everything is fine.

Thanks!

 

 

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes