CTA button before check-out

Dear community,

I would like to ask for your assistance.

I own www.romaniandrinks.co.uk and I have the impression that the SCV is pretty low and most people decide to stick to 1-2 products compared to what the compare is experiencing.

One cause could be the lack of clear next steps after a product has been added to the shopping basket. As you can see from the enclosed screenshots, the customers would need to search for the burger menu on the top left to go back to the product menu. I would like on this page to add 1-2 buttons to guide the customers back to the products.

Could anybody help with the code for such a button?

Hey @MAndreiD

Which button you would like to add?

As you have so many product collections, which collection you would like redirect to from the cart?

Hi MAndreiD,

If you just need a button like “Continue shopping” to navigate clients back to the “all-products” page, add this code to the cart page/cart drawer and change the href if needed.


   Continue shopping

I hope this helps!

Hello,

I’ve opened up the cart json and trying to add the code but it doesn’t allow. Where should I add it?

/*


  • IMPORTANT: The contents of this file are auto-generated.
  • This file may be updated by the Shopify admin theme editor
  • or related systems. Please exercise caution as any changes
  • made to this file may be overwritten.

*/
{
“sections”: {
“main-cart”: {
“type”: “main-cart”,
“blocks”: {
“cart-items”: {
“type”: “cart-items”,
“settings”: {
}
},
“related_items_kAMzzY”: {
“type”: “related-items”,
“settings”: {
“title”: “Often bought together”,
“products_number”: 3
}
}
},
“block_order”: [
“cart-items”,
“related_items_kAMzzY”
],
“settings”: {
}
},
“featured_collection_7YEe99”: {
“type”: “featured-collection”,
“blocks”: {
“price_9wfp3b”: {
“type”: “price”,
“settings”: {
}
},
“title_8ibAGR”: {
“type”: “title”,
“settings”: {
}
},
“quick_buy_9Vbjp4”: {
“type”: “quick_buy”,
“settings”: {
}
}
},
“block_order”: [
“price_9wfp3b”,
“title_8ibAGR”,
“quick_buy_9Vbjp4”
],
“disabled”: true,
“custom_css”: [
“.card {border: 4px solid #90918a;}”
],
“settings”: {
“heading”: “Discover more products”,
“subheading”: “”,
“show_view_all”: false,
“section_heading_layout”: “section-heading–left”,
“style”: “grid”,
“layout”: “grid-4 grid-portable-3 grid-lap-2 grid-tiny-1”,
“products_number”: 4,
“collection”: “wine”,
“section_background_color”: “rgba(0,0,0,0)”,
“section_heading_color”: “rgba(0,0,0,0)”,
“remove_margin”: false,
“seo_h_tag”: “h2”
}
}
},
“order”: [
“main-cart”,
“featured_collection_7YEe99”
]
}

Sorry, which liquid or json file do I need to add this to?

hi Sonya,

I would like to buttons in fact: one for alcoholic category and one for non-alcoholic collection

Hi @MAndreiD

Pls follow below steps to achieve your needs

  1. Open your theme code editor

2.Open file in sections/main-cart-footer.liquid

  1. Paste the code below the checkout button
View Alcoholic Drinks
                 View Non-Alcoholic Drinks

Hope this helps

Sonya, your instructions are super clear and thank you for taking the time to reply.

Unfortunately I don’t have this liquid code as you can see from the attached

Can you open your main-cart.liquid in the sections and give me a screenshot

{{ ‘section-main-cart.css’ | asset_url | stylesheet_tag }}
{{ ‘component-cart.css’ | asset_url | stylesheet_tag }}

{{ 'cart.title' | t }}

{%- for block in section.blocks -%}

{%- case block.type -%}

{%- when ‘@app’ -%}

{%- render block -%}

{%- when ‘cart-items’ -%}

{%- render 'cart-form-page' -%}

{%- when ‘shipping-calculator’ -%}

{{ ‘component-shipping-calculator.css’ | asset_url | stylesheet_tag }}

<shipping-calculator {{ block.shopify_attributes }}>

{{ 'cart.shipping_calculator.title' | t }}
{{ 'customers.addresses_page.form.country_label' | t }}
{{ 'customers.addresses_page.form.province_label' | t }}
{{ 'customers.addresses_page.form.zip_label' | t }}
{{ 'cart.shipping_calculator.form_button_label' | t }}

    {%- when ‘related-items’ -%}
    <product-recommendations {{ block.shopify_attributes }} id=“cart-recommendations”
    data-url=“{{ routes.product_recommendations_url }}?section_id={{ section.id }}&product_id={{ cart.items[0].product_id }}&limit={{ block.settings.products_number }}”>
    {%- if recommendations.performed and recommendations.products_count > 0 -%}

    {{ block.settings.title | escape }}

    {%- for product in recommendations.products -%}

    {%- render 'lazy-image-small', image: product.featured_media, aspect_ratio: settings.cart_image_ratio, fit: settings.cart_image_fit -%}
    {{ product.title | escape }} {%- render 'product-price', variant: product.selected_or_first_available_variant, target: product.selected_or_first_available_variant, product_price_varies: product.price_varies -%}
    {%- render 'quick-buy', product: product, button_classes: 'button--small' -%}

    {%- endfor -%}

    {%- endif -%}

    {%- endcase -%}

    {%- endfor -%}

    {% schema %}
    {
    “name”: “t:settings_schema.cart-page.name”,
    “blocks”: [
    {
    “type”: “cart-items”,
    “limit”: 1,
    “name”: “t:sections.main-cart-items.name”
    },
    {
    “type”: “shipping-calculator”,
    “limit”: 1,
    “name”: “t:sections.local-extra-words.sections.main-cart.blocks.shipping-calculator.name”
    },
    {
    “type”: “related-items”,
    “limit”: 1,
    “name”: “t:sections.local-extra-words.sections.main-product.blocks.related.name”,
    “settings”: [
    {
    “type”: “paragraph”,
    “content”: “t:sections.local-extra-words.sections.main-cart.blocks.related-products.info”
    },
    {
    “type”: “text”,
    “id”: “title”,
    “label”: “t:sections.local-extra-words.sections.headings.title”,
    “default”: “Related products”
    },
    {
    “type”: “range”,
    “id”: “products_number”,
    “label”: “t:sections.featured-collection.settings.products_number.label”,
    “min”: 1,
    “max”: 6,
    “step”: 1,
    “default”: 3
    }
    ]
    },
    {
    “type”: “@app
    }
    ]
    }
    {% endschema %}

    ok. Then pls open the cart-subtotal.liquid in the snippets and copy the code out for me to have a check

    {%- liquid
    if settings.show_currency_codes
    assign iso_code = localization.country.currency.iso_code | prepend: ’ ’
    endif
    -%}

    {%- if type == ‘page’ and settings.cart_free_shipping -%}
    <shipping-notice
    data-free-shipping=“{{ settings.cart_free_shipping_amount | times: 100 }}”
    data-cart-total-amount=“{{ cart.total_price }}”
    data-show-alert

    {%- endif - %}

    {%- if cart.cart_level_discount_applications != blank -%}

    {{ 'cart.subtotal' | t }} {{ cart.items_subtotal_price | money | append: iso_code }}
    {{ 'cart.discounts' | t }} {%- for discount_application in cart.cart_level_discount_applications -%} {{ discount_application.title }} ( -{{ discount_application.total_allocated_amount | money | append: iso_code }} ) {%- endfor -%}
    {%- endif -%}
    {{ 'cart.total' | t }} {{ cart.total_price | money | append: iso_code }}

    {%- if settings.cart_notes_enable and type == ‘page’ -%}

    {{ 'cart.note' | t }} {{ cart.note }}
    {%- endif -%}
    {%- liquid if cart.taxes_included and shop.shipping_policy.body != blank echo 'cart.policies.taxes_included_and_shipping_policy_html' | t: link: shop.shipping_policy.url elsif cart.taxes_included echo 'cart.policies.taxes_included_but_shipping_at_checkout' | t elsif shop.shipping_policy.body != blank echo 'cart.policies.taxes_and_shipping_policy_at_checkout_html' | t: link: shop.shipping_policy.url else echo 'cart.policies.taxes_and_shipping_at_checkout' | t endif -%}
    {%- unless type == 'page' -%} {%- if settings.cart_drawer_actions contains 'show-view' -%} {{ 'cart.view_cart' | t }} {%- endif -%} {%- endunless -%} {%- if settings.cart_drawer_actions contains 'show-checkout' or type == 'page' -%} {{ 'cart.checkout' | t }} {%- endif -%}

    {%- unless template contains ‘order’ -%}
    {%- if settings.cart_drawer_actions contains ‘show-checkout’ or type == ‘page’ -%}
    {%- if additional_checkout_buttons and settings.cart_additional_buttons -%}

    {{ content_for_additional_checkout_buttons }}
    {%- endif -%} {%- endif -%} {%- endunless -%}

    Thanks for your collaboration.

    ok. search “CheckOut” button in this file. and copy the code below under the checkout button.

    View Alcoholic Drinks
                     View Non-Alcoholic Drinks
    

    I’ve added the code but the position of the bottoms is off.

    How about this?

    You can do follow steps to achieve this.

    1. Update code to below
    View Alcoholic Drinks
                     View Non-Alcoholic Drinks
    
    1. At the end of the file. Paste the code to the file
    
    

    Seems that the buttons don’t want to move and I’ve tried moving the last code before and after the end of the file.

    Where do you would like buttons to move?

    Either below “Shopping Cart” headline or between “Product” and “Often bought together”

    Hey @MAndreiD

    If so, you may not put the code into the cart-subtotal.liquid. consider copy the code to main-cart.liquid. like here below the “shopping cart” headline

    But I think may be it’s better-look to put the buttons together with the checkout.